Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 10 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.

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/