pre-processing for fronteers by viking kristof houben
DESCRIPTION
On 22/6/2012 Viking Kristof Houben gave a presentation at 'Fronteers' about 'Pre-processing'. The organization 'Fronteers' wants to professionalize the job of front-end web development. It strives for the recognition and support of Dutch speaking front-end web developers. 'Fronteers' unites about 450 front-end web developers in Belgium and The Netherlands. Enjoy! 22/6/2012 Fronteers by Kristof HoubenTRANSCRIPT
Pre-processingINCEPTION ALL OVER AGAIN!
RIPARJAN EISING
He’s not really dead :)
Front-end/designat Mobile Vikings
I’m always up for a
Challenge
Run a small firmCALLED TREESHADOW MEDIA
Creative BrewskiTOGETHER WITH @TOMCLAUS & @DENNISJANSSEN
LEt’s TALK
CSS
"You don’t need a new stylesheet syntax, CSS is simple and you’re
a moron if you can’t do it."
C’est très simple
Not that easy to maintain
Stylesheets evolve
Simplicity creates complexity
Keep things DRYDON’T REPEAT YOURSELF
we should Reference to
existing information
"CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s
lack of variables. Unlike the “function” in programming, CSS has no fundamental
building block."
It’s all aboutAbstractions
CSS PRIMITIVES HAVE NO MEANING
That’s our job!
AbstractionsARE GROUPS OF PRIMITIVES
Abstractions are not abstract to us
We give BUILDING BLOCKs meaning
SO IT MAKES IT EASIER FOR US TO UNDERSTAND
Our DESIGNSCHANGE
A kitten dies every time that happens
Find & replaceOH PLEASE, DON’T GET ME STARTED!
Client: “We want #000 to be #333 but not the user information underneath my
#bada55 body text, oh while you're at it could you position absolute that element and
rotate it a gazillion degrees, …
oh, #333 doesn't look that great after all…
Change it back!”
You’re screwed
What do we
NEED?
The interior decorator!
Decorates with parts
He does not make those parts
LAMPS, TABLES, CHAIRS…
PArts for
PArts
Oh my god YOU REUSED A BUTTON!
When elements are common
REUSE tHEM!
Focus!ON WHAT IS IMPORTANT, YOU MUST!
Hard to upgrade Customized third
party stylesheets
Clearly we are in need of some
Pre-processing
"In computer science, a preprocessor is a program that processes its input data to
produce output that is used as input to another program.”
— Wikipedia
SyntacticCUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD
IMPROVEMENTS
ex. SASS & LESS
Keeping things maintainable
SASSBY HAMPTON CATLIN & NATHAN WEIZENBAUM
Written in Ruby
Don’t worry, there are also GUI’s
Watches folders & compiles on save
2007ORIGINAL SASS SYNTAX
Hard to convert existing CSS TO SASS
2010SASS 3 INTRODUCES SCSS
Regular CSS =
VALID SCSS
BUT WAIT there’s also
COMPASS
It’s chock full of the web’s best
reusable patterns.
Also contains other cool featuresIMAGE SPRITING, COLOR FUNCTIONS
You sayLESS
It’s all javascriptORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER
Regular CSS =
VALID LESS
LESS INSPIRED SCSS
VSLESS
SASSThanks to Chris Eppstein - https://gist.github.com/674726
Learning curveYOU HAVE TO KNOW JACK SH*T ABOUT THE CLI
CODEKIT IS HOT!
CSS3 HelpersSASS HAS COMPASS, LESS DOES NOT
Variables
Mixins
Extending
Custom units in SASS
MAKING THE LANGUAGE MORE FUTUREPROOF
Looping
DEMO
Thank you!
Resources:http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/http://sonspring.com/journal/sass-for-designershttp://css-tricks.com/sass-vs-less/http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
Questions?