sass-boilerplate

This is the sass boilerplate using 7-1 architecture pattern that I used in my project.
For more information about this architecture pattern, you can read Guidelines

How to use

• Clone this repo to your project

$ git clone https://github.com/AsyrafHussin/sass-boilerplate.git

• Update folder name from sass-boilerplate to sass

$ mv sass-boilerplate/sass sass && rm -rf sass-boilerplate

• Remove .git and README.md file

$ rm -f sass/.git && rm -rf sass/README.md

Folder Structure

sass/
├── abstracts/
│   ├── _abstracts.scss      # Main abstracts file
│   ├── _functions.scss      # Sass Functions
│   ├── _mixins.scss         # Sass Mixins
│   ├── _placeholders.scss   # Sass Pleholders
│   └── _variables.scss      # Sass Variables
├── base/
│   ├── _base.scss           # Main base file
│   ├── _animations.scss     # Animations/Keyframes
│   ├── _reset.scss          # Reset/normalize
│   └── _typography.scss     # Typography rules
├── components/
│   ├── _components.scss     # Main components file
│   └── _buttons.scss        # Buttons
├── layout/
│   ├── _layout.scss         # Main layout file
│   ├── _footer.scss         # Footer
│   ├── _forms.scss          # Forms
│   ├── _grid.scss           # Grid
│   ├── _navbar.scss         # Navbar
│   └── _sidebar.scss        # Sidebar
├── pages/
│   ├── _pages.scss          # Main pagesfile
│   └── _home.scss           # Home specific styles
├── themes/
│   ├── _default.scss        # Default theme
│   └── _themes.scss         # Main themes file
├── vendors/
│   └── _vendors.scss        # Main vendors file
├── _settings.scss           # Sass Settings
└── app.scss                 # Main Sass file

Compile SASS to CSS

1. Using command line. How to intall?

• Compile
  

$ sass sass/:css/

sass [sass-path]/:[css-path]/
For compile specific file you can use this command
sass sass/app.scss:css/app.css

• Compile with livereload
  

$ sass --watch sass/:css/

• Compile with livereload and minify

$ sass --watch sass/:css/ --style compressed

2. Using Laravel Mix

   Frontend-Boilerplate for sass boilerplate + Laravel-mix

3. Using Gulp-Sass

4. Using Grunt-Sass

Contributing

If you spot any errors, typos or missing information, please submit a pull request.