Sapl - The Sass Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
- Quick Start
- Architecture Sass
- File Structure
- What's is this
- Features
- How to use Grid System
- How to use Mixins
- How to contribute
- Dependencies
- Source Images
- License
-
Make sure you have these installed
-
Clone repository
git clone https://github.com/nusalab-studios/sapl-gulp.git
-
CD to the folder
cd sapl-gulp
-
Run
yarn install
-
Run
yarn start
-
Happy to use :)
Properly architecting your Sass project is a crucial starting point to having a maintainable, scalable, and well-organized project. Sass makes separating your project into logical “modules” simple with the @import
directive, which acts differently than the native CSS @import
directive in that it includes .scss
or .sass
files before the final CSS output.
You can read the documentation on the @import
directive to get a good idea of how you can use it to include partial files.
There are many project architectures that you can employ in your project, and each might have their pros and cons. The important thing is that you choose one and stick with it. In this article, The 7-1 Pattern by Hugo Giraudel will be used. To summarize, there are seven folders and one main.scss
file for output:
base/
– contains global styles, such as resets, typography, colors, etc.components/
– contains each self-contained component in its own .scss partiallayout/
– contains styling for larger layout components; e.g. nav, header, footer, etc.pages/
– contains page-specific styling, if necessarythemes/
– contains styling for different themesutils/
– contains global mixins, functions, helper selectors, etc.vendors/
– contains 3rd-party styles, mixins, etc.main.scss
– output file that brings together all of the above parts
Reference : scotch.io
Add your files to the appropriate src
subdirectories. Gulp will process and compile them into dist
sapl/
├── dist/
│ ├── css/
│ │ ├── vendors/
│ │ └── main.min.css
│ │
│ ├── fonts/
│ ├── images/
│ ├── js/
│ │ ├── vendors/
│ │ └── main.bundle.js
│ │
│ ├── videos/
│ └── index.html
│
├── src/
│ ├── assets/
│ │ ├── css/
│ │ ├── fonts/
│ │ │ └── sprites/
│ │ │
│ │ ├── images/
│ │ ├── js/
│ │ │ ├── base/
│ │ │ ├── components/
│ │ │ ├── layout/
│ │ │ ├── vendors/
│ │ │ └── main.js
│ │ │
│ │ └── sass/
│ │ ├── base/
│ │ ├── components/
│ │ ├── layout/
│ │ ├── pages/
│ │ ├── themes/
│ │ ├── utils/
│ │ ├── vendors/
│ │ └── main.scss
│ │
│ └── views/
│ ├── index.html
│ └── index2.html
│
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .travis.yml
├── gulpfile.js
├── LICENSE.md
├── package.json
└── README.md
-
.babelrc
This is a babel configuration file that converts the latest version of javascript to the old version. read the documentation here -
.editorconfig
EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. read the documentation here -
.eslintrc
This is a eslint configuration file that checks your js code. read the documentation here -
.gitignore
Ignores minified and generated files, this is best for working in teams to avoid constant conflict, only the source files are needed. read the documentation here -
.travis.yml
This is used on travis-ci.org for continuous integration tests, which monitor the Sapl build. read the documentation here
- Semantic HTML5
- Included Flat Colors
- Included Typographys
- Included Grid System
- Included Babel
- Browser Prefixing
- Minifying HTML
- Minifying CSS
- Minifying Images
- Minifying Javascript
- Linting for Javascript
- SVG Sprites
- Livereload
- Includes Framework
- Includes Useful Mixins
- Breakpoints
- Clearfix
- Rem units
- Background Image
- Background Image Using Parallax Effect
- Background Image Colored
- Background Image Colored and Using Parallax Effect
- Background Image Sliced
- Background Image Sliced and Using Parallax Effect
- Background Image Colored and Sliced
- Background Image Colored, Sliced and Using Parallax Effect
- Background Image Triangle
- Background Image Colored and Triangle
- Background Image Colored, Triangle and Using Parallax Effect
You can choose between columns 1 - 12 that you want to use, in my example, I use column 1.
- Global
<div class="sapl-col-1"> // html code </div>
- Extra Small ≥ 376px
<div class="sapl-col-xs-1"> // html code </div>
- Small ≥ 576px
<div class="sapl-col-sm-1"> // html code </div>
- Medium ≥ 768px
<div class="sapl-col-md-1"> // html code </div>
- Large ≥ 992px
<div class="sapl-col-lg-1"> // html code </div>
- Extra Large ≥ 1200px
<div class="sapl-col-xl-1"> // html code </div>
-
Breakpoints
@include mq (min, xs) { .example { // your css } } @include mq (max, xs) { .example { // your css } } or .example { @include mq (min, xs) { .example-2 { // your css } } } .example { @include mq (max, xs) { .example-2 { // your css } } }
-
Clearfix
.example { @include clearfix; }
-
Rem units
.example { font-size: rem(16px); }
-
Background Image
.example { @include bgImg ('../images/image.jpeg', center center, no-repeat, cover); }
-
Background Image Using Parallax Effect
.example { @include bgImgParallax ('../images/image.jpeg', center center, no-repeat, cover, fixed); }
-
Background Image Colored
.example { @include bgImgColored ('../images/image.jpeg', center center, no-repeat, cover, rgba(255, 0, 0, 0.45)); }
-
Background Image Colored and Using Parallax Effect
.example { @include bgImgColoredParallax ('../images/image.jpeg', center center, no-repeat, cover, fixed, rgba(255, 0, 0, 0.45)); }
-
Background Image Sliced
.example { @include bgImgSlicedTopLeft ('../images/image.jpeg', center center, no-repeat, cover, 87%); } .example { @include bgImgSlicedTopRight ('../images/image.jpeg', center center, no-repeat, cover, 87%); } .example { @include bgImgSlicedBottomLeft ('../images/image.jpeg', center center, no-repeat, cover, 87%); } .example { @include bgImgSlicedBottomRight ('../images/image.jpeg', center center, no-repeat, cover, 87%); } .example { @include bgImgSlicedTopBottomLeftRight ('../images/image.jpeg', center center, no-repeat, cover, 25%, 75%); } .example { @include bgImgSlicedTopBottomRightLeft ('../images/image.jpeg', center center, no-repeat, cover, 25%, 75%); }
-
Background Image Sliced and Using Parallax Effect
.example { @include bgImgSlicedParallaxTopLeft ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%); } .example { @include bgImgSlicedParallaxTopRight ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%); } .example { @include bgImgSlicedParallaxBottomLeft ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%); } .example { @include bgImgSlicedParallaxBottomRight ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%); } .example { @include bgImgSlicedParallaxTopBottomLeftRight ('../images/image.jpeg', center center, no-repeat, cover, fixed, 25%, 75%); } .example { @include bgImgSlicedParallaxTopBottomRightLeft ('../images/image.jpeg', center center, no-repeat, cover, fixed, 25%, 75%); }
-
Background Image Colored and Sliced
.example { @include bgImgColoredSlicedTopLeft ('../images/image.jpeg', center center, no-repeat, cover, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedTopRight ('../images/image.jpeg', center center, no-repeat, cover, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedBottomLeft ('../images/image.jpeg', center center, no-repeat, cover, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedBottomRight ('../images/image.jpeg', center center, no-repeat, cover, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedTopBottomLeftRight ('../images/image.jpeg', center center, no-repeat, cover, 25%, 75%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedTopBottomRightLeft ('../images/image.jpeg', center center, no-repeat, cover, 25%, 75%, rgba(255, 0, 0, 0.45)); }
-
Background Image Colored, Sliced and Using Parallax Effect
.example { @include bgImgColoredSlicedParallaxTopLeft ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedParallaxTopRight ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedParallaxBottomLeft ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedParallaxBottomRight ('../images/image.jpeg', center center, no-repeat, cover, fixed, 87%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedParallaxTopBottomLeftRight ('../images/image.jpeg', center center, no-repeat, cover, fixed, 25%, 75%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredSlicedParallaxTopBottomRightLeft ('../images/image.jpeg', center center, no-repeat, cover, fixed, 25%, 75%, rgba(255, 0, 0, 0.45)); }
-
Background Image Triangle
.example { @include bgImgTriangleTop('../images/image.jpg', center center, no-repeat, cover, 25%); } .example { @include bgImgTriangleBottom('../images/image.jpg', center center, no-repeat, cover, 75%); } .example { @include bgImgTriangleTopBottom('../images/image.jpg', center center, no-repeat, cover, 25%, 75%); }
-
Background Image Colored and Triangle
.example { @include bgImgColoredTriangleTop('../images/image.jpg', center center, no-repeat, cover, 25%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredTriangleBottom('../images/image.jpg', center center, no-repeat, cover, 75%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredTriangleTopBottom('../images/image.jpg', center center, no-repeat, cover, 25%, 75%, rgba(255, 0, 0, 0.45)); }
-
Background Image Colored, Triangle and Using Parallax Effect
.example { @include bgImgColoredTriangleParallaxTop('../images/image.jpg', center center, no-repeat, cover, fixed, 25%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredTriangleParallaxBottom('../images/image.jpg', center center, no-repeat, cover, fixed, 75%, rgba(255, 0, 0, 0.45)); } .example { @include bgImgColoredTriangleParallaxTopBottom('../images/image.jpg', center center, no-repeat, cover, fixed, 25%, 75%, rgba(255, 0, 0, 0.45)); }
I'm delighted that you're helping make this open source project better. Here are a few quick guidelines to make this an easier and better process for everyone.
First, make sure the bug hasn't already been reported by searching GitHub's issues section.
If no existing issue exists, go ahead and create one. Please be sure to include all of the following:
- A clear, descriptive title (ie. "A bug" is not a good title).
- Include the error message if have.
- The browser and OS that you're using.
- Fork it
- Create your feature branch
git checkout -b new-feature
- Commit your changes
git commit -m "Add some feature"
- Push to the branch
git push -u origin new-feature
- Create new Pull Request
- gulp
- babel
- babel-preset-es2015
- babel-preset-stage-2
- babelify
- browser-sync
- del
- eslint
- eslint-config-airbnb
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
- gulp-autoprefixer
- gulp-browserify
- gulp-cssnano
- gulp-eslint
- gulp-htmlmin
- gulp-image
- gulp-rename
- gulp-sass
- gulp-sourcemaps
- gulp-svgmin
- gulp-svgstore
- gulp-uglify
- run-sequence
- vinyl-buffer