advanced code snippet search

Posted By

nerdfiles on 07/17/10


Tagged

css system grid


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

LeeRJohnson
wirenaught


Getting Dressed Grid System

 / Published in: CSS
 

URL: http://nerdfiles.net/gdgs/

Eric Meyer Reset, other stuff I have picked up. Roughly based on 960.gs/Blueprint in naming and methods. Note: If you still give a shit about IE6: http://code.google.com/p/ie7-js/\r\n\r\n\r\n(8/25/2010) Note: Doing some serious re-work on this, fleshing it out to be more of a Framework for rapid web application development.

Expand | Embed | Plain Text 
  1. /*
  2. @author:	Aaron Alexander
  3. @author_uri:	http://nerdfiles.net/
  4. @lastmod:	07-16-2010 @ 14:25
  5. */
  6.  
  7. /* ======= Modified Eric Meyer's Reset Reloaded (See: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) ======= */
  8.  
  9.     html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; }
  10.     :focus { outline: 0; }
  11.     ol, ul { list-style: none; }
  12.     table { table-layout: fixed; border-collapse: separate; border-spacing: 0; empty-cells: show; }
  13.     caption, th, td { text-align: left; font-weight: normal; }
  14.     blockquote:before, blockquote:after, q:before, q:after { content: ""; }
  15.     blockquote, q { quotes: "" ""; }
  16.     hr { border: 0; border-top: 1px solid #999; background-color: #999; color: #999; height: 1px; margin: 1em 2em; clear: both; }	
  17.     html { height: 100%; overflow-y: scroll; }
  18.  
  19.  
  20. /* ======= Color Palette (See: http://colorschemedesigner.com/) ======= */
  21.  
  22. /*
  23. Primary:		
  24. Secondary:		
  25. Tertiary:		
  26. Color 1:		
  27. Color 2:		
  28. Color 3:		
  29. Color 4:		
  30. Color 5:		
  31. Anchor Fresh:		
  32. Anchor Visited:		
  33. Anchor Hover:		
  34. Anchor Active:		
  35. */
  36.  
  37.  
  38. /* ======= Font Embeds Template (See: http://www.font-face.com) ======= */
  39.  
  40.     @font-face {
  41.         font-family: 'Bergamo';
  42.         src:    url('bergamo/BergamoStd-Regular-webfont.eot');  /* IE6+ */
  43.         src:    local('?'), 
  44.                 url('bergamo/BergamoStd-Regular-webfont.woff') format('woff'),  /* FF3.6 */
  45.                 url('bergamo/BergamoStd-Regular-webfont.ttf') format('truetype'),
  46.                 url('bergamo/BergamoStd-Regular-webfont.svg#webfontwfBzOZwD') format('svg');  /* Saf3+,Chrome,FF3.5,Opera10+ */
  47.         font-weight: normal;
  48.         font-style: normal;
  49.     }
  50.  
  51.  
  52. /* ======= Typography (See: http://lamb.cc/typograph/, http://www.typechart.com/, http://www.awayback.com/revised-font-stack/) ======= */
  53.  
  54.     body { 
  55.         font: 0.8em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 
  56.         text-rendering: optimizeLegibility; }
  57.  
  58.     h1, h2, h3, h4, h5 { 
  59.         font-family: Bergamo; 
  60.         font-weight: normal; 
  61.         margin: 0.5em 0; }
  62.     h1 { font-size: 1.8em; }
  63.     h2 { font-size: 1.7em; }
  64.     h3 { font-size: 1.6em; }
  65.     h4 { font-size: 1.5em; }
  66.     h5 { font-size: 1.4em; }
  67.     h6 { font-size: 1.3em; font-weight: normal; line-height:2; }
  68.  
  69.     p { margin: 1em 0; }
  70.  
  71.  
  72. /* ======= Links ======= */
  73.  
  74.     a:link { }
  75.     a:visited { }
  76.     a:hover { }
  77.     a:focus { }
  78.     a:active { }
  79.  
  80.     a:link img { }
  81.     a:visited img { }
  82.     a:hover img { }
  83.     a:focus img { }
  84.     a:active img { }
  85.  
  86.  
  87. /* ======= Images (See: http://dummyimage.com/) ======= */
  88.  
  89.     img.align-right { 
  90.         float: right; 
  91.         margin: 0 0 0 1em; }
  92.     img.align-left { 
  93.         float: left; 
  94.         margin: 0 1em 0 0; }
  95.     img.align-center { 
  96.         display: block; 
  97.         margin: 0 auto; }
  98.  
  99.  
  100. /* ======= Floats ======= */
  101.  
  102.     .float-left { float: left; }
  103.     .float-right { float: right; }
  104.  
  105.  
  106. /* ======= Text Alignment ======= */
  107.  
  108.     .text-left { text-align: left; }
  109.     .text-right { text-align: right; }
  110.     .text-justify { text-align: justify; }
  111.  
  112.  
  113. /* ======= Utilities ======= */
  114.  
  115.     .show-grid { background: url(grid.gif) center repeat-y fixed; }
  116.     .bleach { display: none; }
  117.     .cloak { visibility: hidden; }
  118.     .uncloak { visibility: visible; }
  119.     .expose { outline: 2px #c30 solid; }	
  120.  
  121.  
  122. /* ======= Clearing ======= */
  123.  
  124.     .clear { clear: both; }
  125.     .clear-left { clear: left; }
  126.     .clear-right { clear: right; }
  127.  
  128.  
  129. /* ======= Columns and Containers ======= */
  130.  
  131.     .container-16 { 
  132.         width: 960px; 
  133.         margin: 0 auto; }
  134.     .columns-16, 
  135.     .columns-15, 
  136.     .columns-14,
  137.     .columns-13, 
  138.     .columns-12,
  139.     .columns-11,
  140.     .columns-10,
  141.     .columns-9,
  142.     .columns-8,
  143.     .columns-7,
  144.     .columns-6,
  145.     .columns-5,
  146.     .columns-4,
  147.     .columns-3,
  148.     .columns-2,
  149.     .columns-1 { 
  150.         /*
  151.         *zoom: 1; 
  152.         *display: inline;
  153.         */
  154.         float: left; 
  155.         margin: 0 10px; }
  156.  
  157.  
  158. /* ======= Default Widths ======= */
  159.  
  160.     .columns-16 { width: 940px; }
  161.     .columns-15 { width: 880px; }
  162.     .columns-14 { width: 820px; }
  163.     .columns-13 { width: 760px; }
  164.     .columns-12 { width: 700px; }
  165.     .columns-11 { width: 640px; }
  166.     .columns-10 { width: 580px; }
  167.     .columns-9 { width: 520px; }
  168.     .columns-8 { width: 460px; }
  169.     .columns-7 { width: 400px; }
  170.     .columns-6 { width: 340px; }
  171.     .columns-5 { width: 280px; }
  172.     .columns-4 { width: 220px; }
  173.     .columns-3 { width: 160px; }
  174.     .columns-2 { width: 100px; }
  175.     .columns-1 { width: 40px; }
  176.  
  177.  
  178. /* ======= Widths With Shoulder / Lining (gonna get messy) ======= */
  179.  
  180.     .lining-1 .columns-16[class~="start"],
  181.     .shoulder-1 .columns-16[class~="start"] { width: 930px; }
  182.     .lining-1 .columns-15[class~="start"],
  183.     .shoulder-1 .columns-15[class~="start"] { width: 870px; }
  184.     .lining-1 .columns-14[class~="start"],
  185.     .shoulder-1 .columns-14[class~="start"] { width: 810px; }
  186.     .lining-1 .columns-13[class~="start"],
  187.     .shoulder-1 .columns-13[class~="start"] { width: 750px; }
  188.     .lining-1 .columns-12[class~="start"],
  189.     .shoulder-1 .columns-12[class~="start"] { width: 690px; }
  190.     .lining-1 .columns-11[class~="start"],
  191.     .shoulder-1 .columns-11[class~="start"] { width: 630px; }
  192.     .lining-1 .columns-10[class~="start"],
  193.     .shoulder-1 .columns-10[class~="start"] { width: 570px; }
  194.     .lining-1 .columns-9[class~="start"],
  195.     .shoulder-1 .columns-9[class~="start"] { width: 510px; }
  196.     .lining-1 .columns-8[class~="start"],
  197.     .shoulder-1 .columns-8[class~="start"] { width: 450px; }
  198.     .lining-1 .columns-7[class~="start"],
  199.     .shoulder-1 .columns-7[class~="start"] { width: 390px; }
  200.     .lining-1 .columns-6[class~="start"],
  201.     .shoulder-1 .columns-6[class~="start"] { width: 330px; }
  202.     .lining-1 .columns-5[class~="start"],
  203.     .shoulder-1 .columns-5[class~="start"] { width: 270px; }
  204.     .lining-1 .columns-4[class~="start"],
  205.     .shoulder-1 .columns-4[class~="start"] { width: 210px; }
  206.     .lining-1 .columns-3[class~="start"],
  207.     .shoulder-1 .columns-3[class~="start"] { width: 150px; }
  208.     .lining-1 .columns-2[class~="start"],
  209.     .shoulder-1 .columns-2[class~="start"] { width: 90px; }
  210.     .lining-1 .columns-1[class~="start"],
  211.     .shoulder-1 .columns-1[class~="start"] { width: 30px; }
  212.  
  213.     .lining-1 .columns-16[class~="end"],
  214.     .shoulder-1 .columns-16[class~="end"] { width: 930px; }
  215.     .lining-1 .columns-15[class~="end"],
  216.     .shoulder-1 .columns-15[class~="end"] { width: 870px; }
  217.     .lining-1 .columns-14[class~="end"],
  218.     .shoulder-1 .columns-14[class~="end"] { width: 810px; }
  219.     .lining-1 .columns-13[class~="end"],
  220.     .shoulder-1 .columns-13[class~="end"] { width: 750px; }
  221.     .lining-1 .columns-12[class~="end"],
  222.     .shoulder-1 .columns-12[class~="end"] { width: 690px; }
  223.     .lining-1 .columns-11[class~="end"],
  224.     .shoulder-1 .columns-11[class~="end"] { width: 630px; }
  225.     .lining-1 .columns-10[class~="end"],
  226.     .shoulder-1 .columns-10[class~="end"] { width: 570px; }
  227.     .lining-1 .columns-9[class~="end"],
  228.     .shoulder-1 .columns-9[class~="end"] { width: 510px; }
  229.     .lining-1 .columns-8[class~="end"],
  230.     .shoulder-1 .columns-8[class~="end"] { width: 450px; }
  231.     .lining-1 .columns-7[class~="end"],
  232.     .shoulder-1 .columns-7[class~="end"] { width: 390px; }
  233.     .lining-1 .columns-6[class~="end"],
  234.     .shoulder-1 .columns-6[class~="end"] { width: 330px; }
  235.     .lining-1 .columns-5[class~="end"],
  236.     .shoulder-1 .columns-5[class~="end"] { width: 270px; }
  237.     .lining-1 .columns-4[class~="end"],
  238.     .shoulder-1 .columns-4[class~="end"] { width: 210px; }
  239.     .lining-1 .columns-3[class~="end"],
  240.     .shoulder-1 .columns-3[class~="end"] { width: 150px; }
  241.     .lining-1 .columns-2[class~="end"],
  242.     .shoulder-1 .columns-2[class~="end"] { width: 90px; }
  243.     .lining-1 .columns-1[class~="end"],
  244.     .shoulder-1 .columns-1[class~="end"] { width: 30px; }
  245.  
  246.     .lining-1 * .columns-16[class~="end"],
  247.     .shoulder-1 * .columns-16[class~="end"] { width: 940px; }
  248.     .lining-1 * .columns-15[class~="end"],
  249.     .shoulder-1 * .columns-15[class~="end"] { width: 880px; }
  250.     .lining-1 * .columns-14[class~="end"],
  251.     .shoulder-1 * .columns-14[class~="end"] { width: 820px; }
  252.     .lining-1 * .columns-13[class~="end"],
  253.     .shoulder-1 * .columns-13[class~="end"] { width: 760px; }
  254.     .lining-1 * .columns-12[class~="end"],
  255.     .shoulder-1 * .columns-12[class~="end"] { width: 700px; }
  256.     .lining-1 * .columns-11[class~="end"],
  257.     .shoulder-1 * .columns-11[class~="end"] { width: 640px; }
  258.     .lining-1 * .columns-10[class~="end"],
  259.     .shoulder-1 * .columns-10[class~="end"] { width: 580px; }
  260.     .lining-1 * .columns-9[class~="end"],
  261.     .shoulder-1 * .columns-9[class~="end"] { width: 520px; }
  262.     .lining-1 * .columns-8[class~="end"],
  263.     .shoulder-1 * .columns-8[class~="end"] { width: 460px; }
  264.     .lining-1 * .columns-7[class~="end"],
  265.     .shoulder-1 * .columns-7[class~="end"] { width: 400px; }
  266.     .lining-1 * .columns-6[class~="end"],
  267.     .shoulder-1 * .columns-6[class~="end"] { width: 340px; }
  268.     .lining-1 * .columns-5[class~="end"],
  269.     .shoulder-1 * .columns-5[class~="end"] { width: 280px; }
  270.     .lining-1 * .columns-4[class~="end"],
  271.     .shoulder-1 * .columns-4[class~="end"] { width: 220px; }
  272.     .lining-1 * .columns-3[class~="end"],
  273.     .shoulder-1 * .columns-3[class~="end"] { width: 160px; }
  274.     .lining-1 * .columns-2[class~="end"],
  275.     .shoulder-1 * .columns-2[class~="end"] { width: 100px; }
  276.     .lining-1 * .columns-1[class~="end"],
  277.     .shoulder-1 * .columns-1[class~="end"] { width: 40px; }
  278.  
  279. /* ======= Lining ======= */
  280.  
  281.     .lining-1 { padding: 10px; }
  282.     .lining-2 { padding: 20px; }
  283.     .lining-3 { padding: 30px; }
  284.     .lining-4 { padding: 40px; }
  285.     .lining-5 { padding: 50px; }
  286.     .lining-6 { padding: 60px; }
  287.  
  288.  
  289. /*  ======= Shoulder ======= */
  290.  
  291.     .shoulder-1 { padding: 0 10px; }
  292.     .shoulder-2 { padding: 0 20px; }
  293.     .shoulder-3 { padding: 0 30px; }
  294.     .shoulder-4 { padding: 0 40px; }
  295.     .shoulder-5 { padding: 0 50px; }
  296.     .shoulder-6 { padding: 0 60px; }
  297.  
  298. /**
  299.  * @todo
  300.  * Consider halving the increments on
  301.  * Linings and Shoulders; complete the
  302.  * increment to, say, .lining-10
  303.  **/
  304.  
  305.  
  306. /* ======= Head ======= */
  307.  
  308.     .head-1 { margin-top: 0.5em; }
  309.     .head-2 { margin-top: 1.0em; }
  310.     .head-3 { margin-top: 1.5em; }
  311.     .head-4 { margin-top: 2.0em; }
  312.     .head-5 { margin-top: 2.5em; }
  313.     .head-6 { margin-top: 3.0em; }
  314.  
  315.  
  316. /* ======= Foot ======= */
  317.  
  318.     .foot-1 { margin-bottom: 0.5em; }
  319.     .foot-2 { margin-bottom: 1.0em; }
  320.     .foot-3 { margin-bottom: 1.5em; }
  321.     .foot-4 { margin-bottom: 2.0em; }
  322.     .foot-5 { margin-bottom: 2.5em; }
  323.     .foot-6 { margin-bottom: 3.0em; }
  324.  
  325.  
  326. /* ======= Scarf ======= */
  327.  
  328.     .scarf-1 { padding-top: 0.5em; }
  329.     .scarf-2 { padding-top: 1.0em; }
  330.     .scarf-3 { padding-top: 1.5em; }
  331.     .scarf-4 { padding-top: 2.0em; }
  332.     .scarf-5 { padding-top: 2.5em; }
  333.     .scarf-6 { padding-top: 3.0em; }
  334.  
  335.  
  336. /* ======= Socks ======= */
  337.  
  338.     .socks-1 { padding-bottom: 0.5em; }
  339.     .socks-2 { padding-bottom: 1.0em; }
  340.     .socks-3 { padding-bottom: 1.5em; }
  341.     .socks-4 { padding-bottom: 2.0em; }
  342.     .socks-5 { padding-bottom: 2.5em; }
  343.     .socks-6 { padding-bottom: 3.0em; }
  344.  
  345.  
  346. /* ======= Prepend ======= */
  347.  
  348.     .prepend-1 { padding-left: 60px; }
  349.     .prepend-2 { padding-left: 120px; }
  350.     .prepend-3 { padding-left: 180px; }
  351.     .prepend-4 { padding-left: 240px; }
  352.     .prepend-5 { padding-left: 300px; }
  353.     .prepend-6 { padding-left: 360px; }
  354.     .prepend-7 { padding-left: 420px; }
  355.     .prepend-8 { padding-left: 480px; }
  356.     .prepend-9 { padding-left: 540px; }
  357.     .prepend-10 { padding-left: 600px; }
  358.  
  359.  
  360. /* ======= Append ======= */
  361.  
  362.     .append-1 { padding-right: 60px; }
  363.     .append-2 { padding-right: 120px; }
  364.     .append-3 { padding-right: 180px; }
  365.     .append-4 { padding-right: 240px; }
  366.     .append-5 { padding-right: 300px; }
  367.     .append-6 { padding-right: 360px; }
  368.     .append-7 { padding-right: 420px; }
  369.     .append-8 { padding-right: 480px; }
  370.     .append-9 { padding-right: 540px; }
  371.     .append-10 { padding-right: 600px; }
  372.  
  373.  
  374. /* ======= Push ======= */
  375.  
  376.     .push-1 { margin-left: 70px; }
  377.     .push-2 { margin-left: 130px; }
  378.     .push-3 { margin-left: 190px; }
  379.     .push-4 { margin-left: 250px; }
  380.     .push-5 { margin-left: 310px; }
  381.     .push-6 { margin-left: 370px; }
  382.     .push-7 { margin-left: 430px; }
  383.     .push-8 { margin-left: 490px; }
  384.     .push-9 { margin-left: 550px; }
  385.     .push-10 { margin-left: 610px; }
  386.  
  387.  
  388. /* ======= Pull ======= */
  389.  
  390.     .pull-1 { margin-left: -50px; }
  391.     .pull-2 { margin-left: -110px; }
  392.     .pull-3 { margin-left: -170px; }
  393.     .pull-4 { margin-left: -230px; }
  394.     .pull-5 { margin-left: -290px; }
  395.     .pull-6 { margin-left: -350px; }
  396.     .pull-7 { margin-left: -410px; }
  397.     .pull-8 { margin-left: -470px; }
  398.     .pull-9 { margin-left: -530px; }
  399.     .pull-10 { margin-left: -590px; }
  400.  
  401.  
  402. /* ======= Start/End ======= */
  403.  
  404.     .start { margin-left: 0; }
  405.     .end { margin-right: 0; }
  406.  
  407.  
  408. /* ======= Clearing - Semantic Solution 1 (See: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/) ======= */
  409.  
  410.     .clearfix:after { 
  411.         visibility: hidden; 
  412.         display: block; 
  413.         font-size: 0; 
  414.         content: " "; 
  415.         clear: both; 
  416.         height: 0; }
  417.     * html .clearfix { zoom: 1; }
  418.     *:first-child+html .clearfix { zoom: 1; }
  419.  
  420.  
  421. /* ======= Clearing - Semantic Solution 2 ======= */
  422.  
  423.     .seal { 
  424.         overflow: hidden; 
  425.         _overflow: visible; 
  426.         _height: 1%; }
  427.  
  428.  
  429. /* ======= Your CSS Goes Below ======= */

Report this snippet  

You need to login to post a comment.