├── README.md └── hg.css /README.md: -------------------------------------------------------------------------------- 1 | # hg.css 2 | My little CSS framework for quick building block development. 3 | 4 | It starts with some basic Box-Sizing, Normalize and Clearfix. Love these! 5 | 6 | Here are some of the main highlights for each section. 7 | 8 |

Structure

9 | Simple classes to build wrappers and position text. 10 | ``` 11 |
12 |
13 |
14 | 15 | .full-coverage { top: 0; right: 0; bottom: 0; left: 0; } 16 | .centered { max-width: 1080px; margin-left: auto; margin-right: auto; } 17 | .middle { margin-left: auto; margin-right: auto; } 18 | .hidden, .hide { display: none; } 19 | ``` 20 |

Decorative

21 | This section contains styles for images and borders. 22 | 23 | ``` 24 | 25 | 26 | img.circle { border-radius: 100%; } 27 | img.border { border: solid 3px #fff; } 28 | img.shadow { box-shadow: 0 2px 4px #ccc; } 29 | .bg-white-20 { background: rgba(255,255,255,0.2); } 30 | .border-vert { border-left: solid 1px #ccc; border-right: solid 1px #ccc; } 31 | hr.block { width: 100px; height: 10px; background: #efefef; border: none; margin: 20px auto; } 32 | ``` 33 | 34 |

Responsive Columns

35 | This is my take on the grid, no more col-12 type stuff, just simply math thanks to box-sizing. The .col-wrap class causes the responsive wrapping. 36 | ``` 37 |
38 |
40%
39 |
60%
40 |
41 | ``` 42 | 43 |

Padding and Margins

44 | Tons of padding and margin options. All based on 5px, 10px, 20px & 40px increments. Having worked with them for a while the should be in an order that makes for proper overriding and multiple class adding. 45 | ``` 46 |
47 |
48 |
49 |
50 |
51 | ``` 52 | -------------------------------------------------------------------------------- /hg.css: -------------------------------------------------------------------------------- 1 | 2 | /* HG.CSS - v1.0.1 */ 3 | 4 | /* BASE */ 5 | body { 6 | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 7 | font-weight: 400; 8 | font-size: 14px; 9 | line-height: 20px; 10 | color: #454454; 11 | -webkit-text-size-adjust: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | } 15 | 16 | a { color: #fff; text-decoration: none; } 17 | a:focus { outline-style: none; } 18 | img { border: 0; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto; } 19 | 20 | 21 | /* BOX SIZING */ 22 | *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 23 | 24 | 25 | /* NORMALIZE */ 26 | article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline;zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:1.7em;margin:.5em 0;line-height: 1em;}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;white-space:normal;margin-left:-7px;padding:0}button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0}button,input{line-height:normal}button,html input[type=button],/* 1 */ 27 | input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,figure,form{margin:0}p,pre,dl,menu,ol,ul{margin:1em 0} 28 | 29 | 30 | /* CLEARFIX MICRO */ 31 | .cf:before, .cf:after { content: " "; display: table; } 32 | .cf:after { clear: both; } 33 | .cf { *zoom: 1; } 34 | 35 | 36 | /* STRUCTURE */ 37 | .relative { position: relative; } 38 | .absolute { position: absolute; } 39 | .fixed { position: fixed; } 40 | .top-left { top: 10px; right: 10px; } 41 | .top-right { top: 10px; right: 10px; } 42 | .full-coverage { top: 0; right: 0; bottom: 0; left: 0; } 43 | .block { display: block; } 44 | .fleft { float: left; } 45 | .fright { float: right; } 46 | .clear { clear: both; } 47 | 48 | .centered { max-width: 1080px; margin-left: auto; margin-right: auto; } 49 | .centered-700 { max-width: 700px; margin-left: auto; margin-right: auto; } 50 | .centered-800 { max-width: 800px; margin-left: auto; margin-right: auto; } 51 | .centered-980 { max-width: 980px; margin-left: auto; margin-right: auto; } 52 | 53 | .middle { margin-left: auto; margin-right: auto; } 54 | .no-wrap { white-space: nowrap; } 55 | .hidden, .hide { display: none; } 56 | 57 | .ta-left { text-align: left; } 58 | .ta-center { text-align: center; } 59 | .ta-right { text-align: right; } 60 | 61 | 62 | 63 | /* DECORATIVE */ 64 | img.circle { border-radius: 100%; } 65 | img.border { border: solid 3px #fff; } 66 | img.bigborder { border: solid 5px #fff; } 67 | img.border-thin { border: solid 2px #fff; } 68 | img.shadow { box-shadow: 0 2px 4px #ccc; } 69 | img.shadow-dark { box-shadow: 0 2px 2px rgba(41, 41, 41, 0.32); } 70 | .no-shadow { text-shadow: none; } 71 | .bg-white-20 { background: rgba(255,255,255,0.2); } 72 | .border-top { border-top: solid 1px #ccc; } 73 | .border-bottom { border-bottom: solid 1px #ccc; } 74 | .border-horz { border-bottom: solid 1px #ccc; border-top: solid 1px #ccc; } 75 | .border-vert { border-left: solid 1px #ccc; border-right: solid 1px #ccc; } 76 | hr { height: 1px; background: #ccc; border: none; } 77 | hr.white { background: #fff; } 78 | hr.block { width: 100px; height: 10px; background: #efefef; border: none; margin: 20px auto; } 79 | .overflow-hidden { overflow: hidden; } 80 | 81 | 82 | 83 | /* FONT */ 84 | .bold { font-weight: 700; } 85 | .break-word { word-wrap: break-word; } 86 | 87 | .fs-1 { font-size: 1em; } .fs-2 { font-size: 2em; line-height: 1em; } 88 | .fs-1-1 { font-size: 1.1em; } .fs-3 { font-size: 3em; line-height: 1em; } 89 | .fs-1-2 { font-size: 1.2em; } .fs-4 { font-size: 4em; line-height: 1em; } 90 | .fs-1-3 { font-size: 1.3em; } .fs-0-9 { font-size: 0.9em; } 91 | .fs-1-4 { font-size: 1.4em; } .fs-0-8 { font-size: 0.8em; } 92 | .fs-1-5 { font-size: 1.5em; } .fs-0-7 { font-size: 0.7em; } 93 | .fs-1-6 { font-size: 1.6em; } .fs-0-6 { font-size: 0.6em; } 94 | .lh-1 { line-height: 1em; } .fs-0-5 { font-size: 0.5em; } 95 | .lh-1-1 { line-height: 1.1em; } .lh-1-2 { line-height: 1.2em; } 96 | .lh-1-5 { line-height: 1.5em; } 97 | .lh-2 { line-height: 2em; } 98 | 99 | .fs-2-2 { font-size: 2.2em; line-height: 1em; } 100 | .fs-2-5 { font-size: 2.5em; line-height: 1em; } 101 | 102 | .ta-left { text-align: left; } 103 | .ta-center { text-align: center; } 104 | .ta-right { text-align: right; } 105 | .upper { text-transform: uppercase; } 106 | .lower { text-transform: lowercase; } 107 | 108 | .fc-white, .fc-white a { color: #fff; } 109 | 110 | 111 | /* NOTICE */ 112 | .notice { z-index: 8888; } 113 | .notice a { font-weight: bold; } 114 | .error { background: #E46360; } 115 | .success { background: #657E3F; } 116 | .alert { background: #e5452b; font-weight: bold; position: fixed; width: 100%; top: 0; left: 0; right: 0; } 117 | .alert.ok { background: #98B354; } 118 | .declined { background: #E09897; } 119 | .accepted { background: #ABC487; } 120 | 121 | 122 | 123 | /* BOX */ 124 | .box { padding: 20px; margin: 10px 0; } 125 | .box.white { background: #fff; } 126 | .box.grey { background: #ccc; } 127 | .box.light,.light { background: #efefef; } 128 | .box.lightgreen { background: #E2F3D4; } 129 | .box.dark { background: #343434; } 130 | .box.neg-top { margin-top: -10px; } 131 | .box.shadow { box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); } 132 | 133 | .box.with-footer { padding-bottom: 0; } 134 | .box .box-footer { background: #efefef; padding: 5px 10px; margin-top: 20px; margin-left: -20px; margin-right: -20px; text-align: right; text-transform: uppercase; font-size: 0.8em; } 135 | 136 | 137 | /* COLUMNS */ 138 | .col { float: left; padding: 10px; } 139 | .col-right { float: right; } 140 | .col-10 { width: 10%; } .col-15 { width: 15%; } 141 | .col-20 { width: 20%; } .col-25 { width: 25%; } 142 | .col-30 { width: 30%; } .col-33 { width: 33%; } .col-35 { width: 35%; } 143 | .col-40 { width: 40%; } .col-45 { width: 45%; } 144 | .col-50 { width: 50%; } .col-55 { width: 55%; } 145 | .col-60 { width: 60%; } .col-65 { width: 65%; } .col-66 { width: 66%; } 146 | .col-70 { width: 70%; } .col-75 { width: 75%; } 147 | .col-80 { width: 80%; } .col-85 { width: 85%; } 148 | .col-90 { width: 90%; } 149 | 150 | /* NON BREAKING */ 151 | .col-wrap .col-25:nth-child(4n+1) { clear: both; } 152 | .col-wrap .col-20:nth-child(5n+1) { clear: both; } 153 | .col-wrap .col-33:nth-child(3n+1) { clear: both; } 154 | .col-wrap .col-50:nth-child(2n+1) { clear: both; } 155 | 156 | @media only screen and (max-width: 780px) { 157 | .col-wrap .col-50, .col-wrap .col-60, .col-wrap .col-40 { width: 100%; } 158 | .col-wrap .col-33, .col-wrap .col-25, .col-wrap .col-20 { width: 50%; } 159 | 160 | .col-wrap .col:nth-child(2n+1) { clear: both; } 161 | .col-wrap .col:nth-child(4n+1), 162 | .col-wrap .col:nth-child(5n+1), 163 | .col-wrap .col:nth-child(3n+1) { clear: none; } 164 | .col-wrap .col-50:nth-child(2n+1) { clear: none; } 165 | } 166 | 167 | @media only screen and (max-width: 480px) { 168 | .col { padding: 5px; } 169 | .col-wrap .col-33, .col-wrap .col-25, .col-wrap .col-20 { width: 100%; } 170 | } 171 | 172 | 173 | /* PADDING */ 174 | .pad-sml { padding: 5px; } 175 | .pad-med { padding: 10px; } 176 | .pad-lrg { padding: 20px; } 177 | .pad-xlrg { padding: 40px; } 178 | .pad-vert-sml { padding-top: 5px; padding-bottom: 5px; } 179 | .pad-vert-med { padding-top: 10px; padding-bottom: 10px;} 180 | .pad-vert-lrg { padding-top: 20px; padding-bottom: 20px; } 181 | .pad-vert-xlrg { padding-top: 40px; padding-bottom: 40px; } 182 | .pad-vert-no { padding-top: 0; padding-bottom: 0; } 183 | .pad-bot-sml { padding-bottom: 5px; } 184 | .pad-bot-med { padding-bottom: 10px; } 185 | .pad-bot-lrg { padding-bottom: 20px; } 186 | .pad-bot-xlrg { padding-bottom: 40px; } 187 | .pad-top-sml { padding-top: 5px; } 188 | .pad-top-med { padding-top: 10px; } 189 | .pad-top-lrg { padding-top: 20px; } 190 | .pad-top-xlrg { padding-top: 40px; } 191 | .pad-horz-sml { padding-left: 5px; padding-right: 5px; } 192 | .pad-horz-med { padding-left: 10px; padding-right: 10px; } 193 | .pad-horz-lrg { padding-left: 20px; padding-right: 20px; } 194 | .pad-horz-no { padding-left: 0; padding-right: 0; } 195 | .pad-no { padding: 0; } 196 | .pad-no-top { padding-top: 0; } 197 | .pad-no-bottom { padding-bottom: 0; } 198 | 199 | 200 | /* MARGIN */ 201 | .mar-sml { margin: 5px; } 202 | .mar-med { margin: 10px; } 203 | .mar-lrg { margin: 20px; } 204 | .mar-xlrg { margin: 40px; } 205 | .mar-vert-sml { margin-top: 5px; margin-bottom: 5px; } 206 | .mar-vert-med { margin-top: 10px; margin-bottom: 10px;} 207 | .mar-vert-lrg { margin-top: 20px; margin-bottom: 20px; } 208 | .mar-vert-xlrg { margin-top: 40px; margin-bottom: 40px; } 209 | .mar-vert-no { margin-top: 0; margin-bottom: 0; } 210 | .mar-horz-sml { margin-right: 5px; margin-left: 5px; } 211 | .mar-horz-med { margin-right: 10px; margin-left: 10px;} 212 | .mar-horz-lrg { margin-right: 20px; margin-left: 20px; } 213 | .mar-horz-xlrg { margin-right: 40px; margin-left: 40px; } 214 | .mar-horz-no { margin-right: 0; margin-left: 0; } 215 | .mar-bot-1 { margin-bottom: 1px; } 216 | .mar-bot-sml { margin-bottom: 5px; } 217 | .mar-bot-med { margin-bottom: 10px; } 218 | .mar-bot-lrg { margin-bottom: 20px; } 219 | .mar-bot-xlrg { margin-bottom: 40px; } 220 | .mar-top-1 { margin-top: 1px; } 221 | .mar-top-sml { margin-top: 5px; } 222 | .mar-top-med { margin-top: 10px; } 223 | .mar-top-lrg { margin-top: 20px; } 224 | .mar-top-xlrg { margin-top: 40px; } 225 | .mar-no { margin: 0; } 226 | .mar-no-top { margin-top: 0; } 227 | .mar-no-bot { margin-bottom: 0; } 228 | --------------------------------------------------------------------------------