API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 23rd, 2018
571
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.91 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * Skeleton V1.1
  3. * Copyright 2011, Dave Gamache
  4. * www.getskeleton.com
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. * 8/17/2011
  8. */
  9.  
  10.  
  11. /* Table of Contents
  12. ==================================================
  13.     #Base 960 Grid
  14.     #Tablet (Portrait)
  15.     #Mobile (Portrait)
  16.     #Mobile (Landscape)
  17.     #Clearing */
  18.  
  19.  
  20.  
  21. /* #Base 960 Grid
  22. ================================================== */
  23.  
  24.     .container_12{ position: relative; width: 960px; margin: 0 auto; padding: 0; }
  25.     .grid_1,
  26.     .grid_2,
  27.     .grid_3,
  28.     .grid_4,
  29.     .grid_5,
  30.     .grid_6,
  31.     .grid_7,
  32.     .grid_8,
  33.     .grid_9,
  34.     .grid_10,
  35.     .grid_11,
  36.     .grid_12
  37.     { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
  38.  
  39.     /* Nested Column Classes */
  40.      .container_12 .alpha               { margin-left: 0; }
  41.      .container_12 .omega               { margin-right: 0; }
  42.  
  43.     /* Base Grid */
  44.     .container_12 .grid_1           { width: 60px;  }
  45.     .container_12 .grid_2           { width: 140px; }
  46.     .container_12 .grid_3           { width: 220px; }
  47.     .container_12 .grid_4           { width: 300px; }
  48.     .container_12 .grid_5           { width: 380px; }
  49.     .container_12 .grid_6           { width: 460px; }
  50.     .container_12 .grid_7           { width: 540px; }
  51.     .container_12 .grid_8           { width: 620px; }
  52.     .container_12 .grid_9           { width: 700px; }
  53.     .container_12 .grid_10          { width: 780px; }
  54.     .container_12 .grid_11          { width: 860px; }
  55.     .container_12 .grid_12          { width: 940px; }
  56.     /* Prefix Extra Space >> 12 Columns */
  57.     .container_12 .prefix_1         {padding-left:80px;}
  58.     .container_12 .prefix_2         {padding-left:160px;}
  59.     .container_12 .prefix_3         {padding-left:240px;}
  60.     .container_12 .prefix_4         {padding-left:320px;}
  61.     .container_12 .prefix_5         {padding-left:400px;}
  62.     .container_12 .prefix_6         {padding-left:480px;}
  63.     .container_12 .prefix_7         {padding-left:560px;}
  64.     .container_12 .prefix_8         {padding-left:640px;}
  65.     .container_12 .prefix_9         {padding-left:720px;}
  66.     .container_12 .prefix_10        {padding-left:800px;}
  67.     .container_12 .prefix_11        {padding-left:880px;}
  68.     /* Suffix Extra Space >> 12 Columns */
  69.     .container_12 .suffix_1         {padding-right:80px;}
  70.     .container_12 .suffix_2         {padding-right:160px;}
  71.     .container_12 .suffix_3         {padding-right:240px;}
  72.     .container_12 .suffix_4         {padding-right:320px;}
  73.     .container_12 .suffix_5         {padding-right:400px;}
  74.     .container_12 .suffix_6         {padding-right:480px;}
  75.     .container_12 .suffix_7         {padding-right:560px;}
  76.     .container_12 .suffix_8         {padding-right:640px;}
  77.     .container_12 .suffix_9         {padding-right:720px;}
  78.     .container_12 .suffix_10        {padding-right:800px;}
  79.     .container_12 .suffix_11        {padding-right:880px;}
  80.  
  81. /* #Tablet (Portrait)
  82. ================================================== */
  83.  
  84.     /* Note: Design for a width of 768px */
  85.  
  86.     @media only screen and (min-width: 768px) and (max-width: 995px) {
  87.         .container_12                                  { width: 768px; }
  88.         .grid_1,
  89.         .grid_2,
  90.         .grid_3,
  91.         .grid_4,
  92.         .grid_5,
  93.         .grid_6,
  94.         .grid_7,
  95.         .grid_8,
  96.         .grid_9,
  97.         .grid_10,
  98.         .grid_11,
  99.         .grid_12
  100.         { margin-left: 10px; margin-right: 10px;  }
  101.          .container_12 .alpha               { margin-left: 0;}
  102.          .container_12 .omega               { margin-right: 0;}
  103.  
  104.         .container_12 .grid_1           { width: 44px; }
  105.         .container_12 .grid_2           { width: 108px; }
  106.         .container_12 .grid_3           { width: 172px; }
  107.         .container_12 .grid_4           { width: 236px; }
  108.         .container_12 .grid_5           { width: 300px; }
  109.         .container_12 .grid_6           { width: 364px; }
  110.         .container_12 .grid_7           { width: 428px; }
  111.         .container_12 .grid_8           { width: 492px; }
  112.         .container_12 .grid_9           { width: 556px; }
  113.         .container_12 .grid_10          { width: 620px; }
  114.         .container_12 .grid_11          { width: 684px; }
  115.         .container_12 .grid_12          { width: 748px; }
  116.         /* Prefix Extra Space >> 12 Columns */
  117.         .container_12 .prefix_1         {padding-left:64px;}
  118.         .container_12 .prefix_2         {padding-left:128px;}
  119.         .container_12 .prefix_3         {padding-left:192px;}
  120.         .container_12 .prefix_4         {padding-left:256px;}
  121.         .container_12 .prefix_5         {padding-left:320px;}
  122.         .container_12 .prefix_6         {padding-left:384px;}
  123.         .container_12 .prefix_7         {padding-left:448px;}
  124.         .container_12 .prefix_8         {padding-left:512px;}
  125.         .container_12 .prefix_9         {padding-left:576px;}
  126.         .container_12 .prefix_10        {padding-left:640px;}
  127.         .container_12 .prefix_11        {padding-left:768px;}
  128.         /* Suffix Extra Space >> 12 Columns */
  129.         .container_12 .suffix_1         {padding-right:64px;}
  130.         .container_12 .suffix_2         {padding-right:128px;}
  131.         .container_12 .suffix_3         {padding-right:192px;}
  132.         .container_12 .suffix_4         {padding-right:256px;}
  133.         .container_12 .suffix_5         {padding-right:320px;}
  134.         .container_12 .suffix_6         {padding-right:384px;}
  135.         .container_12 .suffix_7         {padding-right:448px;}
  136.         .container_12 .suffix_8         {padding-right:512px;}
  137.         .container_12 .suffix_9         {padding-right:576px;}
  138.         .container_12 .suffix_10        {padding-right:640px;}
  139.         .container_12 .suffix_11        {padding-right:768px;}
  140.     }
  141.  
  142.  
  143. /*  #Mobile (Portrait)
  144. ================================================== */
  145.  
  146.     /* Note: Design for a width of 320px */
  147.  
  148.     @media only screen and (max-width: 767px) {
  149.         .container_12{width: 300px;}
  150.         .grid_1,
  151.         .grid_2,
  152.         .grid_3,
  153.         .grid_4,
  154.         .grid_5,
  155.         .grid_6,
  156.         .grid_7,
  157.         .grid_8,
  158.         .grid_9,
  159.         .grid_10,
  160.         .grid_11,
  161.         .grid_12{margin: 0;}
  162.  
  163.         .container_12 .grid_1,
  164.         .container_12 .grid_2,
  165.         .container_12 .grid_3,
  166.         .container_12 .grid_4,
  167.         .container_12 .grid_5,
  168.         .container_12 .grid_6,
  169.         .container_12 .grid_7,
  170.         .container_12 .grid_8,
  171.         .container_12 .grid_9,
  172.         .container_12 .grid_10,
  173.         .container_12 .grid_11,
  174.         .container_12 .grid_12{width: 300px;}
  175.         /* Prefix Extra Space >> 12 Columns */
  176.         .container_12 .prefix_1,
  177.         .container_12 .prefix_2,
  178.         .container_12 .prefix_3,
  179.         .container_12 .prefix_4,
  180.         .container_12 .prefix_5,
  181.         .container_12 .prefix_6,
  182.         .container_12 .prefix_7,
  183.         .container_12 .prefix_8,
  184.         .container_12 .prefix_9,
  185.         .container_12 .prefix_10,
  186.         .container_12 .prefix_11{padding-left:0;}
  187.         /* Suffix Extra Space >> 12 Columns */
  188.         .container_12 .suffix_1,
  189.         .container_12 .suffix_2,
  190.         .container_12 .suffix_3,
  191.         .container_12 .suffix_4,
  192.         .container_12 .suffix_5,
  193.         .container_12 .suffix_6,
  194.         .container_12 .suffix_7,
  195.         .container_12 .suffix_8,
  196.         .container_12 .suffix_9,
  197.         .container_12 .suffix_10,
  198.         .container_12 .suffix_11{padding-right:0;}
  199.     }
  200.  
  201.  
  202. /* #Mobile (Landscape)
  203. ================================================== */
  204.  
  205.     /* Note: Design for a width of 480px */
  206.  
  207.     @media only screen and (min-width: 480px) and (max-width: 767px) {
  208.         .container_12 { width: 420px; }
  209.         .grid_1,
  210.         .grid_2,
  211.         .grid_3,
  212.         .grid_4,
  213.         .grid_5,
  214.         .grid_6,
  215.         .grid_7,
  216.         .grid_8,
  217.         .grid_9,
  218.         .grid_10,
  219.         .grid_11,
  220.         .grid_12{margin: 0;}
  221.  
  222.         .container_12 .grid_1,
  223.         .container_12 .grid_2,
  224.         .container_12 .grid_3,
  225.         .container_12 .grid_4,
  226.         .container_12 .grid_5,
  227.         .container_12 .grid_6,
  228.         .container_12 .grid_7,
  229.         .container_12 .grid_8,
  230.         .container_12 .grid_9,
  231.         .container_12 .grid_10,
  232.         .container_12 .grid_11,
  233.         .container_12 .grid_12{width: 420px;}
  234.         /* Prefix Extra Space >> 12 Columns */
  235.         .container_12 .prefix_1,
  236.         .container_12 .prefix_2,
  237.         .container_12 .prefix_3,
  238.         .container_12 .prefix_4,
  239.         .container_12 .prefix_5,
  240.         .container_12 .prefix_6,
  241.         .container_12 .prefix_7,
  242.         .container_12 .prefix_8,
  243.         .container_12 .prefix_9,
  244.         .container_12 .prefix_10,
  245.         .container_12 .prefix_11{padding-left:0;}
  246.         /* Suffix Extra Space >> 12 Columns */
  247.         .container_12 .suffix_1,
  248.         .container_12 .suffix_2,
  249.         .container_12 .suffix_3,
  250.         .container_12 .suffix_4,
  251.         .container_12 .suffix_5,
  252.         .container_12 .suffix_6,
  253.         .container_12 .suffix_7,
  254.         .container_12 .suffix_8,
  255.         .container_12 .suffix_9,
  256.         .container_12 .suffix_10,
  257.         .container_12 .suffix_11{padding-right:0;}
  258.     }
  259.  
  260.  
  261. /* #Clearing
  262. ================================================== */
  263.  
  264.     /* Self Clearing Goodness */
  265.     .container_12:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  266.  
  267.     /* Use clearfix class on parent to clear nested columns,
  268.     or wrap each row of columns in a <div class="row"> */
  269.     .clearfix:before,
  270.     .clearfix:after,
  271.     .row:before,
  272.     .row:after {
  273.       content: '\0020';
  274.       display: block;
  275.       overflow: hidden;
  276.       visibility: hidden;
  277.       width: 0;
  278.       height: 0; }
  279.     .row:after,
  280.     .clearfix:after {
  281.       clear: both; }
  282.     .row,
  283.     .clearfix {
  284.       zoom: 1; }
  285.  
  286.     /* You can also use a <br class="clear" /> to clear columns */
  287.     .clear {
  288.       clear: both;
  289.       display: block;
  290.       overflow: hidden;
  291.       visibility: hidden;
  292.       width: 0;
  293.       height: 0;
  294.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!