Last active
April 30, 2020 15:13
-
-
Save f1yn/e46128ffb38535cc3139aa823924385a to your computer and use it in GitHub Desktop.
HAMR CSS Framework
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * HAMR Framework | |
| * CORE LAYOUT MODULE -V:[0.5.5] -REV:[02/18/14] | |
| * | |
| * Copyright (c) 2013 - WorkingHands Group - Ronald Buckingham | |
| * Released under the MIT licence | |
| * | |
| * NOTE: If this file size exceeds 8 Kb: it should be minified | |
| * The 960 failsafe system | |
| * The containers and rows will limit themselves to a width of 960px by default. This allows really | |
| * old browsers to resort to the 960 grid system if a responsive layout is not possible. This is done | |
| * by removing hard coded widths, and placing responsive code in media queries (which will not be recognized | |
| * on older browsers). If a responsive layout is required, a javascript library should be used to add | |
| * responsive layouts when older browsers dont support them. I use respond.js (search it on Github) to | |
| * do this when old versions of IE (or any browser) are loaded. */ | |
| *{margin: 0; padding: 0} /* set ALL elements so that elements are not affected by browser-specific styles */ | |
| .container{width: 960px; max-width: 1240px !important; margin: 0 auto} | |
| .container .col {float: left; display: inline} /* The floating columns */ | |
| .container .box {padding: 8px} /* padding for items inside a container - used for boxing content */ | |
| .container .mbox {margin: 8px} /* like .box, but instead used margin */ | |
| .container .col *.last{ /* any items with last class in a column */ | |
| padding-bottom: 0; | |
| margin-bottom: 0; | |
| } | |
| .container .empty.col{height: 1px; content: ""} /* for empty or null columns */ | |
| .container.fill {width: 100% !important; max-width: none !important} | |
| /* DESKTOP COLUMN SIZES | |
| * I simply divided 100 by 16 (the number of columns) | |
| * to get 0.00625. Then, I multiplied the percentage by the width of the column. | |
| example: | |
| 6.25 * 1 (width 1) = 6.25 | |
| 6.25 * 2 (width 2) = 12.5 | |
| 6.25 * 3 (width 3) = 18.75 | |
| 6.25 * 4 (width 4) = 25 | |
| */ | |
| .container .x1 {width: 6.25%} | |
| .container .x2 {width: 12.5%} | |
| .container .x3 {width: 18.75%} | |
| .container .xq {width: 25%} /* quarter */ | |
| .container .x5 {width: 31.25%} | |
| .container .x6 {width: 37.5%} | |
| .container .x7 {width: 43.75%} | |
| .container .xh {width: 50%} /* half */ | |
| .container .x9 {width: 56.25%} | |
| .container .x10 {width: 62.5%} | |
| .container .x11 {width: 68.75%} | |
| .container .x3q {width: 75%} /* three quarters */ | |
| .container .x13 {width: 81.25%} | |
| .container .x14 {width: 87.5%} | |
| .container .x15 {width: 93.75%} | |
| .container .xf {width: 100%} /* full */ | |
| .container .x3rd {width: 33.3333333333%} /* THIRD */ | |
| .container .x2-3rd {width: 66.6666666666%} /* 2 THIRDS */ | |
| hr[xbreak], | |
| hr[dbreak], | |
| hr[tbreak], | |
| hr[mbreak]{ | |
| display: inline; | |
| content: '\0020'; | |
| float: left; | |
| width: 0; | |
| height: 0; | |
| } | |
| /* Desktop and Tablets */ | |
| @media (min-width: 399px){ | |
| .container {width: 95%} | |
| } | |
| @media (min-width: 1240px){ | |
| .container.snap {width: 1240px} | |
| } | |
| /* Large Desktop (and everything bigger) */ | |
| @media (min-width: 1024px){ | |
| .container hr[xbreak] {width: 100%} | |
| } | |
| /* Large Desktop */ | |
| @media (min-width: 1024px) and (max-width: 1239px){ | |
| .container.snap {width: 1024px} | |
| } | |
| /* Small Desktop and Large Tablets */ | |
| @media (max-width: 1024px) and (min-width: 768px){ | |
| .container.snap {width: 768px} | |
| .container .flexable .dq {width: 25% !important} | |
| .container .flexable .dh {width: 50% !important} | |
| .container .flexable .df {width: 100% !important} | |
| .container .flexable .d3rd {width: 33.3333333333%} /* THIRD */ | |
| .container .flexable .d2-3rd {width: 66.6666666666%} /* 2 THIRDS */ | |
| .container .flexable .dnull { | |
| width: 0 !important; | |
| height: 0px !important; | |
| display: none !important; | |
| } | |
| .container hr[dbreak]{width: 100%} | |
| } | |
| /* Feature Tablets */ | |
| @media (min-width: 600px) and (max-width: 767px){ | |
| .container.snap {width: 512px} | |
| .container .flexable > * {float: left} | |
| .container .flexable .tq {width: 25% !important} | |
| .container .flexable .th {width: 50% !important} | |
| .container .flexable .tf {width: 100% !important} | |
| .container .flexable .t3rd {width: 33.3333333333%} /* THIRD */ | |
| .container .flexable .t2-3rd {width: 66.6666666666%} /* 2 THIRDS */ | |
| .container .flexable .tnull { | |
| width: 0 !important; | |
| height: 0px !important; | |
| display: none !important; | |
| } | |
| .container hr[tbreak]{width: 100%} | |
| } | |
| /* Tablets (Feature and Small) and Mobile */ | |
| @media (max-width: 767px), handheld{ | |
| .container .x1, | |
| .container .x2, | |
| .container .x3, | |
| .container .xq, | |
| .container .x5, | |
| .container .x6, | |
| .container .x7, | |
| .container .xh, | |
| .container .x9, | |
| .container .x10, | |
| .container .x11, | |
| .container .x3q, | |
| .container .x13, | |
| .container .x14, | |
| .container .x15, | |
| .container .xf, | |
| .container .x3rd, | |
| .container .x2-3rd {width: 100%} | |
| .flexable .mnull { | |
| width: 0 !important; | |
| height: 0px !important; | |
| display: none !important; | |
| } | |
| } | |
| /* Mobile */ | |
| @media (max-width: 399px), handheld{ | |
| .container, | |
| .container hr[mbreak] {width: 100%} | |
| } | |
| /* clear-fixing and stuff "all-the-like" | |
| * Fixed for div clearing on older browsers that just dont seem to do it right. | |
| * The majority of the following code was based off Skeleton Framework */ | |
| .container:after, .navigator:after, .nav:after, .reel:after { | |
| content: "\0020"; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden | |
| } | |
| .clearfix:before, .clearfix:after, .row:before, .row:after{ | |
| content: '\0020'; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| width: 0; | |
| height: 0 | |
| } | |
| .row:after, .clearfix:after {clear: both} | |
| .row, .clearfix {zoom: 1} | |
| .clear { | |
| clear: both; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| width: 0; | |
| height: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment