Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

A better future with KSS

A better future with KSS

Kyle Neath

May 16, 2012
Tweet

More Decks by Kyle Neath

Other Decks in Technology

Transcript

  1. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  2. /** * Homepage Style * * Standard Layout (all parts)

    for Big Little Homepage * * This style has been designed by Mina Margin. It reflects * the composition of colors through the years of the * customers project as well as the boldness it implies. * * @project Big Little Homepage * @version 0.2.8 * @package xhtml-css * @author Mina Margin * @copyright 2008 by the author * @cssdoc version 1.0-pre * @license GPL v3 * * @colordef #fff; white * @colordef #808080; standard grey */
  3. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  4. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  5. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  6. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you've already given a star. // .stars-given:hover - Subtle hover highlight on top of stars-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } }
  7. // A button suitable for giving stars to someone. //

    // :hover - Subtle hover highlight. // .stars-given - A highlight indicating you'v // .stars-given:hover - Subtle hover highlight on to // .disabled - Dims the button to indicate // Part 1 of 3 THE DESCRIPTION SECTION
  8. // :hover - Subtle hover highlight. // .stars-given - A

    highlight indicating you'v // .stars-given:hover - Subtle hover highlight on to // .disabled - Dims the button to indicate // // Styleguide 2.1.3. a.button.star{ Part 2 of 3 THE MODIFIERS SECTION
  9. We have some amazing tools CSSEdit/Espresso SMACSS LESS SASS/SCSS Firebug

    / web inspector OOCS BOOTSTRAP BLUEPRINT compass stylus