Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides

Advanced Front End Architecture in D8: Sass, Gulp, and living style guides in real projects.

Aidan Foster - Foster Interactive - @finteractive

AIDAN FOSTER - FRONT END ARCHITECT

Sass T.O

meetup.com/Sass-Toronto/meetup.com/drupalTO/ drupalnorth.org

FOSTERINTERACTIVE.COM

MAIN-SPRING.IO

Main Spring - Front End Tool Kit!

"

Sass / CSS Architecture

#

Gulp / Node Tasks Automate Stuff

$

Living Style Guide

By Rube Goldberg [Public domain], via Wikimedia Commons


Installing: Create New Theme based on Stable !

drupalconsole.com

$ drupal generate:theme --base-theme stable

http://drupalconsole.com

Installing: Extract Zip to your theme!

Installing: Extract Zip to your theme!

$ cd /path-to/my-theme

$ npm install

$ gulp bower

Update /gulp.js/config.js

Task Automation: Setup#

gulp.js/config.js

Task Automation: Gulp / Node Modules#

gulp.js (not much here)gulp.js/config.js (settings)gulp.js/tasks/* (everything here)

Bower Task: Bower Install ( JS / Sass libraries)#

bower.json

%

bower install

/bower_components

% %

% %

JS copied

/js/vendor

% %

% %

minified copy

*.js.min

& &

& &

$ gulp bower

Images Task: Optimize Images (Lossless)#

$ gulp images

compress File Size Nag

/img-src'

( (

( (

/img'

( (

( (

<SASS LINT> ME

SassLint Task: The Sass Coding Convention Enforcer#


)*

All your team use the same customized “rules” for Sass Code


$ gulp SassLint

JsLint Task: #

/js/*.js'

' '

+ + filter

Out/js/vendor'

*.js.min

& &

JS Lint Nags

$ gulp jsLint

styles.css

SASS

Coder - Friendly, Bite-sized Sass “partials”

Compiling with LibSass"

CSS Task: Compile Scss into CSS#

$gulp css:dev

SCSS Lint

Compile CSS

Vendor Prefix

Source Maps

File Size Nag

/scss/*.scss'

' '

+ + %

style.css

http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694

Colour Controlled by CSSSingle file for all variations

SVG Icons - Change Colour w/ CSS,

<a class="btn--icon" href="#"> <svg> <use xlink:href=“/svg/sprite-social.svg#facebook"></use> </svg></a><a class="btn--icon" href="#"> <svg> <use xlink:href=“/svg/sprite-social.svg#twitter"></use> </svg></a>

https://github.com/fosterinteractive/SassTO/tree/master/SVG-icons

SVG Icons - Sprites for performance,

SvgSprite Task: Optimize & Sprite Svg’s (Typically Icons)#

$ gulp svgSpritehttps://github.com/fosterinteractive/mainspring/blob/master/docs/svg.md

De-color & Minify

/svg-src/my-sprite/*.svg'

%%%%

DeleteOutput

/svg/*'

/svg/my-sprite/*.svg'

%%%%

SvgSprite Task: Optimize & Sprite Svg’s (Typically Icons)#

$ gulp svgSpritehttps://github.com/fosterinteractive/mainspring/blob/master/docs/svg.md

De-color & Minify

/svg-src/my-sprite/*.svg'

/svg/my-sprite/*.svg'

%%%%

Create Sprite %

/svg/my-sprite.svg

BrowserSync.io - Live Updates across devices"

$ gulp watch

Watch Task#

Style Guide

SCSS Lint

Compile CSS

Refresh Browsers

%any-file.scss

on Save

SMACSS Scalable and Modular Architecture for CSS (http://smacss.com/)

BEM Block - Element - Modifier (http://bem.info)

Drupal 8 CSS Coding Standards https://www.drupal.org/coding-standards/css/architecture

CSS Naming Conventions"

http://smacss.com

http://bem.info/

https://www.drupal.org/coding-standards/css/architecture

Predictable Reusable Maintainable Scalable

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

.block {} /* Let’s use “component” in Drupal */

.block__element {}

.block--modifier {}

.site-search {} /* Component */

.site-search__field {} /* Element */

.site-search--full {} /* Modifier */

CSS Naming Conventions: Drupal 8 CSS Architecture"


' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor

http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/


' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor


.g-type__h1

.g_type--small

.g_table

.g_svg


' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor


.c-btn

.c-btn--small

.c-card

.c-accordion

.c-menu


' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor


.l-page

.l-header

.l-2col

.l-4col


' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor


.u-clearfix

.u-text-hide

.u-reset-list


' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor


(random CSS 3rdparty libraries)

Main Menu Component

Masthead Component

Action Component

Components"

Components"

%

%

%

'

'

'

%

_c-nav-main.scss

_c-masthead.scss

_c-action.scss

_c-action--vertical.scss

Layouts: Position / Containers Components"

' /scss/globals

' /scss/components

' /scss/layouts

' /scss/utility

' /scss/vendor

styles.css

SASSstyleguide

'

'

'

'

'

'

' '

'

'

' '

style guide website

Living Style Guide - SC5$

https://github.com/SC5/sc5-styleguide

https://github.com/SC5/sc5-styleguide


DEMO.MAIN-SPRING.IO

Living Style Guide - KSS Notation $

// Default Buttons//// .c-btn - Default// .c-btn:hover - Default Hover// .c-btn--blue - Blue// .c-btn--blue:hover - Blue Hover// .c-btn--thin - Thin// .c-btn--thin:hover - Thin Hover// .c-btn--thin-blue - Thin & Blue// .c-btn--thin-blue:hover - Thin & Blue Hover//// markup:// <a href="#" class="{$modifiers}">{$modifiers}</a>//// Styleguide 2.1.1


// Accordion - Open State//// .c-accordion__label - Default.// :hover - Hover state.//// Markup: _c-accordion--is-open.html//// Styleguide 2.7.1

// Accordion - Multiple Accordions//// Markup:// <sg-insert>2.7.2</sg-insert>// <sg-insert>2.7.1</sg-insert>// <sg-insert>2.7.2</sg-insert>//// Styleguide 2.7.3

External HTML code Inserting Existing Components

It’s not easy to setup all these tools

-Team

Velocity

.Fewer Bugs

in QA

#Optimized

Performance

/Recycleable

MAIN-SPRING.IO

Add 1 thing into the mix because we all have to start somewhere.

Thank you!

Questions?

@finteractive

Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides

Technology

Transcript of Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides