Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State-based Design

snookca
September 21, 2012

State-based Design

A look at what it means to create CSS using a state-based approach.

snookca

September 21, 2012
Tweet

More Decks by snookca

Other Decks in Programming

Transcript

  1. .layout_1_2 #blogList .pageitem .statusBar {} .layout_1_2 #blogList .pageitem .statusBar .status,

    #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
  2. .block { display:block !important; } .inline { display:inline !important; }

    .hide { display:none !important; } .s-none { margin:0 !important; } .s { margin:10px !important; } .ss { margin:20px !important; } .sr { margin-right:10px !important; } .p-none { padding:0 !important; } .p { padding:10px !important; } .pp { padding:20px !important; } .pt { padding-top:10px !important; } .w-auto { width:auto !important; }
  3. html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;

    } body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
  4. .btn[data-state=default] { color: #333; } .btn[data-state=pressed] { color: #000; }

    .btn[data-state=disabled] { opacity: .5; pointer-events: none; } <!-- HTML --> <button class="btn" data- state="disabled">Disabled</button>
  5. // bind a click handler to each button $(".btn").on("click", function(){

    // change the state to pressed $(this).attr('data-state', 'pressed'); });
  6. /* default state for nav items */ .nav > li

    { float: none; } /* alternate state for nav items on larger screens */ @media screen and (min-width: 400px) { .nav > li { float: left; } }
  7. /* default layout */ .l-content { float: left; width: 75%;

    } .l-sidebar { float: right; width: 25%; } /* alternate state for layout on small screens */ @media screen and (max-width: 400px) { .l-content, .l-sidebar { float: none; width: auto; } }
  8. .enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:

    button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;
  9. .enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:

    button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;