Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

CSS and Other Cool Stuff

Ricardo Vazquez
February 06, 2013

CSS and Other Cool Stuff

Taking a look at becoming a better Front-End Designer with the power of Modular CSS and CSS Preprocessors. Bringing in UI Design Principles to drive the point home that, at heart, we are all designers.

Ricardo Vazquez

February 06, 2013
Tweet

More Decks by Ricardo Vazquez

Other Decks in Design

Transcript

  1. S e p a r a t e your CSS,

    or I’m coming after you.
  2. Sass is an extension of CSS3 which adds nested rules,

    variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
  3. A computer program that modifies data to conform with the

    input requirements of another program.
  4. .photo-details display: none &.active display: block h4 color: $blue font-size:

    14px font-family: $helvetica font-weight: bold text-transform: uppercase .select width: 236px
  5. .sidebar-box margin: 0 0 10px 0 background: $bg padding: 10px

    .sidebar-auth-box @extend .sidebar-box input[type=text] padding: 10px border: 1px solid #ccc
  6. Still, we shouldn’t be spending our time writing mixins and

    extending all over the place. There’s gotta be something better.
  7. Sass is an extension of CSS3 which adds nested rules,

    variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
  8. Our vision is optimized to see structure Know your user

    State visualization Focus Help User testing Aesthetics