Hone your frontend chops – SASS intermezzo

View Github Repository Open presentation in a new window

badri

See all presentation from badri

Hone your frontend chops – SASS intermezzo

1 0

frontend-chops

Hone your frontend chops, presented @ Drupalcamp Pune 2014.

On Github badri / frontend-chops

Hone your frontend chops

Or: Agile manifesto for frontend devs

Heads Up

assuming you know a thing or two about themeing.

themeing pain points

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

How does a themer function in an agile setup?

ever changing specifications

rapid prototyping

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

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 past

architectural 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.

Compass

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

Hardy

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

THE END

by @lakshminp and @saket_kmr