Faster builds with Bet­ter boiler plate

Learn how to build a sim­ple and beau­ti­ful page us­ing the fron­tend frame­work Bet­ter­boil­er­plate

Web Designer - - Contents -

Learn how to build a sim­ple and beau­ti­ful page us­ing the new front end frame­work Bet­ter boiler plate

The Bet­ter­boil­er­plate is a new fron­tend frame­work aimed at de­vel­op­ers, free­lancers and agen­cies but can eas­ily be adapted and used in any sized project. It is meant to be used as a start­ing point for a project, from which you’re en­cour­aged to up­date, change and add to the files. The Bet­ter­boil­er­plate is made up of many el­e­ments, and will han­dle many as­pects of the project build. The fea­tures in­clude file struc­ture; code com­pi­la­tion and mini­fi­ca­tion (SASS/SCSS, Javascript); SASS mix­ins and func­tions; im­age op­ti­mi­sa­tion; SVG sprite com­pi­la­tion; and a pat­tern li­brary con­tain­ing com­mon re­us­able com­po­nents.

Frame­works like Boot­strap and Foun­da­tion have many pre-made and pre-styled com­po­nents, while this can be use­ful for de­vel­op­ers not fa­mil­iar with CSS or for pro­to­typ­ing, you can spent a lot of time over­rid­ing the styles pro­vided by th­ese frame­works.

The Bet­ter­boil­er­plate doesn’t in­clude many pre-built com­po­nents and shouldn’t be in­cluded as an ex­ter­nal stylesheet, in­stead the Bet­ter­boil­er­plate is where you will write your project files. The SASS frame­work al­lows for brand el­e­ments (such as colour and spac­ing) to be eas­ily pro­grammed and used through­out.

In this tu­to­rial we’ll look at a few of th­ese fea­tures and build a sim­ple page.

1. Cre­ate the project folder

We’ll start by cre­at­ing a new project folder, down­load­ing the Bet­ter­boil­er­plate and adding it to our project folder. You can down­load it from Github ( or you can clone the project;

$ git clone Bet­ter­branda­gency/bet­ter­boil­er­plate.git .

2. In­stall the de­pen­den­cies

The Bet­ter­boil­er­plate has a few pre­req­ui­sites. You will need to in­stall NPM, SASS and Gulp be­fore you can use the frame­work. Once they’re in­stalled we can in­stall the de­pen­den­cies from the boil­er­plate. To do this, nav­i­gate to your project folder in com­mand line, and run the ‘npm in­stall’ com­mand.

3. Cre­ate our first build

Now we have ev­ery­thing in­stalled we can cre­ate our first build by run­ning the ‘gulp’ com­mand inside the ‘bet­ter-boil­er­plate’ folder. When we run this com­mand a new folder named ‘dist’ will ap­pear in the root of your project. This folder will con­tain the com­piled CSS and Javascript as well as the gen­er­ated SVG sprite. This com­mand will also listen for changes to any files in the project and au­to­mat­i­cally re­com­pile.

4. Cre­ate our in­dex file

Next we’ll cre­ate our in­dex file and in­clude th­ese com­piled files in our web­site. In the root of the project cre­ate the ‘in­dex.html’ file and in­clude the com­piled CSS. <!doctype html>

<html lang=”en”>



<link rel=”stylesheet” href=”dist/css/main.css”>




5. Gather project as­sets files

Dis­trib­ute them into the cor­rect fold­ers. If we now run the ‘gulp’ com­mand inside our ‘bet­ter-boil­er­plate’ folder the ‘dist’ folder will be up­dated with our new files.

6. Set our brand colours

Next we’ll dig into the CSS frame­work and set our brand prop­er­ties. We’ll start with the brand colours. Let’s jump into the ‘src/styles/01-set­tings/tcolours.scss’ file and up­date the pho­netic colour vari­ables to re­flect our brand. $color-al­pha: #FF7C1D;

$color-bravo: #00A2B2;

$color-char­lie: #707070;

7. Set our brand type set­tings

Now we’ve change the colours we’ll also up­date the fonts. To do this we’ll move into the ‘tfonts-and-text.scss’ file (also in the ‘01-set­tings’ direc­tory) and up­date the rel­e­vant vari­ables. $font-fam­ily-al­pha:

‘PT Sans’, sans-serif; $font-fam­ily-bravo: ‘Nanum Pen Script’, cur­sive; $base-font-size:

18px !de­fault;

8. Markup the hero area

Let’s jump back into our HTML and cre­ate the code for a sim­ple hero area. We’ll use the BEM method­ol­ogy for nam­ing the classes and cre­ate an over­lay, logo, head­line and icon inside.

<div class=”hero”>

<div class=”hero__over­lay”></div>

<div class=”hero__­con­tent”></div>


9. Markup the hero con­tent

We can copy and paste the SVG code from the ‘pat­ter-li­brary/html-pat­terns’ folder and change the rel­e­vant parts to use the SVGS we added to the project. We sim­ply re­place the ‘SVG-NAME’ with the file name of the SVG. We’ll do this for the logo and smi­ley icon, as well as adding a head­line.

<svg class=”hero__l­ogo svg” view­box=”0 0 331


<ti­tle>email­ify Logo</ti­tle>

<use href=”dist/im­ages/sprite. svg/#logo”></use>



<svg class=”hero__s­mi­ley svg” view­box=”0 0

61 64”>

<use href=”dist/im­ages/sprite.

svg/#smi­ley”></use> </svg>

10. Cre­ate our own SCSS file

In or­der to style our hero area we’ll cre­ate a new file for all our hero spe­cific styles. We’ll do this inside the ‘src\ styles\06-com­po­nents’ folder and add the new file to the list in ‘src\styles\main.scss’ in or­der to in­clude it in the out­putted CSS file.


// Com­po­nents - Com­plete Chunks of UI


@im­port “06-com­po­nents/hero_”;

11. Style the hero

Now we’ve cre­ated the file to con­tain our styles we can go ahead and start writ­ing our styles. While we’re writ­ing our CSS we need to be run­ning the gulp com­mand so changes will be com­piled ev­ery time we save a file.

.hero { po­si­tion: rel­a­tive; dis­play: flex; align-items: cen­ter; jus­tify-con­tent: cen­ter; color: white; back­ground: { im­age: url(../im­ages/hero-im­age.jpg); size: cover; }}

12. Style the hero over­lay

Next we’ll style the hero over­lay. We want this to sit over the back­ground im­age to darken it. We can utilise the BEM nest­ing (‘&tt’) built into SASS to nest our el­e­ments inside the block.

.hero { ...

&__over­lay { po­si­tion: ab­so­lute; top: 0; left: 0; width: 100%; height: 100%; back­ground-color: $color-char­lie; mix-blend-mode: mul­ti­ply; opac­ity: 0.8;



13. Style the hero con­tent

When cre­at­ing pad­ding or widths we can utilise the built in vari­able ‘$base-spac­ing-unit’. By us­ing this vari­able we can en­sure a rhythm to the con­tent and spac­ing through­out the en­tire project.

&__­con­tent { pad­ding: $base-spac­ing-unit * 2; po­si­tion: rel­a­tive; text-align: cen­ter; max-width: $base-spac­ing-unit * 30; }

14. Style the SVGS

We’ll again utilise the `$base-spac­ing-unit` to per­form cal­cu­la­tions used for widths and mar­gins. Since th­ese are SVG’S we can add a max-width and then they will scale with the browser but never above the max­i­mum width. &__l­ogo { max-width: $base-spac­ing-unit * 12; mar­gin-bot­tom: $base-spac­ing-unit; }

&__s­mi­ley {

max-width: $base-spac­ing-unit * 2;

15 . Style the hero head­line

The Bet­ter­boil­er­plate in­cludes a num­ber of mix­ins. One of the most use­ful is the abil­ity to cre­ate re­spon­sive ty­pog­ra­phy en­tirely in CSS. h1 {

@in­clude fluid-type(30px, 48px,



); line-height: 1; mar­gin-bot­tom: $half-spac­ing-unit; }

16 . Hero styling fin­ish­ing touches

That’s the hero area pretty much com­plete now, but we can add a cou­ple of fin­ish­ing touches. We’ll add a minimum height to the hero and turn on the font smooth­ing op­tion in the set­tings.

// _hero.scss:

.hero {

min-height: 100vh; }

// _base-op­tions.scss: $use-font-smooth­ing: true;

17 . Al­ter­ing the set­tings

The Bet­ter­boil­er­plate has a num­ber of set­tings, all of which are turned off by de­fault. By turn­ing on some of th­ese set­tings we get ac­cess to some classes to han­dle a num­ber of dif­fer­ent things in the project. We’ll turn on the colour, text, pad­ding and mar­gin classes. $use-color-classes: true; $use-helper-text-styles: true; $use-helper-pad­ding-styles: true; $use-helper-mar­gin-styles: true;

18 . Markup a new sec­tion

Let’s markup a new sec­tion us­ing just th­ese classes. We’ll start by cre­at­ing a sec­tion tag and adding the classes to change the text and back­ground colours and add some pad­ding to the top and bot­tom of the el­e­ment.

<sec­tion class=” back­ground--bravo color--white pad­ding-dou­ble--ends


19 . Markup the con­tent con­tainer

Us­ing the ‘con­tent-con­tainer’ class we add a max­i­mum width to the con­tainer and cen­tre it in the page. We can use the ‘text--cen­ter’ class and the ‘pad­ding-dou­ble’ class to add more spac­ing and cen­tre the text.

<div class=” con­tent-con­tainer text--cen­ter pad­ding-dou­ble “>

20. Markup the con­tent

Next we’ll add a head­line and some text, util­is­ing the mar­gin classes to con­trol the flow of con­tent. The fonts, size and spac­ing are all in­her­ited from the set­ting we changed ear­lier.

<h1 class=”no-mar­gin”>get Started</h1> <p>ae­nean condi­men­tum...</p>

21. Cre­at­ing ad­di­tional colour classes

You’ll no­tice our ‘color--white’ class didn’t work. That’s be­cause it’s not in­cluded as a de­fault colour. To add this colour to the out­putted CSS we’ll open up the ‘tcol­or­classes.scss’ file lo­cated in the ‘src/styles/05-ob­jects/’ folder and add our new colour to the ‘$color-list’ ar­ray. $color-list: ( al­pha $color-al­pha, bravo $color-bravo,

... white #ffffff,


Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.