advanced front end architecture in d8: sass, gulp, & living style guides
TRANSCRIPT
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
Main Spring - Front End Tool Kit!
By Rube Goldberg [Public domain], via Wikimedia Commons
Main Spring - Front End Tool Kit!
Installing: Create New Theme based on Stable !
drupalconsole.com
$ drupal generate:theme --base-theme stable
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#
SassLint Task: The Sass Coding Convention Enforcer#
)*
All your team use the same customized “rules” for Sass Code
SassLint Task: The Sass Coding Convention Enforcer#
$ 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"
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"
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/
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/
.g-type__h1
.g_type--small
.g_table
.g_svg
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/
.c-btn
.c-btn--small
.c-card
.c-accordion
.c-menu
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/
.l-page
.l-header
.l-2col
.l-4col
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/
.u-clearfix
.u-text-hide
.u-reset-list
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/
(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
http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
styles.css
SASSstyleguide
'
'
'
'
'
'
' '
'
'
' '
style guide website
Living Style Guide - SC5$
https://github.com/SC5/sc5-styleguide
Living Style Guide - SC5$
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
Living Style Guide - SC5$
// 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