Jekyll Camp

Ghent - sept 6th, 2013

Gregory Van Looy

@bengie

HTML & CSS architect

I suck @ JS :-(

Some kind of workflow

Disclaimer

This is my workflow and it's under constant evaluation and subject to change. No need to copy it, instead: be inspired.

My workflow tools

  • Jekyll
  • Sass + Compass
  • Grunt.js
  • A good text editor/IDE
  • ???

Jekyll in my workflow

Why?

  • Static HTML output - Anyone can view static HTML pages
  • includes: {%include nav.html%}
  • Conditionals 
    
									{% if page.url contains 'news' %}class="current"{% endif %}
  • It's easy. If I can do it, so will you.

Tips & Tricks

Include parameters


{% include button-group.html param='flr' %}

in _includes/button-group.html

Parameter value can be a string, integer or boolean.

Requires Jekyll 1.1.0 and up

Parameters revamped


{% include button-group.html modifier='pull-right' %}

in _includes/button-group.html

Output

Parameters extravaganza


{% include read-later.html modifier='pull-right' digit=223 %}

in _includes/read-later.html



	{% if include.digit %}
		{{ include.digit }}
	{% else %}
		456
	{% endif %}

Output

CSS in my workflow

BEM

Block - Element - Modifier


.block {}
.block__element {} /* note: double underscore */
.block--modifier {} /* note: double hyphen */

More on BEM: here, here, here and here

Example




	
...

	
...

	
...

... with modifier





	
...

	
...

	
...

Naming conventions


/* Bad */
.pageHeader {}
.button--blue {}

/* Good */
.page-header {}
.button--primary {}

Advantages

  • It's clear what's each selector's purpose is
  • Less chance of colliding with CSS of third party plugins
  • Lesser nesting of selectors (when used with SMACSS theming) 
    
/* old skool */
article > header {}
/* old skool + Smacss theming */
.theme--x-mas article > header {}
/* BEM */
.article__header {}
/* BEM + SMACSS theming */
.theme--x-mas .article__header {}
  • ... thus, your CSS rendering is faster

SMACSS

Scalable and Modular Architecture for CSS
smacss.com

Categorizing CSS rules

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

1. Base rules


/* no classes here, only element selectors */
body {}
p {}
a {}

2. Layout rules


/* grid  */
.col {}
.col--2 {}
.col--primary {}

/* layout specific: .layout-- prefix */
.layout--homepage {}

.layout-- classes are added to the html tag

3. Module rules

Biggest chunk of your CSS file


/* skip the prefix, it's too verbose */
.module-carousel {}

/* that's the way, uhu uhu */
.carousel {}

4. State rules


/* .is- prefix */
.is-active {}
.is-hidden {}
.is-collapsed {}
.is-expanded {}

5. Theme rules

Will you need this one?

YES!!!!


.theme--members .article {
	display: boobs; /* tetn */
}
.theme--x-mas blockquote:before {
	content: 'hohoho';
}

.theme-- classes are added to the html tag

Smacss + Sass


| - sass
	| - base
		_base.scss
		_normalize.scss
		_defaults.scss
		_webfonts.scss
		...
	| - layout
		_layout.scss
		_grid.scss
		_sections.scss
		...
	| - modules
		_modules.scss
		_carousel.scss
		_pagination.scss
		...
	| - state
		_state.scss
		...
	| - theme
		_theme.scss
		_x-mas.scss
		...
	_site-settings.scss
	_mixins.scss
	main.scss

Grunt to the rescue

Terminal windows overload

  • Grunt-contrib-compass
    • Sass & Compass
  • Grunt-contrib-watch
    • Watch and compile files (Sass, JS, ...)
  • Grunt-jekyll
    • Jekyll
  • Grunt-bg-shell
    • Compile Jekyll in background
  • More at Gruntjs.com

Documentation

I ♥ styleguides

Hard core

a.k.a. manual labour

Input

Handcoded HTML or markdown files

Output

Advantages

  • Total control
  • Use Jekyll includes {%include nav.html%}

Disadvantages

  • Repetitive

Automated

Grunt, again, to the rescue.

Styledocco

  • Nav tabs based on folder names
  • Subnav based on file names

Input

CSS comments in markdown style

Output

KSS

Sections based on chapter numbers

Input

CSS comments in KSS style

Output

Advantages

  • Automated
  • Well documented CSS files

Disadvantages

  • Keep your snippets up to date *
  • Harder to set up
  • Dependency and hackery
  • * Possible hack: include an empty YAML Front Matter block in your css file and use Jekyll includes

Fin

BY Gregory Van Looy / diezjietal.be / @bengie