Skip to content

Instantly share code, notes, and snippets.

@csswizardry

csswizardry/tagged.css

Created August 7, 2012 19:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save csswizardry/3288478 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save csswizardry/3288478 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csswizardry created this gist Aug 7, 2012.
    124 changes: 124 additions & 0 deletions tagged.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,124 @@
    /*------------------------------------*\
    $NAV
    \*------------------------------------*/
    /*
    TAGS: ^lists ^navigation ^text
    */
    /*
    As per csswizardry.com/2011/09/the-nav-abstraction
    */
    .nav{
    list-style:none;
    margin-left:0;
    }
    .nav > li,
    .nav > li > a{
    display:inline-block;
    *display:inline;
    zoom:1;
    }





    /*------------------------------------*\
    $MEDIA
    \*------------------------------------*/
    /*
    TAGS: ^images ^text ^layout ^structure
    */
    /*
    As per stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
    <div class=media>
    <img src= alt="" class=img>
    <div class=body>
    ...
    </div>
    </div>
    */
    .media{
    display:block;
    }
    .img{
    float:left;
    margin-right:1em;
    }

    /* Reversed image location (right instead of left). */
    .img-rev{
    float:right;
    margin-left:1em;
    }
    .img img{
    display:block;
    }
    .body{
    overflow:hidden;
    }
    .body > :last-child{
    margin-bottom:0;
    }





    /*------------------------------------*\
    $ISLAND
    \*------------------------------------*/
    /*
    TAGS: ^structure ^box ^padding ^square
    */
    /*
    As per csswizardry.com/2011/10/the-island-object
    */
    .island,
    .islet{
    display:block;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    }
    .island{
    padding:1em;
    }
    .island > :last-child,
    .islet > :last-child{
    margin-bottom:0;
    }

    /*
    For smaller areas of boxed off content use the `.islet` class, i.e.:
    <div class=islet></div>
    */
    .islet{
    padding:0.5em;
    }





    /*------------------------------------*\
    $SPRITES
    \*------------------------------------*/
    /*
    TAGS: ^images ^icons
    */
    /*
    Giving an element a class of `.s` will throw it into sprite mode.
    E.g. `<a class="s info">More info on this game&hellip;</a>`
    */
    .s{
    background-image:url(/path/to/sprite.png);
    display:inline-block;
    width:16px;
    height:16px;
    /* Hide text */
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    }