mexili / cssify Goto Github PK

7.0 7.0 9.0 715 KB

License: MIT License

Shell 0.46% SCSS 46.71% JavaScript 47.77% HTML 2.30% CSS 2.76%

cssify's Introduction

Gatsby Starter Portfolio: Cara

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gatsby-theme-cara.

Demo Website

Also be sure to checkout other Free & Open Source Gatsby Themes

✨ Features

Theme UI-based theming
react-spring parallax effect
CSS Animations on Shapes

🚀 Getting Started

Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying this project

gatsby new project-name https://github.com/LekoArts/gatsby-starter-portfolio-cara

Start developing.

Navigate into your new site's directory and start it up.

cd project-name
gatsby develop

Open the code and start customizing!

Your site is now running at http://localhost:8000!

If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can checkout this shorter or longer tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.

📝 Using and modifying this starter

Important Note: Please read the guide Shadowing in Gatsby Themes to understand how to customize the underlying theme!

This starter creates a new Gatsby site that installs and configures the theme @lekoarts/gatsby-theme-cara.

Have a look at the theme's README and files to see what options are available and how you can shadow the various components including Theme UI. Generally speaking you will want to place your files into src/@lekoarts/gatsby-theme-cara/ to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/.

Changing content

The content of this project is defined in four .mdx files inside the theme's sections folder. You can override the files intro.mdx, projects.mdx, about.mdx and contact.mdx. This starter has overriden the intro.mdx file as an example. Place the other files in the same src/@lekoarts/gatsby-theme-cara/sections/ folder.

You have to use the <ProjectCard /> component inside projects.mdx to display the cards. Example:

## Projects

<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
Hello World
</ProjectCard>

Change your `static` folder

The static folder contains the icons, social media images and robots.txt. Don't forget to change these files, too!

🤔 Questions or problems?

Please open up an issue on the main repository: LekoArts/gatsby-themes. Thanks!

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on Gatsby's website.

Themes

To learn more about Gatsby themes specifically, we recommend checking out the theme docs.

General

For most developers, I recommend starting with the in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to Gatsby's documentation. In particular, check out the Reference Guides and Gatsby API sections in the sidebar.

🌟 Supporting me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on Twitter and share the project with me.

Please star this project, share it on Social Media or consider supporting me on Patreon or GitHub Sponsor!

cssify's People

Contributors

Stargazers

Watchers

Forkers

kerinpithawala m-code12 weebo-ary neerajcs19 gk884 theshubhendra souravseal99 nimit2801 aeyshubh

cssify's Issues

Implement the Newer Front End

Is your feature request related to a problem? Please describe.
We'll have to implement the newer front end like in the which will be decided in #2

Follow the BEM model in the naming conventions

Is your feature request related to a problem? Please describe.
Right now, the sass folder follows the convention naming scheme like old school scss.

Describe the solution you'd like
I would want it to switch to BEM naming scheme, allowing easier nesting and scoping of the scss variables.

You can read more about it here: https://css-tricks.com/bem-101/

Describe alternatives you've considered
Changing this in the sass folder would require some alterations to the backend and the frontend as well.

Add contributing.md file

Is your feature request related to a problem? Please describe.
Sometimes its confusing about how to get started with open source and contribute in a project as a beginer.

Describe the solution you'd like
Add contributing.md file which contains tutorial to make pull request from scratch, general guidelines for contribution, and some rules.

Describe alternatives you've considered
Updating README.md but it looks very chaotic

Additional context
Can I work on this feature?

Add a bot to moderate the issue request and the feature request

Is your feature request related to a problem? Please describe.
This bot would help a first time contributor so that that contributor can follow this project's contribution guidelines.We can link our issue template, pull request template and code of conduct here.It will contain newIssue Welcome comment, newPR Welcome comment, firstPR welcome comment,etc.

We can use a GitHub App built with probot that welcomes new users when they open their first issue. You can use this welcome message to provide links to resources like the contributing guidelines, code of conduct, etc. It should be located in a .github/config.yml

Demo 1

Demo 2

Add Code of conduct file

Is your feature request related to a problem? Please describe.
No problem in repo.

Describe the solution you'd like
I would like to add a file for a code of conduct. Because most of open source projects have this feature.

Describe alternatives you've considered
Adding code of conduct in README.md

Additional context
This can help to enhance documentation. Can I work on this issue?

Follow an Utility first approach

Is your feature request related to a problem? Please describe.
I have found utility-first to be a great (if not the best) approach to CSS, for the following reasons:

Smallest possible file transfer sizes
Easy to extend with custom CSS
more reasons here

The most common con of using this technique is the steep learning curve, which is effectively combated by CSSify's user-defined class generation system. It really takes the best of both worlds.

Describe the solution you'd like
Redefine the existing SCSS modules to generate Utility-first classes. Similar to how Tailwind CSS or Wool CSS work.

Describe alternatives you've considered
Outside of utility-first, a popular strategy is BEM. However, this approach is better suited for custom styling, than for a framework. An interesting alternative is the new CUBE CSS method, but I'm unsure how one would apply it to CSSify.

Sanitize Recoil State

Is your feature request related to a problem? Please describe.
Need to clean up the recoil structure

Describe the solution you'd like
Many unused objects present in recoil, need to sanitize it

Add a GitHub action to auto-assign Mentors for every PR

I would like to add a GitHub action to auto-assign mentors for every PR. It sometimes becomes hectic for the mentors to take a look at all the Projects for the PRs made by the Contributors. This action would give a nice notification about reviewing the pr and make things pretty easy for the mentor.

Demo :

Dockerize Deploys

Is your feature request related to a problem? Please describe.
We need to dockerize the front end and the backend separately and will require k8s or docker swarm for orchestration

Describe the solution you'd like
Implement the Docker file

Added Reset Button

I have added a Rest Button to reset all the styles but I need some help.

Currently the reset button is resetting back to the original styles visually. Visually in the sense that we can see the styles change on the frontend but the data which is sent to the backend is not changing, So for that I need some help.

I have made all the changes in here : https://github.com/theshubhagrwl/cssify/tree/reset-button

A new design for the front end app

Is your feature request related to a problem? Please describe.
Right now, the front end overflows the page. We want to keep it a Single Page app, but still having all the possible options accessible.

Describe the solution you'd like
A proposal for a new design of the front page

Include Node Versions

Describe the bug
The CSSIFY Backend won't run in the most recent version of the node eg 15.xx and above.
There's this dependency called node-sass which requires a version of node 14.xx and below for windows and other OS.

To Reproduce
Steps to reproduce the behavior:

Go to the terminal/cmd cd cssify/backend
npm run dev
The client is deployed.
But the backend stops because of this error.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
https://github.com/sass/node-sass/releases/tag/v4.14.1

Desktop

OS: Windows x64
Browser Mozilla
Version 85.0.1 (64-bit)

Downloading the generated CSS file

The CSS file generated is saved in temp folder but the user should get the file downloaded.

It will be better, when the user clicks the Get CSS button then the CSS file is downloaded instead of getting saved in the temp folder.

I think we should work to add a download CSS feature, that will greatly improve the user experience.

Add HMR(Hot Module Reload) with express and react to allow changes and reflection on every alteration

Is your feature request related to a problem? Please describe.
Create a HMR static/build deployment script

Describe the solution you'd like
Connect the express server with the backend server with the deploys to make the deployment process easier and avoid cors shizz.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.