Hone your frontend chops
Or: Agile manifesto for frontend devs
Heads Up
assuming you know a thing or two about themeing.
themeing pain points
How does a themer function in an agile setup?
ever changing specifications
rapid prototyping
Do the prototype outside of Drupal.
Let Drupal arrange the DOM for you.
getting a faster workflow
Use base themes
lots to choose from
Mothership
preprocessor languages
SASS intermezzo
Preprocessor which generates CSS
CSS is the least productive tool in the frontend workflow
until recent pastarchitectural mindset to writing CSS
comes in 2 flavours, SASS and SCSS.
#border-radius-combo {
@include border-corner-radius(top, left, 40px);
@include border-corner-radius(top, right, 5px);
@include border-corner-radius(bottom, left, 15px);
@include border-corner-radius(bottom, right, 30px);
}more closer to existing syntax.
#border-radius-combo
+border-corner-radius(top, left, 40px)
+border-corner-radius(top, right, 5px)
+border-corner-radius(bottom, left, 15px)
+border-corner-radius(bottom, right, 30px)
pythonic(read whitespace sensitive)
saves your fingers a lot of work.
#border-radius-combo {
-moz-border-radius-topleft: 40px;
-webkit-border-top-left-radius: 40px;
border-top-left-radius: 40px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 30px;
-webkit-border-bottom-right-radius: 30px;
border-bottom-right-radius: 30px;
}the generated CSS.
mixins to handle pretty much everything.
covers browser specifics for you.
secret sauce of SASS
has lot of mixins for CSS3 mainly.
Other SASS libraries
Susy - semantic grid framework
Bourbon - lightweight mixin library
Omega 4
the swiss army knife in your toolset.
fits the bill for most cases.
works with panels.
demo time
live reload
WARNING: disable it in production
consistent structure
avoiding "Divitis"
tweak your tpls to generate minimal markup.
Use the fences module
Lean markup, easily maintainable.
Lesser data to send across the wire.
keeps your markup lean and clean
Automating frontend testing
Headless browsers
can be wired with your CI pipeline.
Feature: Website layout test
As a user I want visual consistency on the http://csste.st/ website
Scenario: Content layout
Given I visit "http://csste.st/"
Then "section > p" should have "color" of "rgb(68, 68, 68)"
good for testing UI specs
Cucumber syntax
Use CSSlint to detect smelly CSS.
demo time
...and the themer lived happily ever after.
Takeaways
Always "Drupalize" DOM which you have themed
... not the other way round.
Use a base theme.
Keep your code clean.
Automate frontend testing.
questions?
Image Credits
- https://www.flickr.com/photos/qilin/2941754858, headless browser testing
- https://www.flickr.com/photos/jurvetson/1484545713, demo time
- https://www.flickr.com/photos/zaphodsotherhead/171968829, palette
- https://www.flickr.com/photos/miikka_skaffari/2689289411, pulley
- https://www.flickr.com/photos/emmandevin/2784740485, panel
- https://www.flickr.com/photos/kodomut/3699877372, clean code
- https://www.flickr.com/photos/jkbrooks85/9682518534, clean views
- https://www.flickr.com/photos/restlessglobetrotter/2638242303/, tangled
- https://www.flickr.com/photos/siberianluck/3390447173, swiss knife
- https://www.flickr.com/photos/kwl/4700247712/, takeaways
- https://www.flickr.com/photos/pasukaru76/5405319722, title
- https://www.flickr.com/photos/bfishadow/3634875004, happy themer
- https://www.flickr.com/photos/bfishadow/3634061465/, consistent
- https://www.flickr.com/photos/mybeautifularpeggio/3701560655/, sleepy
- https://www.flickr.com/photos/eirikref/413592672/, live reload
- https://www.flickr.com/photos/npj/3017216040, stuff
- https://www.flickr.com/photos/49889874@N05/6156137154, fences
- https://www.flickr.com/photos/rueful/5645918352/, clockwork
- https://www.flickr.com/photos/banyan_tree/2834327514, rosetta
- https://www.flickr.com/photos/whatleydude/5743954531/, base
- https://www.flickr.com/photos/mt_hood_territory/8406159497, arrange
- https://www.flickr.com/photos/mulad/3354588290, prototype
THE END
by @lakshminp and @saket_kmr
