Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rasif-sahl/scss-shortcuts
Explore a treasure trove of reusable SCSS code snippets, thoughtfully crafted for effortless integration into your projects. Each example is demonstrated in React, simplifying your styling journey. Elevate your design game with our SCSS collection.
https://github.com/rasif-sahl/scss-shortcuts
css front-end front-end-development frontend scss scss-framework scss-mixins scss-styles styled-components styling
Last synced: 21 days ago
JSON representation
Explore a treasure trove of reusable SCSS code snippets, thoughtfully crafted for effortless integration into your projects. Each example is demonstrated in React, simplifying your styling journey. Elevate your design game with our SCSS collection.
- Host: GitHub
- URL: https://github.com/rasif-sahl/scss-shortcuts
- Owner: rasif-sahl
- License: mit
- Created: 2022-08-20T09:58:01.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-28T07:05:09.000Z (about 1 year ago)
- Last Synced: 2024-10-12T19:02:07.890Z (about 1 month ago)
- Topics: css, front-end, front-end-development, frontend, scss, scss-framework, scss-mixins, scss-styles, styled-components, styling
- Language: SCSS
- Homepage:
- Size: 375 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Boost Your Development with SCSS Shortcuts
This project is designed to assist developers in finding shortcuts when working on complex systems using SCSS. It employs the React framework to illustrate the functionality of each section. However, you can easily incorporate the necessary code into any project, provided that you install the required SCSS dependencies.
### How to set up this project in your local mashing
* First install npm globally
* and then `Fork` the repo.
* and then `clone` the repo.
* run `npm install`
* run `npm start`
### Project Structure
Folder | Contents | Documentation
-------|---------|-------
`src/BreakPoints` | This is to display the breakpoints for each frame (mobile/tablet etc) | [Breakpoints Docs](src/BreakPoints/BreakPoints.md)
### How dose this work
* Within the `app.js` file, we've introduced routing mechanisms for every new feature. For instance, the `breakpoints section` can be found at `localhost:3000/`, ensuring easy accessibility.
* Our `app.js` file is structured to include routes for all new functionalities. Take the breakpoints section, accessible at `localhost:3000/`, as an example.
* Incorporating new features is seamless with our routing setup in the `app.js` file. You can navigate to the breakpoints section at `localhost:3000/`.
* Each new functionality is seamlessly integrated using the routing system defined in the `app.js` file. Accessing specific sections, like breakpoints, is as straightforward as visiting localhost:3000/