Simple Frontend Boilerplate with Gulp, SASS, HTML with Grid & JS ES6 Framework.

• IE 11+
• Firefox 50+, Chrome 55+
• iOS 10, Android 4.4.4

• IDE or simply HTML/CSS Editor
• NodeJS
• Basic Sass/JS Knowledge

Put all files in the root of your project folder. To init the framework install all node modules with npm.

npm install

/src/ - folder with all sass, js and html files like a vendor folder. Gulp generate from here.

/htdocs/ - result folder with all compiled files, ready to give this folder to your backend development.

/static/ - (Optional) result folder with all compiled files but only for testing/creating without php. By default gulp browser-sync is rooted to this folder. Perfect to write or extend the frontend.

You just can primary work in the src folder with all frontend files.

The structure is quite simple. In /src/scss you´ll find the basic structure of the baseTemp. In this root are all scss files where used across the site. The main sass configurations like grid, colors or fonts pooled in the config.scss.

In the most of the scss files your can find the mediaquery directly:

@media screen and (min-width: map-get($viewports, mw)) { ... }

Sass get via map-get the size of mw. The $viewports Array are defined in the config.scss. A Gulp Module merge automatically all same Mediaquerys to prevent a bunch of trash.

Modules are closed CSS declarations (with mediaquerys ect.) for using this styles multiple times on multiple pages. Pages are closed CSS declarations to overwrite styles of a module (as a last resort) on a specific site. This can controlled via a body class. When you add a new modules or a new page it´s necessary to add the new scss file in the styles.scss.

We create a little JS framework to make codeing with Javascript easier. The framework reads the complete code and loads only the functions it requires. If you want to write a new JS module you just can create a new JS file in the modules folder. A Gulp Module merge all Javascript files automatically together. To use your module on your site/element you just can add the data-js attribute to a HTML Element with the name of your module. The framework call automatically the init function.

 <div data-js="newModule">....</div>

modules.newModule = {

    init: function() {

        alert("Hello World");

    }
}

We recommend this method. If you need a module across the site you can write it down in the header.js (like a navigation script ect.). The header.js and the base.js are loaded everytime across the site without set a specific attribute.

The Framework differentiate external Libarys they used everytime across the site and external Libarys they used only punctual. Libarys they used everytime across the site you´ll find/set in src/js/libs. Libarys they used only punctual or once you´ll find/set in static/js/libs and htdocs/js/libs

Libarys they used everytime across the site will be merged in the concated js file (functions.js). The other Libarys can be dynamically loaded via Ajax in a Javascript Module.

modules.selectbox = {
    init: function () {
        $.getScript( "/js/libs/selectbox.js", function() {
            $.each($('*[data-js=selectbox]'), function() {
                $(this).find("select").selectBoxIt();
            });

        });
    }
}

The framework includes some little helper for optimal codeing. You can use them in all your own modules.

Some functions for nasty effects. The libarys included in the main functions.js. You dont need to import it.

We´ve add some own events to prevent a bunch of duplicate code.

You can set these attributes on every HTML element. This are plug and play ready functions.

To build a better frontend we implemented a Gulp HTML fileinclude module. You can include HTML in other HTML files and add optional variables. The merged files will be only stored in the /static folder.

The grid is oriented to the bootstrap grid. The sizes are generating automatically based on the $viewports Array in the config.scss.

$viewports: (
    w: 0px,
    sw: 480px,
    mw: 768px,
    lw: 1000px
);
  
$grid:                        12;   <-- Columns
$grid-absolute-box-margin:    5px;  <-- Margin for items
$grid-absolute-site-width:	1008px;  <-- Max. width of Content

<main class="gridWrap">
    <div class="w12 mw6"></div> 
    <div class="w12 mw6"></div>
    <div class="w12"></div>
</main>

In this Example all 3 boxes are going on mobile over 12 columns. From 768px (mw) up the first 2 boxes only going over 6 columns and slide into one line.

We include a standardized formvalidation JS Libary.

<form data-js="formvalidation">
    <input type="text" data-validation-required title="example">
</form>

We include a standardized Slider JS Libary, too. We use the Slick Slider. We just added some nice features like a trigger for the framework when a slider is loaded and some options can be easy set with Data Attributes. With the Suffix of a Viewport you can set a specific option to a viewport.

<div data-js="slider" data-dots="true" data-arrows="false" data-arrows-mw="true" data-slidesToShow="1" data-slidesToShow-mw="2">
    <div>
        <figure>
            <img src="https://placehold.it/1280x768">
        </figure>
    </div>
    <div>
        <figure>
            <img src="https://placehold.it/1280x768">
        </figure>
    </div>
</div>

A small accordion function for basic usages

<div data-js="accordion">
    <a href="javascript:void(0);" data-accordion-trigger>Click me</a>
    <div data-accordion-content>
        <p>
            Lorem ilor sit amet.
        </p>
    </div>
</div>

A small modalbox function for basic usages

<a href="javascript:void(0);" data-js="modalbox" data-modalbox="modalbox1">Click me</a>

<div class="modalbox" data-modalbox-name="modalbox1">
    <div>
        <figure>
            <img src="https://placehold.it/1280x768">
        </figure>
    </div>
</div>

A small equal height function for basic usages on div boxes. All boxes with the data-equalheight-element get the same height inner the parent box.

<div data-js="equalheight" data-equalheight-option-breakpoint="mw">
    <div data-equalheight-element="true">
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
    <div data-equalheight-element="true">
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

We include also in this Framework the Selectric Libary from Leonardo Santos.