/* * Gridlock - A CSS responsive grid system [Base] * @author Ben Plum * @version 1.3.1 * * Copyright © 2013 Ben Plum * Released under the MIT License */ /* !Reset Box-sizing */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; *behavior: url(boxsizing.htc); } /* !Defaults */ .gridlock .row { margin-left: auto; margin-right: auto; width: 300px; /* Default */ } .gridlock .row:after { clear: both; content: ""; display: block; height: 0; line-height: 0; visibility: hidden; } .gridlock .row .row { margin-left: -1.0416666666666667%; margin-right: -1.0416666666666667%; width: 102.0833333333333334%; } /* !All Cells */ .gridlock .row [class*="all-"], .gridlock .row [class*="mobile-"], .gridlock .row [class*="tablet-"], .gridlock .row [class*="desktop-"] { float: left; margin-left: 1.0416666666666667%; margin-right: 1.0416666666666667%; } /* !Padded Cells */ .gridlock .row [class*="all-"].padded, .gridlock .row [class*="mobile-"].padded, .gridlock .row [class*="tablet-"].padded, .gridlock .row [class*="desktop-"].padded { margin-left: 0; margin-right: 0; padding-left: 1.0416666666666667%; padding-right: 1.0416666666666667%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; *behavior: none; } /* !Contained Cells */ .gridlock .row [class*="all-"].contained, .gridlock .row [class*="mobile-"].contained, .gridlock .row [class*="tablet-"].contained, .gridlock .row [class*="desktop-"].contained { margin-left: 0; margin-right: 0; } /* !Right Cells */ .gridlock .row [class*="all-"].right, .gridlock .row [class*="mobile-"].right, .gridlock .row [class*="tablet-"].right, .gridlock .row [class*="desktop-"].right { float: right; } /* !Rows, Thinest to Widest */ @media screen and (min-width: 500px) { .gridlock .row { width: 480px; } } @media screen and (min-width: 740px) { .gridlock .row { width: 720px; } } @media screen and (min-width: 980px) { .gridlock .row { width: 960px; } } @media screen and (min-width: 1220px) { .gridlock .row { width: 1200px; } } /* !All */ .gridlock .row .all-fourth { width: 22.91666666666666%; } .gridlock .row .all-third { width: 31.25%; } .gridlock .row .all-half { width: 47.9166666666666667%; } .gridlock .row .all-full { width: 97.9166666666666667%; } .gridlock .row .contained.all-fourth { width: 25%; } .gridlock .row .contained.all-third { width: 33.33333333333333%; } .gridlock .row .contained.all-half { width: 50%; } .gridlock .row .contained.all-full { width: 100%; } /* !Mobile, 540 (max 740) */ @media screen and (max-width: 740px) { /* Cells */ .gridlock .row .mobile-1 { width: 31.25%; } .gridlock .row .mobile-2 { width: 64.5833333333333333%; } .gridlock .row .mobile-3 { width: 97.9166666666666667%; } /* Push */ .gridlock .row .mobile-push-1 { margin-left: 34.375%; } .gridlock .row .mobile-push-2 { margin-left: 67.7083333333334%; } /* Fractions */ .gridlock .row .mobile-fourth { width: 22.91666666666666%; } .gridlock .row .mobile-third { width: 31.25%; } .gridlock .row .mobile-half { width: 47.9166666666666667%; } .gridlock .row .mobile-full { width: 97.9166666666666667%; } /* Fractions Push */ .gridlock .row .mobile-push-third { margin-left: 34.375%; } .gridlock .row .mobile-push-half { margin-left: 51.0416666666666667%; } /* Contained */ .gridlock .row .contained.mobile-1 { width: 33.3333333333333333%; } .gridlock .row .contained.mobile-2 { width: 66.6666666666666667%; } .gridlock .row .contained.mobile-3 { width: 100%; } /* Contained Push */ .gridlock .row .contained.push.mobile-1 { margin-left: 33.3333333333333333%; } .gridlock .row .contained.push.mobile-2 { margin-left: 66.6666666666666667%; } /* Contained Fractions */ .gridlock .row .contained.mobile-fourth { width: 25%; } .gridlock .row .contained.mobile-third { width: 33.33333333333333%; } .gridlock .row .contained.mobile-half { width: 50%; } .gridlock .row .contained.mobile-full { width: 100%; } /* Contained Fractions Push */ .gridlock .row .contained.mobile-push-third { margin-left: 33.33333333333333%; } .gridlock .row .contained.mobile-push-half { margin-left: 50%; } /* Centered */ .gridlock .row [class*="mobile-"].center { margin-left: auto; margin-right: auto; } } /* !Mobile - Min, 300 (max 500) */ @media screen and (max-width: 500px) { /* Cells */ .gridlock .row .min-fourth { width: 22.91666666666666%; } .gridlock .row .min-third { width: 31.25%; } .gridlock .row .min-half { width: 47.9166666666666667%; } .gridlock .row .min-full { width: 97.9166666666666667%; } /* Contained Fractions */ .gridlock .row .contained.min-fourth { width: 25%; } .gridlock .row .contained.min-third { width: 33.33333333333333%; } .gridlock .row .contained.min-half { width: 50%; } .gridlock .row .contained.min-full { width: 100%; } /* Contained Fractions Push */ .gridlock .row .contained.min-push-third { margin-left: 33.33333333333333%; } .gridlock .row .contained.min-push-half { margin-left: 50%; } /* Centered */ .gridlock .row [class*="min-"].center { margin-left: auto; margin-right: auto; } } /* !Tablet, 6 column, 720 (min 740) */ @media screen and (min-width: 740px) and (max-width: 980px) { /* Fractions */ .gridlock .row .tablet-fourth { width: 22.91666666666666%; } .gridlock .row .tablet-third { width: 31.25%; } .gridlock .row .tablet-half { width: 47.9166666666666667%; } .gridlock .row .tablet-full { width: 97.9166666666666667%; } /* Fractions Push */ .gridlock .row .tablet-push-third { margin-left: 34.375%; } .gridlock .row .tablet-push-half { margin-left: 51.0416666666666667%; } /* Contained Fractions */ .gridlock .row .contained.tablet-fourth { width: 25%; } .gridlock .row .contained.tablet-third { width: 33.33333333333333%; } .gridlock .row .contained.tablet-half { width: 50%; } .gridlock .row .contained.tablet-full { width: 100%; } /* Contained Fractions Push */ .gridlock .row .contained.tablet-push-third { margin-left: 33.33333333333333%; } .gridlock .row .contained.tablet-push-half { margin-left: 50%; } /* Center Cells */ .gridlock .row [class*="tablet-"].center { margin-left: auto; margin-right: auto; } } /* !Desktop, 12 column, 960 (min 980) */ @media screen and (min-width: 980px) { /* Fractions */ .gridlock .row .desktop-fourth { width: 22.91666666666666%; } .gridlock .row .desktop-third { width: 31.25%; } .gridlock .row .desktop-half { width: 47.9166666666666667%; } .gridlock .row .desktop-full { width: 97.9166666666666667%; } /* Fractions Push */ .gridlock .row .desktop-push-third { margin-left: 34.375%; } .gridlock .row .desktop-push-half { margin-left: 51.0416666666666667%; } /* Contained Fractions */ .gridlock .row .contained.desktop-fourth { width: 25%; } .gridlock .row .contained.desktop-third { width: 33.33333333333333%; } .gridlock .row .contained.desktop-half { width: 50%; } .gridlock .row .contained.desktop-full { width: 100%; } /* Contained Fractions Push */ .gridlock .row .contained.desktop-push-third { margin-left: 33.33333333333333%; } .gridlock .row .contained.desktop-push-half { margin-left: 50%; } /* Centered */ .gridlock .row [class*="desktop-"].center { margin-left: auto; margin-right: auto; } } /* !Desktop, Max, 12 column, 1200 (min 1220) */ @media screen and (min-width: 1220px) { /* Fractions */ .gridlock .row .max-fourth { width: 22.91666666666666%; } .gridlock .row .max-third { width: 31.25%; } .gridlock .row .max-half { width: 47.9166666666666667%; } .gridlock .row .max-full { width: 97.9166666666666667%; } /* Fractions Push */ .gridlock .row .max-push-third { margin-left: 34.375%; } .gridlock .row .max-push-half { margin-left: 51.0416666666666667%; } /* Contained Fractions */ .gridlock .row .contained.max-fourth { width: 25%; } .gridlock .row .contained.max-third { width: 33.33333333333333%; } .gridlock .row .contained.max-half { width: 50%; } .gridlock .row .contained.max-full { width: 100%; } /* Contained Fractions Push */ .gridlock .row .contained.max-push-third { margin-left: 33.33333333333333%; } .gridlock .row .contained.max-push-half { margin-left: 50%; } /* Centered */ .gridlock .row [class*="max-"].center { margin-left: auto; margin-right: auto; } } /* * Gridlock - A CSS responsive grid system [12 column] * @author Ben Plum * @version 1.3.1 * * Copyright © 2013 Ben Plum * Released under the MIT License */ /* !Tablet, 6 column, 720 (min 740) */ @media screen and (min-width: 740px) and (max-width: 980px) { /* Cells */ .gridlock .row .tablet-1 { width: 14.5833333333333333%; } .gridlock .row .tablet-2 { width: 31.25%; } .gridlock .row .tablet-3 { width: 47.9166666666666667%; } .gridlock .row .tablet-4 { width: 64.5833333333333333%; } .gridlock .row .tablet-5 { width: 81.25%; } .gridlock .row .tablet-6 { width: 97.9166666666666667%; } /* Push */ .gridlock .row .tablet-push-1 { margin-left: 17.7083333333333333%; } .gridlock .row .tablet-push-2 { margin-left: 34.375%; } .gridlock .row .tablet-push-3 { margin-left: 51.0416666666666667%; } .gridlock .row .tablet-push-4 { margin-left: 67.7083333333334%; } .gridlock .row .tablet-push-5 { margin-left: 84.375%; } /* Contained */ .gridlock .row .contained.tablet-1 { width: 16.66666666666667%; } .gridlock .row .contained.tablet-2 { width: 33.33333333333333%; } .gridlock .row .contained.tablet-3 { width: 50%; } .gridlock .row .contained.tablet-4 { width: 66.66666666666673%; } .gridlock .row .contained.tablet-5 { width: 83.33333333333333%; } .gridlock .row .contained.tablet-6 { width: 100%; } /* Contained Push */ .gridlock .row .contained.tablet-push-1 { margin-left: 16.66666666666667%; } .gridlock .row .contained.tablet-push-2 { margin-left: 33.33333333333333%; } .gridlock .row .contained.tablet-push-3 { margin-left: 50%; } .gridlock .row .contained.tablet-push-4 { margin-left: 66.66666666666673%; } .gridlock .row .contained.tablet-push-5 { margin-left: 83.33333333333333%; } } /* !Desktop, 12 column, 960 (min 980) */ @media screen and (min-width: 980px) { /* Cells */ .gridlock .row .desktop-1 { width: 6.25%; } .gridlock .row .desktop-2 { width: 14.5833333333333333%; } .gridlock .row .desktop-3 { width: 22.9166666666666667%; } .gridlock .row .desktop-4 { width: 31.25%; } .gridlock .row .desktop-5 { width: 39.5833333333333333%; } .gridlock .row .desktop-6 { width: 47.9166666666666667%; } .gridlock .row .desktop-7 { width: 56.25%; } .gridlock .row .desktop-8 { width: 64.5833333333333333%; } .gridlock .row .desktop-9 { width: 72.9166666666666667%; } .gridlock .row .desktop-10 { width: 81.25%; } .gridlock .row .desktop-11 { width: 89.5833333333333333%; } .gridlock .row .desktop-12 { width: 97.9166666666666667%; } /* Push */ .gridlock .row .desktop-push-1 { margin-left: 9.375%; } .gridlock .row .desktop-push-2 { margin-left: 17.7083333333333333%; } .gridlock .row .desktop-push-3 { margin-left: 26.0416666666666667%; } .gridlock .row .desktop-push-4 { margin-left: 34.375%; } .gridlock .row .desktop-push-5 { margin-left: 42.7083333333333334%; } .gridlock .row .desktop-push-6 { margin-left: 51.0416666666666667%; } .gridlock .row .desktop-push-7 { margin-left: 59.375%; } .gridlock .row .desktop-push-8 { margin-left: 67.7083333333334%; } .gridlock .row .desktop-push-9 { margin-left: 76.0416666666668%; } .gridlock .row .desktop-push-10 { margin-left: 84.375%; } .gridlock .row .desktop-push-11 { margin-left: 92.7083333333335%; } /* Contained */ .gridlock .row .contained.desktop-1 { width: 8.333333333333333%; } .gridlock .row .contained.desktop-2 { width: 16.66666666666667%; } .gridlock .row .contained.desktop-3 { width: 25%; } .gridlock .row .contained.desktop-4 { width: 33.33333333333333%; } .gridlock .row .contained.desktop-5 { width: 41.66666666666667%; } .gridlock .row .contained.desktop-6 { width: 50%; } .gridlock .row .contained.desktop-7 { width: 58.33333333333333%; } .gridlock .row .contained.desktop-8 { width: 66.66666666666673%; } .gridlock .row .contained.desktop-9 { width: 75%; } .gridlock .row .contained.desktop-10 { width: 83.33333333333333%; } .gridlock .row .contained.desktop-11 { width: 91.66666666666683%; } .gridlock .row .contained.desktop-12 { width: 100%; } /* Contained Push */ .gridlock .row .contained.desktop-push-1 { margin-left: 8.333333333333333%; } .gridlock .row .contained.desktop-push-2 { margin-left: 16.66666666666667%; } .gridlock .row .contained.desktop-push-3 { margin-left: 25%; } .gridlock .row .contained.desktop-push-4 { margin-left: 33.33333333333333%; } .gridlock .row .contained.desktop-push-5 { margin-left: 41.66666666666667%; } .gridlock .row .contained.desktop-push-6 { margin-left: 50%; } .gridlock .row .contained.desktop-push-7 { margin-left: 58.33333333333333%; } .gridlock .row .contained.desktop-push-8 { margin-left: 66.66666666666673%; } .gridlock .row .contained.desktop-push-9 { margin-left: 75%; } .gridlock .row .contained.desktop-push-10 { margin-left: 83.33333333333333%; } .gridlock .row .contained.desktop-push-11 { margin-left: 91.66666666666683%; } } /* !Desktop, Max, 12 column, 1200 (min 1220) */ @media screen and (min-width: 1220px) { /* Cells */ .gridlock .row .max-1 { width: 6.25%; } .gridlock .row .max-2 { width: 14.5833333333333333%; } .gridlock .row .max-3 { width: 22.9166666666666667%; } .gridlock .row .max-4 { width: 31.25%; } .gridlock .row .max-5 { width: 39.5833333333333333%; } .gridlock .row .max-6 { width: 47.9166666666666667%; } .gridlock .row .max-7 { width: 56.25%; } .gridlock .row .max-8 { width: 64.5833333333333333%; } .gridlock .row .max-9 { width: 72.9166666666666667%; } .gridlock .row .max-10 { width: 81.25%; } .gridlock .row .max-11 { width: 89.5833333333333333%; } .gridlock .row .max-12 { width: 97.9166666666666667%; } /* Push */ .gridlock .row .max-push-0 { margin-left: 1.0416666666666667%; } .gridlock .row .max-push-1 { margin-left: 9.375%; } .gridlock .row .max-push-2 { margin-left: 17.7083333333333333%; } .gridlock .row .max-push-3 { margin-left: 26.0416666666666667%; } .gridlock .row .max-push-4 { margin-left: 34.375%; } .gridlock .row .max-push-5 { margin-left: 42.7083333333333334%; } .gridlock .row .max-push-6 { margin-left: 51.0416666666666667%; } .gridlock .row .max-push-7 { margin-left: 59.375%; } .gridlock .row .max-push-8 { margin-left: 67.7083333333334%; } .gridlock .row .max-push-9 { margin-left: 76.0416666666668%; } .gridlock .row .max-push-10 { margin-left: 84.375%; } .gridlock .row .max-push-11 { margin-left: 92.7083333333335%; } /* Contained */ .gridlock .row .contained.max-1 { width: 8.333333333333333%; } .gridlock .row .contained.max-2 { width: 16.66666666666667%; } .gridlock .row .contained.max-3 { width: 25%; } .gridlock .row .contained.max-4 { width: 33.33333333333333%; } .gridlock .row .contained.max-5 { width: 41.66666666666667%; } .gridlock .row .contained.max-6 { width: 50%; } .gridlock .row .contained.max-7 { width: 58.33333333333333%; } .gridlock .row .contained.max-8 { width: 66.66666666666673%; } .gridlock .row .contained.max-9 { width: 75%; } .gridlock .row .contained.max-10 { width: 83.33333333333333%; } .gridlock .row .contained.max-11 { width: 91.66666666666683%; } .gridlock .row .contained.max-12 { width: 100%; } /* Contained Push */ .gridlock .row .contained.max-push-1 { margin-left: 8.333333333333333%; } .gridlock .row .contained.max-push-2 { margin-left: 16.66666666666667%; } .gridlock .row .contained.max-push-3 { margin-left: 25%; } .gridlock .row .contained.max-push-4 { margin-left: 33.33333333333333%; } .gridlock .row .contained.max-push-5 { margin-left: 41.66666666666667%; } .gridlock .row .contained.max-push-6 { margin-left: 50%; } .gridlock .row .contained.max-push-7 { margin-left: 58.33333333333333%; } .gridlock .row .contained.max-push-8 { margin-left: 66.66666666666673%; } .gridlock .row .contained.max-push-9 { margin-left: 75%; } .gridlock .row .contained.max-push-10 { margin-left: 83.33333333333333%; } .gridlock .row .contained.max-push-11 { margin-left: 91.66666666666683%; } } /* GRID SYSTEM - OVERRIDE */ @media screen and (max-width: 500px) { .mobile-hide { display: none !important; } } @media screen and (min-width: 500px) and (max-width: 980px) { .tablet-hide { display: none !important; } /* rows for columns - tablet */ .tablet-3:nth-of-type(2n+1) { clear: both; } .tablet-2:nth-of-type(3n+1) { clear: both; } } @media screen and (min-width: 980px) { .desktop-hide { display: none !important; } /* rows for columns - desktop */ .desktop-3:nth-of-type(4n+1) { clear: both; } .desktop-4:nth-of-type(3n+1) { clear: both; } .desktop-6:nth-of-type(2n+1) { clear: both; } } .row .boxed { padding: 15px 0; } .row .boxed > * { padding-left: 15px; padding-right: 15px; }