Skip to content

Latest commit

 

History

History
97 lines (72 loc) · 2.95 KB

README.md

File metadata and controls

97 lines (72 loc) · 2.95 KB
Raw

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

  1. Using Laravel Mix

    Frontend-Boilerplate for sass boilerplate + Laravel-mix

  2. Using Gulp-Sass

  3. Using Grunt-Sass

Contributing

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