Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pernillasterner/boilerplate-sass
This e-commerce landing page primarily focuses on demonstrating the implementation of Sass to streamline CSS development.
https://github.com/pernillasterner/boilerplate-sass
bem-methodology frontend grid-layout html5 mixins nodejs relative-units responsive-design sass-framework ui webdesign
Last synced: 6 days ago
JSON representation
This e-commerce landing page primarily focuses on demonstrating the implementation of Sass to streamline CSS development.
- Host: GitHub
- URL: https://github.com/pernillasterner/boilerplate-sass
- Owner: pernillasterner
- Created: 2023-07-27T06:52:53.000Z (over 1 year ago)
- Default Branch: development
- Last Pushed: 2024-05-28T19:25:00.000Z (7 months ago)
- Last Synced: 2024-11-05T15:43:31.623Z (about 2 months ago)
- Topics: bem-methodology, frontend, grid-layout, html5, mixins, nodejs, relative-units, responsive-design, sass-framework, ui, webdesign
- Language: SCSS
- Homepage: https://boilerplate-sass.netlify.app/
- Size: 268 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sass Boilerplate
## 📖 About the Boilerplate
My goal with this boilerplate is to have everything ready to go when starting a new project, with a structure that is easy to use and enhance.
I've included mixins to handle breakpoints, variables for colors, and functions for media queries to simplify the process of creating responsive and easy-to-maintain styles.
## 🗂 File Structure
I've organized the files into three categories: globals, layout, and util.
```
project-root/
│
├── app/
│ ├── js/
│ └── scss/
│ ├── globals/
│ │ ├── _boilerplate.scss
│ │ ├── _typography.scss
│ │ ├── _colors.scss
│ │ ├── _index.scss
| ├── layout/
│ │ ├── _grid.scss
│ │ ├── _index.scss
| ├── util/
| | ├── _breakpoints.scss
│ │ ├── _fonts.scss
| | ├── _functions.scss
│ │ ├── _index.scss
│ └── style.scss
│
├── dist/
│ └── css/
│ ├── style.css
│ └── style.map
│
└── index.html
```
## 🚀 Getting Started
### 📋 Prerequisites
Make sure you have the following installed:
- [Node.js](https://nodejs.org/)
- [Sass](https://sass-lang.com/)
### 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/pernillasterner/boilerplate-sass
cd boilerplate-sass
```
2. Install Sass
```
npm install -g sass
```
3. Run Sass
```
sass --watch app/scss/style.scss dist/css/style.css
```
### 🌐 Usage
After setting up the project, you can start editing the Sass files under the app/scss/ directory. The changes will be automatically compiled into the dist/css/style.css file.