Sapl - The Sass Boilerplate

Sapl - The Sass Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

Sass with Gulp : Here
Sass with Grunt : Here
Sass with Webpack : Here

Quick Start

Make sure you have these installed
- node.js
- yarn
- grunt
- sass
- browserify
Clone repository git clone https://github.com/nusalab-studios/sapl-grunt.git
CD to the folder cd sapl-grunt
Run yarn install
Run yarn start
Happy to use :)

Architecture Sass

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 partial
layout/ – contains styling for larger layout components; e.g. nav, header, footer, etc.
pages/ – contains page-specific styling, if necessary
themes/ – contains styling for different themes
utils/ – 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

Directory Architecture

Add your files to the appropriate src subdirectories. Grunt 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
├── gruntfile.js
├── LICENSE.md
├── package.json
└── README.md

What's is this

.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

Features

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
- Jquery
- Jquery UI
- Popper
- Bootstrap
- Font Awesome
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

How to use Grid System

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>

How to use Mixins

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));
}

How to contribute

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.

Reporting a bug

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.

Submitting a Pull Request

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Sapl - The Sass Boilerplate

Table of contents

Quick Start

Architecture Sass

Directory Architecture

What's is this

Features

How to use Grid System

How to use Mixins

How to contribute

Reporting a bug

Submitting a Pull Request

Dependencies

Source Images

License

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
src		src
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
LICENSE.md		LICENSE.md
README.md		README.md
gruntfile.js		gruntfile.js
package.json		package.json

License

nusalab-studios/sapl-grunt

Folders and files

Latest commit

History

Repository files navigation

Sapl - The Sass Boilerplate

Table of contents

Quick Start

Architecture Sass

Directory Architecture

What's is this

Features

How to use Grid System

How to use Mixins

How to contribute

Reporting a bug

Submitting a Pull Request

Dependencies

Source Images

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages