HTML5 SCSS Boilerplate
Clone the repo for your project
git clone https://github.com/kingRayhan/html5-scss-boilerplate.git
Navigate to project directory
cd html5-scss-boilerplate
Generate style.css
file by compiling scss files
sass --watch assets/styles/style.scss:style.css
** For run this command compile all scss styles, you must have to install Ruby Gem and SASS previously in your local machine. **
File architecture
All assets file like images , javascripts , scss including third-party libraries will be in the assets
folder. Only markup files ( .html , .php , .rb , .asp ...) and main style sheet ( style.css which will come in after compiling scss files ).
Assets directory difination
-
image/ - Contains all images
-
plugins/ - All third-party libraries like wow.js , animate.css , bootstrap will be here. By default this framework included 4 libraries. They are -
-
Twitter Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
Font-Awesome - The iconic font and CSS toolkit
-
jquery - Javascript library for make javascript easy
-
JQuery MeanMenu - Jquery plugin for responsive mobile menu.
-
styles/
-
style.scss - Contains all scss pertials
-
abstracts/
-
_functions.scss - This file contains all application-wide Sass functions.
-
_mixins.scss - This file contains all application-wide Sass mixins.
-
_mixins.scss - This file contains all application-wide Sass mixins.
-
_variables.scss - This file contains all application-wide Sass variables.
-
base/
-
_base.scss - This file contains very basic styles.
-
_fonts.scss - This file contains all @font-face declarations, if any.
-
_helpers.scss - This file contains CSS helper classes.
-
_typography.scss - Basic typography style for copy text
-
components/ - This directory will holds your project's components partials scss files such as
_buttons.scss
, _tab.scss
, _accordion.scss
...
-
layout/ - This directory contains all styles of application layouts such as
_header.scss
, _sidebar.scss
etc...
-
pages/ - Page specific scss partials file will be here.
-
themes/ - If your project has several theme , then these theme specified scss pertials will be here.