Frontend on steroids!

FRONT-END ON STEROIDSJoomladagen 2015 - Robin Poort & Tom Janssens

MOBILE FIRSThttps://flic.kr/p/gTH5oL

www.gov.uk

PROGRESSIVE ENHANCEMENThttps://flic.kr/p/4bcAb6

Javascript enabled

Javascript disabled

ACCESSIBILITYhttps://flic.kr/p/dpuB6e

DEMO TIME

OPEN GRAPHhttps://flic.kr/p/2SvT9M

ogp.me

dev.twitter.com/cards/types/summary

LINKED DATA

schema.org

MICRODATA

schema.org

JSON LINKED DATA

BEM

www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem

ATOMIC DESIGN

bradfrost.com/blog/post/atomic-web-design

SASS

SUSY

$beta: 580px; $charlie: 740px;

.sidebar { @include breakpoint($beta) { @include span(4 of 12); }

@include breakpoint($charlie) { @include span(3 of 12); } }

.content { @include breakpoint($beta) { @include span(8 of 12); }

@include breakpoint($charlie) { @include span(9 of 12); } }

@media screen and (min-width: 580px) { .sidebar { width: 32.20339%; float: left; margin-right: 1.69492%; } }

@media screen and (min-width: 740px) { .content { width: 74.57627%; float: left; margin-right: 1.69492%; } }

@media screen and (min-width: 740px) { .sidebar { width: 23.72881%; float: left; margin-right: 1.69492%; } }

@media screen and (min-width: 580px) { .content { width: 66.10169%; float: left; margin-right: 1.69492%; } }

BOWER

# registered package$ bower install jquery

# GitHub shorthand$ bower install desandro/masonry

# Git endpoint$ bower install git://github.com/user/package.git

# URL$ bower install http://example.com/scr.js

{ "name": "internet-platform", "devDependencies": { "html5shiv": "aFarkas/html5shiv#3.7.*", "illusion": "timble/illusion#master", "magnific-popup": "dimsemenov/Magnific", "select2": "ivaynberg/select2#3.5.*", "susy": "ericam/susy#2.2.*" } }

BOWER.JSON

$ bower install

GRUNT

$ npm install grunt-sass

{ "name": "internet-platform", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-watch": "~0.6.1", "grunt-sass": "^0.17.0", "load-grunt-tasks": "^0.6.0" } }

PACKAGE.JSON

$ npm install

module.exports = function(grunt) {

// load time-grunt and all grunt plugins require('load-grunt-tasks')(grunt);

grunt.initConfig({ // Tasks });

grunt.registerTask('default'); };

GRUNTFILE.JS

grunt.initConfig({ // Sass sass: { dist: { files: { css/style.css': 'scss/style.scss', css/ie9.css': 'scss/ie9.scss' } } } });

SASS TASK

grunt.initConfig({ // Watch watch: { sass: { files: 'scss/*.scss', tasks: ['sass'] } });

WATCH TASK

module.exports = function(grunt) {

// load time-grunt and all grunt plugins require('load-grunt-tasks')(grunt);

grunt.initConfig({ sass: {...} watch: {...} });

grunt.registerTask('default', ['watch']); };

GRUNTFILE.JS

$ grunt

PERFORMANCEhttps://flic.kr/p/2SvT9M

www.openpolice.be/stack

OUR STACK

ONE LAST THING ...https://flic.kr/p/2SvT9M

DEMO TIME

We build things for the webwww.timble.net

Thank you!www.openpolice.be - @OpenPoliceBE