Your Ad Here

advanced code snippet search

Posted By

nerdfiles on 10/25/10


Tagged

css grid


Versions (?)

Dress'd CSS Grid System/Framework

 / Published in: CSS
 

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

Expand | Embed | Plain Text 
  1. /* ======= Define: Column Layout ======= */
  2.  
  3.     body { min-width: 960px; }
  4.  
  5.     .column-layout { 
  6.         width: 960px; 
  7.         margin-left: auto; 
  8.         margin-right: auto; }
  9.  
  10.  
  11. /* ======= Define: Columns ======= */
  12.  
  13.     .column-layout .columns-1,
  14.     .column-layout .columns-2,
  15.     .column-layout .columns-3,
  16.     .column-layout .columns-4,
  17.     .column-layout .columns-5,
  18.     .column-layout .columns-6,
  19.     .column-layout .columns-7,
  20.     .column-layout .columns-8,
  21.     .column-layout .columns-9,
  22.     .column-layout .columns-10,
  23.     .column-layout .columns-11,
  24.     .column-layout .columns-12,
  25.     .column-layout .columns-13,
  26.     .column-layout .columns-14,
  27.     .column-layout .columns-15,
  28.     .column-layout .columns-16 { 
  29.         display: inline; 
  30.         float: left;
  31.         margin-left: 10px;
  32.         margin-right: 10px; }
  33.  
  34.  
  35. /* ======= Define: Column Widths ======= */
  36.  
  37.     .column-layout .columns-1 { width: 40px; }
  38.     .column-layout .columns-2 { width: 100px; }
  39.     .column-layout .columns-3 { width: 160px; }
  40.     .column-layout .columns-4 { width: 220px; }
  41.     .column-layout .columns-5 { width: 280px; }
  42.     .column-layout .columns-6 { width: 340px; }
  43.     .column-layout .columns-7 { width: 400px; }
  44.     .column-layout .columns-8 { width: 460px; }
  45.     .column-layout .columns-9 { width: 520px; }
  46.     .column-layout .columns-10 { width: 580px; }
  47.     .column-layout .columns-11 { width: 640px; }
  48.     .column-layout .columns-12 { width: 700px; }
  49.     .column-layout .columns-13 { width: 760px; }
  50.     .column-layout .columns-14 { width: 820px; }
  51.     .column-layout .columns-15 { width: 880px; }
  52.     .column-layout .columns-16 { width: 940px; }
  53.  
  54.  
  55. /* ======= Bulwarking Forms (.bulwark-1, .bulwark-2, and so on...) ======= */
  56.  
  57.     .column-layout .bulwark-1 input.bulwark-1-columns-1 { width: 35px; }
  58.     .column-layout .bulwark-1 input.bulwark-1-columns-2 { width: 95px; }
  59.     .column-layout .bulwark-1 input.bulwark-1-columns-3 { width: 155px; }
  60.     .column-layout .bulwark-1 input.bulwark-1-columns-4 { width: 215px; }
  61.     .column-layout .bulwark-1 input.bulwark-1-columns-5 { width: 275px; }
  62.     .column-layout .bulwark-1 input.bulwark-1-columns-6 { width: 335px; }
  63.     .column-layout .bulwark-1 input.bulwark-1-columns-7 { width: 395px; }
  64.     .column-layout .bulwark-1 input.bulwark-1-columns-8 { width: 455px; }
  65.     .column-layout .bulwark-1 input.bulwark-1-columns-9 { width: 515px; }
  66.     .column-layout .bulwark-1 input.bulwark-1-columns-10 { width: 575px; }
  67.     .column-layout .bulwark-1 input.bulwark-1-columns-11 { width: 635px; }
  68.     .column-layout .bulwark-1 input.bulwark-1-columns-12 { width: 695px; }
  69.     .column-layout .bulwark-1 input.bulwark-1-columns-13 { width: 755px; }
  70.     .column-layout .bulwark-1 input.bulwark-1-columns-14 { width: 815px; }
  71.     .column-layout .bulwark-1 input.bulwark-1-columns-15 { width: 875px; }
  72.     .column-layout .bulwark-1 input.bulwark-1-columns-16 { width: 935px; }
  73.  
  74.     .column-layout .bulwark-1 input.bulwark-1-columns-1-style-1 { width: 23px; }
  75.     .column-layout .bulwark-1 input.bulwark-1-columns-2-style-1 { width: 83px; }
  76.     .column-layout .bulwark-1 input.bulwark-1-columns-3-style-1 { width: 143px; }
  77.     .column-layout .bulwark-1 input.bulwark-1-columns-4-style-1 { width: 203px; }
  78.     .column-layout .bulwark-1 input.bulwark-1-columns-5-style-1 { width: 263px; }
  79.     .column-layout .bulwark-1 input.bulwark-1-columns-6-style-1 { width: 323px; }
  80.     .column-layout .bulwark-1 input.bulwark-1-columns-7-style-1 { width: 383px; }
  81.     .column-layout .bulwark-1 input.bulwark-1-columns-8-style-1 { width: 443px; }
  82.     .column-layout .bulwark-1 input.bulwark-1-columns-9-style-1 { width: 503px; }
  83.     .column-layout .bulwark-1 input.bulwark-1-columns-10-style-1 { width: 563px; }
  84.     .column-layout .bulwark-1 input.bulwark-1-columns-11-style-1 { width: 623px; }
  85.     .column-layout .bulwark-1 input.bulwark-1-columns-12-style-1 { width: 683px; }
  86.     .column-layout .bulwark-1 input.bulwark-1-columns-13-style-1 { width: 743px; }
  87.     .column-layout .bulwark-1 input.bulwark-1-columns-14-style-1 { width: 803px; }
  88.     .column-layout .bulwark-1 input.bulwark-1-columns-15-style-1 { width: 863px; }
  89.     .column-layout .bulwark-1 input.bulwark-1-columns-16-style-1 { width: 923px; }
  90.  
  91.  
  92. /* ======= Define: Form Field Widths (input.columns-1-style-1, input.columns-1-style-2, and so on...) ======= */
  93.  
  94.     .column-layout input.columns-1-style-1 { width: 28px; }
  95.     .column-layout input.columns-2-style-1 { width: 88px; }
  96.     .column-layout input.columns-3-style-1 { width: 148px; }
  97.     .column-layout input.columns-4-style-1 { width: 208px; }
  98.     .column-layout input.columns-5-style-1 { width: 268px; }
  99.     .column-layout input.columns-6-style-1 { width: 328px; }
  100.     .column-layout input.columns-7-style-1 { width: 388px; }
  101.     .column-layout input.columns-8-style-1 { width: 448px; }
  102.     .column-layout input.columns-9-style-1 { width: 508px; }
  103.     .column-layout input.columns-10-style-1 { width: 568px; }
  104.     .column-layout input.columns-11-style-1 { width: 628px; }
  105.     .column-layout input.columns-12-style-1 { width: 688px; }
  106.     .column-layout input.columns-13-style-1 { width: 748px; }
  107.     .column-layout input.columns-14-style-1 { width: 808px; }
  108.     .column-layout input.columns-15-style-1 { width: 868px; }
  109.     .column-layout input.columns-16-style-1 { width: 928px; }
  110.  
  111.  
  112. /* ======= Define: Form Field Vertical Position ======= */
  113.  
  114.     .column-layout label.columns-1 { position: relative; top: -4px; }
  115.     .column-layout label.columns-2 { position: relative; top: -4px; }
  116.     .column-layout label.columns-3 { position: relative; top: -4px; }
  117.     .column-layout label.columns-4 { position: relative; top: -4px; }
  118.     .column-layout label.columns-5 { position: relative; top: -4px; }
  119.     .column-layout label.columns-6 { position: relative; top: -4px; }
  120.     .column-layout label.columns-7 { position: relative; top: -4px; }
  121.     .column-layout label.columns-8 { position: relative; top: -4px; }
  122.     .column-layout label.columns-9 { position: relative; top: -4px; }
  123.     .column-layout label.columns-10 { position: relative; top: -4px; }
  124.     .column-layout label.columns-11 { position: relative; top: -4px; }
  125.     .column-layout label.columns-12 { position: relative; top: -4px; }
  126.     .column-layout label.columns-13 { position: relative; top: -4px; }
  127.     .column-layout label.columns-14 { position: relative; top: -4px; }
  128.     .column-layout label.columns-15 { position: relative; top: -4px; }
  129.     .column-layout label.columns-16 { position: relative; top: -4px; }
  130.  
  131.     .column-layout dt label.columns-1 { position: relative; top: 4px; }
  132.     .column-layout dt label.columns-2 { position: relative; top: 4px; }
  133.     .column-layout dt label.columns-3 { position: relative; top: 4px; }
  134.     .column-layout dt label.columns-4 { position: relative; top: 4px; }
  135.     .column-layout dt label.columns-5 { position: relative; top: 4px; }
  136.     .column-layout dt label.columns-6 { position: relative; top: 4px; }
  137.     .column-layout dt label.columns-7 { position: relative; top: 4px; }
  138.     .column-layout dt label.columns-8 { position: relative; top: 4px; }
  139.     .column-layout dt label.columns-9 { position: relative; top: 4px; }
  140.     .column-layout dt label.columns-10 { position: relative; top: 4px; }
  141.     .column-layout dt label.columns-11 { position: relative; top: 4px; }
  142.     .column-layout dt label.columns-12 { position: relative; top: 4px; }
  143.     .column-layout dt label.columns-13 { position: relative; top: 4px; }
  144.     .column-layout dt label.columns-14 { position: relative; top: 4px; }
  145.     .column-layout dt label.columns-15 { position: relative; top: 4px; }
  146.     .column-layout dt label.columns-16 { position: relative; top: 4px; }
  147.  
  148.  
  149. /* ======= Horizontal Controls (Macro-Level) ======= */
  150.  
  151.     /* Haul and Propel */
  152.  
  153.     .haul-1, .propel-1,
  154.     .haul-2, .propel-2
  155.     .haul-3, .propel-3,
  156.     .haul-4, .propel-4,
  157.     .haul-5, .propel-5,
  158.     .haul-6, .propel-6,
  159.     .haul-7, .propel-7,
  160.     .haul-8, .propel-8,
  161.     .haul-9, .propel-9,
  162.     .haul-10, .propel-10,
  163.     .haul-11, .propel-11,
  164.     .haul-12, .propel-12,
  165.     .haul-13, .propel-13,
  166.     .haul-14, .propel-14,
  167.     .haul-15, .propel-15, { position: relative; }
  168.  
  169.     /* Column - Haul (Above Flow) */
  170.  
  171.     .haul-1 { left: -60px; }
  172.     .haul-2 { left: -120px; }
  173.     .haul-3 { left: -180px; }
  174.     .haul-4 { left: -240px; }
  175.     .haul-5 { left: -300px; }
  176.     .haul-6 { left: -360px; }
  177.     .haul-7 { left: -420px; }
  178.     .haul-8 { left: -480px; }
  179.     .haul-9 { left: -540px; }
  180.     .haul-10 { left: -600px; }
  181.     .haul-11 { left: -660px; }
  182.     .haul-12 { left: -720px; }
  183.     .haul-13 { left: -780px; }
  184.     .haul-14 { left: -840px; }
  185.     .haul-15 { left: -900px; }
  186.  
  187.     /* Column - Propel (Above Flow) */
  188.  
  189.     .propel-1 { left: 60px; }
  190.     .propel-2 { left: 120px; }
  191.     .propel-3 { left: 180px; }
  192.     .propel-4 { left: 240px; }
  193.     .propel-5 { left: 300px; }
  194.     .propel-6 { left: 360px; }
  195.     .propel-7 { left: 420px; }
  196.     .propel-8 { left: 480px; }
  197.     .propel-9 { left: 540px; }
  198.     .propel-10 { left: 600px; }
  199.     .propel-11 { left: 660px; }
  200.     .propel-12 { left: 720px; }
  201.     .propel-13 { left: 780px; }
  202.     .propel-14 { left: 840px; }
  203.     .propel-15 { left: 900px; }
  204.  
  205. 	/* Column - Prepend (In Flow) */
  206.  
  207.     .prepend-1 { padding-left: 60px; }
  208.     .prepend-2 { padding-left: 120px; }
  209.     .prepend-3 { padding-left: 180px; }
  210.     .prepend-4 { padding-left: 240px; }
  211.     .prepend-5 { padding-left: 300px; }
  212.     .prepend-6 { padding-left: 360px; }
  213.     .prepend-7 { padding-left: 420px; }
  214.     .prepend-8 { padding-left: 480px; }
  215.     .prepend-9 { padding-left: 540px; }
  216.     .prepend-10 { padding-left: 600px; }
  217.     .prepend-11 { padding-left: 660px; }
  218.     .prepend-12 { padding-left: 720px; }
  219.     .prepend-13 { padding-left: 780px; }
  220.     .prepend-14 { padding-left: 840px; }
  221.     .prepend-15 { padding-left: 900px; }
  222.  
  223. 	/* Column - Append (In Flow) */
  224.  
  225.     .append-1 { padding-right: 60px; }
  226.     .append-2 { padding-right: 120px; }
  227.     .append-3 { padding-right: 180px; }
  228.     .append-4 { padding-right: 240px; }
  229.     .append-5 { padding-right: 300px; }
  230.     .append-6 { padding-right: 360px; }
  231.     .append-7 { padding-right: 420px; }
  232.     .append-8 { padding-right: 480px; }
  233.     .append-9 { padding-right: 540px; }
  234.     .append-10 { padding-right: 600px; }
  235.     .append-11 { padding-right: 660px; }
  236.     .append-12 { padding-right: 720px; }
  237.     .append-13 { padding-right: 780px; }
  238.     .append-14 { padding-right: 840px; }
  239.     .append-15 { padding-right: 900px; }
  240.  
  241. 	/* Column - Push - Pushing a Sibling (In Flow) */
  242.  
  243.     .push-1 { margin-right: 90px; }
  244.     .push-2 { margin-right: 170px; }
  245.     .push-3 { margin-right: 250px; }
  246.     .push-4 { margin-right: 330px; }
  247.     .push-5 { margin-right: 410px; }
  248.     .push-6 { margin-right: 490px; }
  249.     .push-7 { margin-right: 570px; }
  250.     .push-8 { margin-right: 650px; }
  251.     .push-9 { margin-right: 730px; }
  252.     .push-10 { margin-right: 810px; }
  253.  
  254. 	/* Column - Pull - Pulling a Sibling (In Flow) */
  255.  
  256.     .pull-1 { margin-right: -90px; }
  257.     .pull-2 { margin-right: -170px; }
  258.     .pull-3 { margin-right: -250px; }
  259.     .pull-4 { margin-right: -330px; }
  260.     .pull-5 { margin-right: -410px; }
  261.     .pull-6 { margin-right: -490px; }
  262.     .pull-7 { margin-right: -570px; }
  263.     .pull-8 { margin-right: -650px; }
  264.     .pull-9 { margin-right: -730px; }
  265.     .pull-10 { margin-right: -810px; }
  266.  
  267.     /* Column - Jump - Jumping an Element (In Flow) */
  268.  
  269.     .jump-1 { margin-left: 90px; }
  270.     .jump-2 { margin-left: 170px; }
  271.     .jump-3 { margin-left: 250px; }
  272.     .jump-4 { margin-left: 330px; }
  273.     .jump-5 { margin-left: 410px; }
  274.     .jump-6 { margin-left: 490px; }
  275.     .jump-7 { margin-left: 570px; }
  276.     .jump-8 { margin-left: 650px; }
  277.     .jump-9 { margin-left: 730px; }
  278.     .jump-10 { margin-left: 810px; }
  279.  
  280.     /* Column - Withdraw - Withdrawing an Element (In Flow) */
  281.  
  282.     .withdraw-1 { margin-left: -90px; }
  283.     .withdraw-2 { margin-left: -170px; }
  284.     .withdraw-3 { margin-left: -250px; }
  285.     .withdraw-4 { margin-left: -330px; }
  286.     .withdraw-5 { margin-left: -410px; }
  287.     .withdraw-6 { margin-left: -490px; }
  288.     .withdraw-7 { margin-left: -570px; }
  289.     .withdraw-8 { margin-left: -650px; }
  290.     .withdraw-9 { margin-left: -730px; }
  291.     .withdraw-10 { margin-left: -810px; }
  292.  
  293.  
  294. /* ======= Define: Beginning/Ending Columns ======= */
  295.  
  296.     .column-layout .begin { margin-left: 0 !important; }
  297.     .column-layout .end { margin-right: 0 !important; }

Report this snippet  

You need to login to post a comment.