├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── css ├── grid.css ├── prism.css └── styles.css ├── fav ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png └── favicon.ico ├── grid.scss.zip ├── index.html ├── js ├── general.js └── prism.js ├── prepros-6.config └── scss └── grid.scss /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac crap 2 | .DS_Store 3 | 4 | # Misc 5 | *.log 6 | 7 | # Prepros 8 | prepros.cfg 9 | prepros-6.config 10 | 11 | 12 | # Source files 13 | index.pug 14 | scss/styles.scss -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pawel Laptew 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tiny-flexbox-grid-system 2 | 3 | ### [Demo here](https://pavellaptev.github.io/tiny-flexbox-grid-system) 4 | -------------------------------------------------------------------------------- /css/grid.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | -webkit-box-sizing: border-box; 3 | box-sizing: border-box; 4 | display: -webkit-box; 5 | display: -ms-flexbox; 6 | display: flex; 7 | margin-left: auto; 8 | margin-right: auto; 9 | -ms-flex-wrap: wrap; 10 | flex-wrap: wrap; 11 | max-width: 1400px; 12 | width: 88.57143%; } 13 | @media screen and (max-width: 1020px) { 14 | .grid { 15 | width: 88.23529%; } } 16 | @media screen and (max-width: 620px) { 17 | .grid { 18 | width: 89.67742%; } } 19 | .grid-0 { 20 | -webkit-box-sizing: border-box; 21 | box-sizing: border-box; 22 | display: -webkit-box; 23 | display: -ms-flexbox; 24 | display: flex; 25 | margin-left: auto; 26 | margin-right: auto; 27 | -ms-flex-wrap: wrap; 28 | flex-wrap: wrap; 29 | max-width: 1400px; 30 | width: 100%; } 31 | 32 | .col-desk-0 { 33 | -webkit-box-sizing: border-box; 34 | box-sizing: border-box; 35 | width: 0%; 36 | padding-left: 1.6129%; 37 | padding-right: 1.6129%; } 38 | 39 | .col-desk-shift-0 { 40 | margin-left: 0%; } 41 | 42 | .col-desk-1 { 43 | -webkit-box-sizing: border-box; 44 | box-sizing: border-box; 45 | width: 8.33333%; 46 | padding-left: 1.6129%; 47 | padding-right: 1.6129%; } 48 | 49 | .col-desk-shift-1 { 50 | margin-left: 8.33333%; } 51 | 52 | .col-desk-2 { 53 | -webkit-box-sizing: border-box; 54 | box-sizing: border-box; 55 | width: 16.66667%; 56 | padding-left: 1.6129%; 57 | padding-right: 1.6129%; } 58 | 59 | .col-desk-shift-2 { 60 | margin-left: 16.66667%; } 61 | 62 | .col-desk-3 { 63 | -webkit-box-sizing: border-box; 64 | box-sizing: border-box; 65 | width: 25%; 66 | padding-left: 1.6129%; 67 | padding-right: 1.6129%; } 68 | 69 | .col-desk-shift-3 { 70 | margin-left: 25%; } 71 | 72 | .col-desk-4 { 73 | -webkit-box-sizing: border-box; 74 | box-sizing: border-box; 75 | width: 33.33333%; 76 | padding-left: 1.6129%; 77 | padding-right: 1.6129%; } 78 | 79 | .col-desk-shift-4 { 80 | margin-left: 33.33333%; } 81 | 82 | .col-desk-5 { 83 | -webkit-box-sizing: border-box; 84 | box-sizing: border-box; 85 | width: 41.66667%; 86 | padding-left: 1.6129%; 87 | padding-right: 1.6129%; } 88 | 89 | .col-desk-shift-5 { 90 | margin-left: 41.66667%; } 91 | 92 | .col-desk-6 { 93 | -webkit-box-sizing: border-box; 94 | box-sizing: border-box; 95 | width: 50%; 96 | padding-left: 1.6129%; 97 | padding-right: 1.6129%; } 98 | 99 | .col-desk-shift-6 { 100 | margin-left: 50%; } 101 | 102 | .col-desk-7 { 103 | -webkit-box-sizing: border-box; 104 | box-sizing: border-box; 105 | width: 58.33333%; 106 | padding-left: 1.6129%; 107 | padding-right: 1.6129%; } 108 | 109 | .col-desk-shift-7 { 110 | margin-left: 58.33333%; } 111 | 112 | .col-desk-8 { 113 | -webkit-box-sizing: border-box; 114 | box-sizing: border-box; 115 | width: 66.66667%; 116 | padding-left: 1.6129%; 117 | padding-right: 1.6129%; } 118 | 119 | .col-desk-shift-8 { 120 | margin-left: 66.66667%; } 121 | 122 | .col-desk-9 { 123 | -webkit-box-sizing: border-box; 124 | box-sizing: border-box; 125 | width: 75%; 126 | padding-left: 1.6129%; 127 | padding-right: 1.6129%; } 128 | 129 | .col-desk-shift-9 { 130 | margin-left: 75%; } 131 | 132 | .col-desk-10 { 133 | -webkit-box-sizing: border-box; 134 | box-sizing: border-box; 135 | width: 83.33333%; 136 | padding-left: 1.6129%; 137 | padding-right: 1.6129%; } 138 | 139 | .col-desk-shift-10 { 140 | margin-left: 83.33333%; } 141 | 142 | .col-desk-11 { 143 | -webkit-box-sizing: border-box; 144 | box-sizing: border-box; 145 | width: 91.66667%; 146 | padding-left: 1.6129%; 147 | padding-right: 1.6129%; } 148 | 149 | .col-desk-shift-11 { 150 | margin-left: 91.66667%; } 151 | 152 | .col-desk-12 { 153 | -webkit-box-sizing: border-box; 154 | box-sizing: border-box; 155 | width: 100%; 156 | padding-left: 1.6129%; 157 | padding-right: 1.6129%; } 158 | 159 | .col-desk-shift-12 { 160 | margin-left: 100%; } 161 | 162 | @media screen and (max-width: 1020px) { 163 | .col-tab-0 { 164 | -webkit-box-sizing: border-box; 165 | box-sizing: border-box; 166 | width: 0%; 167 | padding-left: 1.66667%; 168 | padding-right: 1.66667%; } 169 | .col-tab-shift-0 { 170 | margin-left: 0%; } 171 | .col-tab-1 { 172 | -webkit-box-sizing: border-box; 173 | box-sizing: border-box; 174 | width: 8.33333%; 175 | padding-left: 1.66667%; 176 | padding-right: 1.66667%; } 177 | .col-tab-shift-1 { 178 | margin-left: 8.33333%; } 179 | .col-tab-2 { 180 | -webkit-box-sizing: border-box; 181 | box-sizing: border-box; 182 | width: 16.66667%; 183 | padding-left: 1.66667%; 184 | padding-right: 1.66667%; } 185 | .col-tab-shift-2 { 186 | margin-left: 16.66667%; } 187 | .col-tab-3 { 188 | -webkit-box-sizing: border-box; 189 | box-sizing: border-box; 190 | width: 25%; 191 | padding-left: 1.66667%; 192 | padding-right: 1.66667%; } 193 | .col-tab-shift-3 { 194 | margin-left: 25%; } 195 | .col-tab-4 { 196 | -webkit-box-sizing: border-box; 197 | box-sizing: border-box; 198 | width: 33.33333%; 199 | padding-left: 1.66667%; 200 | padding-right: 1.66667%; } 201 | .col-tab-shift-4 { 202 | margin-left: 33.33333%; } 203 | .col-tab-5 { 204 | -webkit-box-sizing: border-box; 205 | box-sizing: border-box; 206 | width: 41.66667%; 207 | padding-left: 1.66667%; 208 | padding-right: 1.66667%; } 209 | .col-tab-shift-5 { 210 | margin-left: 41.66667%; } 211 | .col-tab-6 { 212 | -webkit-box-sizing: border-box; 213 | box-sizing: border-box; 214 | width: 50%; 215 | padding-left: 1.66667%; 216 | padding-right: 1.66667%; } 217 | .col-tab-shift-6 { 218 | margin-left: 50%; } 219 | .col-tab-7 { 220 | -webkit-box-sizing: border-box; 221 | box-sizing: border-box; 222 | width: 58.33333%; 223 | padding-left: 1.66667%; 224 | padding-right: 1.66667%; } 225 | .col-tab-shift-7 { 226 | margin-left: 58.33333%; } 227 | .col-tab-8 { 228 | -webkit-box-sizing: border-box; 229 | box-sizing: border-box; 230 | width: 66.66667%; 231 | padding-left: 1.66667%; 232 | padding-right: 1.66667%; } 233 | .col-tab-shift-8 { 234 | margin-left: 66.66667%; } 235 | .col-tab-9 { 236 | -webkit-box-sizing: border-box; 237 | box-sizing: border-box; 238 | width: 75%; 239 | padding-left: 1.66667%; 240 | padding-right: 1.66667%; } 241 | .col-tab-shift-9 { 242 | margin-left: 75%; } 243 | .col-tab-10 { 244 | -webkit-box-sizing: border-box; 245 | box-sizing: border-box; 246 | width: 83.33333%; 247 | padding-left: 1.66667%; 248 | padding-right: 1.66667%; } 249 | .col-tab-shift-10 { 250 | margin-left: 83.33333%; } 251 | .col-tab-11 { 252 | -webkit-box-sizing: border-box; 253 | box-sizing: border-box; 254 | width: 91.66667%; 255 | padding-left: 1.66667%; 256 | padding-right: 1.66667%; } 257 | .col-tab-shift-11 { 258 | margin-left: 91.66667%; } 259 | .col-tab-12 { 260 | -webkit-box-sizing: border-box; 261 | box-sizing: border-box; 262 | width: 100%; 263 | padding-left: 1.66667%; 264 | padding-right: 1.66667%; } 265 | .col-tab-shift-12 { 266 | margin-left: 100%; } } 267 | 268 | @media screen and (max-width: 620px) { 269 | .col-mob-0 { 270 | -webkit-box-sizing: border-box; 271 | box-sizing: border-box; 272 | width: 0%; 273 | padding-left: 1.79856%; 274 | padding-right: 1.79856%; } 275 | .col-mob-shift-0 { 276 | margin-left: 0%; } 277 | .col-mob-1 { 278 | -webkit-box-sizing: border-box; 279 | box-sizing: border-box; 280 | width: 25%; 281 | padding-left: 1.79856%; 282 | padding-right: 1.79856%; } 283 | .col-mob-shift-1 { 284 | margin-left: 25%; } 285 | .col-mob-2 { 286 | -webkit-box-sizing: border-box; 287 | box-sizing: border-box; 288 | width: 50%; 289 | padding-left: 1.79856%; 290 | padding-right: 1.79856%; } 291 | .col-mob-shift-2 { 292 | margin-left: 50%; } 293 | .col-mob-3 { 294 | -webkit-box-sizing: border-box; 295 | box-sizing: border-box; 296 | width: 75%; 297 | padding-left: 1.79856%; 298 | padding-right: 1.79856%; } 299 | .col-mob-shift-3 { 300 | margin-left: 75%; } 301 | .col-mob-4 { 302 | -webkit-box-sizing: border-box; 303 | box-sizing: border-box; 304 | width: 100%; 305 | padding-left: 1.79856%; 306 | padding-right: 1.79856%; } 307 | .col-mob-shift-4 { 308 | margin-left: 100%; } } 309 | -------------------------------------------------------------------------------- /css/prism.css: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.16.0 2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */ 3 | /** 4 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML 5 | * Based on https://github.com/chriskempson/tomorrow-theme 6 | * @author Rose Pritchard 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | border-radius: 8px; 12 | color: #ccc; 13 | background: none; 14 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; 15 | font-size: 1em; 16 | text-align: left; 17 | white-space: pre; 18 | word-spacing: normal; 19 | word-break: normal; 20 | word-wrap: normal; 21 | line-height: 1.5; 22 | 23 | -moz-tab-size: 4; 24 | -o-tab-size: 4; 25 | tab-size: 4; 26 | 27 | -webkit-hyphens: none; 28 | -moz-hyphens: none; 29 | -ms-hyphens: none; 30 | hyphens: none; 31 | } 32 | 33 | /* Code blocks */ 34 | pre[class*="language-"] { 35 | padding: 1.5em 1.5em 2em; 36 | margin: 0.5em 0; 37 | overflow: auto; 38 | } 39 | 40 | :not(pre) > code[class*="language-"], 41 | pre[class*="language-"] { 42 | background: #2d2d2d; 43 | } 44 | 45 | /* Inline code */ 46 | :not(pre) > code[class*="language-"] { 47 | padding: 0.1em; 48 | border-radius: 0.3em; 49 | white-space: normal; 50 | } 51 | 52 | .token.comment, 53 | .token.block-comment, 54 | .token.prolog, 55 | .token.doctype, 56 | .token.cdata { 57 | color: #999; 58 | } 59 | 60 | .token.punctuation { 61 | color: #ccc; 62 | } 63 | 64 | .token.tag, 65 | .token.attr-name, 66 | .token.namespace, 67 | .token.deleted { 68 | color: #e2777a; 69 | } 70 | 71 | .token.function-name { 72 | color: #6196cc; 73 | } 74 | 75 | .token.boolean, 76 | .token.number, 77 | .token.function { 78 | color: #f08d49; 79 | } 80 | 81 | .token.property, 82 | .token.class-name, 83 | .token.constant, 84 | .token.symbol { 85 | color: #f8c555; 86 | } 87 | 88 | .token.selector, 89 | .token.important, 90 | .token.atrule, 91 | .token.keyword, 92 | .token.builtin { 93 | color: #cc99cd; 94 | } 95 | 96 | .token.string, 97 | .token.char, 98 | .token.attr-value, 99 | .token.regex, 100 | .token.variable { 101 | color: #7ec699; 102 | } 103 | 104 | .token.operator, 105 | .token.entity, 106 | .token.url { 107 | color: #67cdcc; 108 | } 109 | 110 | .token.important, 111 | .token.bold { 112 | font-weight: bold; 113 | } 114 | .token.italic { 115 | font-style: italic; 116 | } 117 | 118 | .token.entity { 119 | cursor: help; 120 | } 121 | 122 | .token.inserted { 123 | color: green; 124 | } 125 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap"); 2 | * { 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; } 5 | 6 | ::-moz-selection { 7 | background: #b444ff; } 8 | 9 | ::selection { 10 | background: #b444ff; } 11 | 12 | html { 13 | font-size: 16px; } 14 | 15 | body { 16 | font-family: "Roboto Mono", monospace; } 17 | 18 | p { 19 | max-width: 640px; 20 | margin-bottom: 2rem; } 21 | 22 | .header { 23 | margin-top: 2rem; 24 | margin-bottom: 3rem; } 25 | .header__title { 26 | text-transform: uppercase; 27 | font-weight: 700; 28 | word-wrap: break-word; 29 | margin-top: 1rem; 30 | margin-bottom: 1rem; } 31 | .header__title h1 { 32 | margin: 1rem 0; } 33 | .header__menu { 34 | display: -webkit-box; 35 | display: -ms-flexbox; 36 | display: flex; 37 | -webkit-box-orient: vertical; 38 | -webkit-box-direction: normal; 39 | -ms-flex-direction: column; 40 | flex-direction: column; 41 | -webkit-box-pack: end; 42 | -ms-flex-pack: end; 43 | justify-content: flex-end; 44 | -webkit-box-align: end; 45 | -ms-flex-align: end; 46 | align-items: flex-end; } 47 | @media screen and (max-width: 1020px) { 48 | .header__menu { 49 | -webkit-box-align: start; 50 | -ms-flex-align: start; 51 | align-items: flex-start; } } 52 | .header__menu__item { 53 | display: -webkit-box; 54 | display: -ms-flexbox; 55 | display: flex; 56 | margin: 2rem 0 2rem; 57 | padding: 0; 58 | list-style-type: none; } 59 | .header__menu__item li { 60 | margin-right: 28px; } 61 | .header__menu__item li:last-child { 62 | margin-right: 0; } 63 | .header__menu__item li a { 64 | color: black; 65 | text-transform: uppercase; 66 | -webkit-transition: all 0.16s ease; 67 | -o-transition: all 0.16s ease; 68 | transition: all 0.16s ease; } 69 | .header__menu__item li a:hover { 70 | color: #f45; } 71 | 72 | .g-c { 73 | height: 112px; } 74 | 75 | .about-section { 76 | margin-top: 3rem; 77 | margin-bottom: 3rem; } 78 | .about-section h1 { 79 | text-transform: uppercase; 80 | font-weight: 500; 81 | margin-bottom: 24px; } 82 | .about-section__option { 83 | margin-bottom: 20px; } 84 | .about-section__option h3 { 85 | padding-right: 16px; 86 | margin-bottom: 24px; } 87 | .about-section__option p { 88 | padding-right: 16px; 89 | font-size: 0.9rem; 90 | line-height: 160%; } 91 | 92 | .switcher-wrap { 93 | display: -webkit-box; 94 | display: -ms-flexbox; 95 | display: flex; 96 | -webkit-box-align: center; 97 | -ms-flex-align: center; 98 | align-items: center; 99 | margin-bottom: 1rem; } 100 | .switcher-wrap__text { 101 | margin-right: 16px; 102 | font-size: 16px; 103 | text-transform: uppercase; 104 | opacity: 0.4; } 105 | 106 | .switcher { 107 | cursor: pointer; 108 | position: relative; 109 | width: 70px; 110 | border-radius: 100px; 111 | border: 3px solid #ff4343; 112 | display: -webkit-box; 113 | display: -ms-flexbox; 114 | display: flex; 115 | padding: 4px; 116 | -webkit-transition: all 0.16s ease; 117 | -o-transition: all 0.16s ease; 118 | transition: all 0.16s ease; } 119 | .switcher_on { 120 | border: 3px solid #00d181; } 121 | .switcher:hover { 122 | background: rgba(255, 230, 0, 0.3); } 123 | .switcher__thumb { 124 | width: 18px; 125 | height: 18px; 126 | background: #333; 127 | border-radius: 100px; 128 | -webkit-transition: all 0.16s ease; 129 | -o-transition: all 0.16s ease; 130 | transition: all 0.16s ease; } 131 | .switcher__thumb_on { 132 | -webkit-transform: translateX(38px); 133 | -ms-transform: translateX(38px); 134 | transform: translateX(38px); } 135 | 136 | .html-preview { 137 | margin-bottom: 2rem; 138 | border-radius: 8px; 139 | display: none; } 140 | 141 | .inline-code { 142 | background: #333; 143 | padding: 0.6rem 1rem !important; } 144 | 145 | .footer { 146 | padding-top: 2rem; 147 | padding-bottom: 2rem; } 148 | .footer p { 149 | max-width: 100%; 150 | text-align: right; 151 | font-size: 14px; 152 | opacity: 0.7; } 153 | -------------------------------------------------------------------------------- /fav/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/tiny-flexbox-grid-system/c505975a18afc1473846e6a014111d9e52f559a2/fav/apple-touch-icon.png -------------------------------------------------------------------------------- /fav/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/tiny-flexbox-grid-system/c505975a18afc1473846e6a014111d9e52f559a2/fav/favicon-16x16.png -------------------------------------------------------------------------------- /fav/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/tiny-flexbox-grid-system/c505975a18afc1473846e6a014111d9e52f559a2/fav/favicon-32x32.png -------------------------------------------------------------------------------- /fav/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/tiny-flexbox-grid-system/c505975a18afc1473846e6a014111d9e52f559a2/fav/favicon.ico -------------------------------------------------------------------------------- /grid.scss.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/tiny-flexbox-grid-system/c505975a18afc1473846e6a014111d9e52f559a2/grid.scss.zip -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tiny Flexbox Grid System 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
Tiny percentage SCSS flexbox grid system
21 |
22 | 27 |
Show HTML Layout 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | 
<div class="grid">
 37 |   <div class="col-desk-12 col-tab-4 col-mob-2"></div>
 38 |   <div class="col-desk-4 col-tab-5 col-mob-2"></div>
 39 |   <div class="col-desk-3 col-tab-3 col-mob-4"></div>
 40 |   <div class="col-desk-2 col-mob-2"></div>
 41 |   <div class="col-desk-3 col-mob-2"></div>
 42 |   <div class="col-desk-1 col-mob-2"></div>
 43 |   <div class="col-desk-4 col-desk-shift-1 col-tab-shift-0 col-tab-6 col-mob-2"></div>
 44 |   <div class="col-desk-4 col-mob-3"></div>
 45 |   <div class="col-desk-2 col-mob-1"></div>
 46 |   <div class="col-desk-1 col-mob-1"></div>
 47 |   <div class="col-desk-1 col-mob-3"></div>
 48 |   <div class="col-desk-1 col-mob-1"></div>
 49 |   <div class="col-desk-2 col-mob-1"></div>
 50 |   <div class="col-desk-2 col-desk-shift-1 col-tab-shift-0 col-tab-1 col-mob-1"></div>
 51 |   <div class="col-desk-1 col-tab-7 col-mob-1"></div>
 52 |   <div class="col-desk-3 col-tab-5 col-mob-4"></div>
 53 | </div>
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |

Options

108 |
109 |

Properties in variables

110 |

Adjust any grid props, whatever you like from column size to gutters and columns amount.

111 |
112 |
113 |

Flexible units

114 |

You don't need to thing about the grid or columns flexibility. Grid contains functions that automaticly will translate PX units into `%`.

115 |
116 |
117 |

Shift column option

118 |

If you need to pass one or more columns, shift it, you can use a special class — for instance if you want to pass 2 columns `col-desk-shift-2`.

119 |
120 |
121 |

Nesting Option

122 |

There is two ways for nesting grids. The first option — you can use regular `grid` class for a wrapper and your wrapper will have side margins or you can ise `grid-0` class, this class has all props of the regular `grid` class but with 100% width without side margins.

123 |
124 |
125 |

3 breakpoint

126 |

The grid has 3 breakpoints — for desktop, tablet and mobile. Because all props written as variables you can adjust or even add aditional.

127 |
128 |
129 |
130 |
131 |
132 |

Instalation

133 |

Download the grid.css and add it to your HTML.

<link rel="stylesheet" href="css/grid.css"> 134 |
135 |
136 |

Usage

137 |

There are three types of classes to controll your layout. Desktop breakpoint class="col-desk-12" Tablet breakpoint class="col-tab-12" Mobile breakpoint class="col-tab-4". By default max columnt amount for desktop and tablet is 12 and for mobile is 4, but you can change them in variables.

138 |
139 |
140 |

Avalible variables

141 |

There are also three types of variables, for desktop, tablet and mobile breakpoint.

142 | 
$grid-columns: #px;
143 | $grid-sideMargin: #px;
144 | $grid-gutter: #px;
145 | $grid-breakpoint: #px;
146 |
147 |
148 |
149 |
150 | 153 |
154 |
155 | 156 | 157 | -------------------------------------------------------------------------------- /js/general.js: -------------------------------------------------------------------------------- 1 | $(".switcher").click(function() { 2 | console.log("sd"); 3 | $(".switcher__thumb").toggleClass("switcher__thumb_on"); 4 | $(this).toggleClass("switcher_on"); 5 | $(".html-preview").slideToggle("fast"); 6 | }); 7 | -------------------------------------------------------------------------------- /js/prism.js: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.16.0 2 | https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript */ 3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(g){var c=/\blang(?:uage)?-([\w-]+)\b/i,a=0,C={manual:g.Prism&&g.Prism.manual,disableWorkerMessageHandler:g.Prism&&g.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof M?new M(e.type,C.util.encode(e.content),e.alias):Array.isArray(e)?e.map(C.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(k instanceof M)){if(f&&y!=a.length-1){if(c.lastIndex=v,!(x=c.exec(e)))break;for(var b=x.index+(h?x[1].length:0),w=x.index+x[0].length,A=y,P=v,O=a.length;A"+n.content+""},!g.document)return g.addEventListener&&(C.disableWorkerMessageHandler||g.addEventListener("message",function(e){var a=JSON.parse(e.data),n=a.language,t=a.code,r=a.immediateClose;g.postMessage(C.highlight(t,C.languages[n],n)),r&&g.close()},!1)),C;var e=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return e&&(C.filename=e.src,C.manual||e.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(C.highlightAll):window.setTimeout(C.highlightAll,16):document.addEventListener("DOMContentLoaded",C.highlightAll))),C}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var n={"included-cdata":{pattern://i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var i={};i[a]={pattern:RegExp("(<__[\\s\\S]*?>)(?:\\s*|[\\s\\S])*?(?=<\\/__>)".replace(/__/g,a),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",i)}}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 5 | !function(s){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/@[\w-]+/}},url:{pattern:RegExp("url\\((?:"+t.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+t.source+")*?(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var e=s.languages.markup;e&&(e.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:e.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:s.languages.css}},alias:"language-css"}},e.tag))}(Prism); 6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.])\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=\s*($|[\r\n,.;})\]]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript; 8 | -------------------------------------------------------------------------------- /prepros-6.config: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tiny-flexbox-grid-system", 3 | "firstRun": false, 4 | "exportConfig": true, 5 | "fileConfigs": [ 6 | { 7 | "path": "scss/grid.scss", 8 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"css/grid.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 9 | }, 10 | { 11 | "path": "README.md", 12 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"compiler-markdown\":{\"enabled\":true,\"sanitize\":false,\"githubFlavored\":true,\"wrapWithHtml\":true}}" 13 | } 14 | ], 15 | "fileTree": { 16 | "expandedDirs": [ 17 | "scss" 18 | ], 19 | "hideSystemFiles": true, 20 | "systemFiles": [ 21 | ".*", 22 | "desktop.ini", 23 | "prepros.config", 24 | "$RECYCLE.BIN", 25 | "prepros.cfg", 26 | "prepros-6.config", 27 | "Prepros Export" 28 | ], 29 | "hideUnwatchedFiles": false 30 | }, 31 | "imports": [], 32 | "projectView": { 33 | "selectedView": "file-tree" 34 | }, 35 | "fileWatcher": { 36 | "enabled": true, 37 | "watchedExtensions": [ 38 | "less", 39 | "sass", 40 | "scss", 41 | "styl", 42 | "md", 43 | "markdown", 44 | "coffee", 45 | "js", 46 | "jade", 47 | "haml", 48 | "slim", 49 | "ls", 50 | "kit", 51 | "png", 52 | "jpg", 53 | "jpeg", 54 | "ts", 55 | "pug", 56 | "css", 57 | "html", 58 | "htm", 59 | "php" 60 | ] 61 | }, 62 | "pathFilters": [ 63 | "node_modules", 64 | ".*", 65 | "bower_components", 66 | "prepros.config", 67 | "Prepros Export", 68 | "prepros-6.config", 69 | "prepros.cfg", 70 | "wp-admin", 71 | "wp-includes" 72 | ], 73 | "server": { 74 | "port": 7880, 75 | "assignNewPortAutomatically": true, 76 | "enable": true, 77 | "proxy": { 78 | "enable": false, 79 | "url": "" 80 | } 81 | }, 82 | "browser-sync": { 83 | "enable": false, 84 | "clicks": true, 85 | "forms": true, 86 | "scroll": true 87 | }, 88 | "live-reload": { 89 | "enable": true, 90 | "animate": true, 91 | "delay": 0 92 | }, 93 | "ftp-deploy": { 94 | "connectionType": "ftp", 95 | "remotePath": "", 96 | "uploadTimeout": 20000, 97 | "uploadOnChange": false, 98 | "ftp": { 99 | "secure": false, 100 | "keepAlive": true, 101 | "host": "", 102 | "port": 21, 103 | "user": "", 104 | "password": "" 105 | }, 106 | "sftp": { 107 | "host": "", 108 | "port": 22, 109 | "usePrivateKey": false, 110 | "username": "", 111 | "password": "", 112 | "privateKey": "", 113 | "passphrase": "" 114 | }, 115 | "pathFilters": [ 116 | "config.rb", 117 | "prepros.config", 118 | "prepros-6.config", 119 | "node_modules", 120 | "Prepros Export", 121 | ".git", 122 | ".idea", 123 | ".sass-cache", 124 | ".hg", 125 | ".svn", 126 | ".cache", 127 | ".DS_Store", 128 | "*.sass", 129 | "*.scss", 130 | "*.less", 131 | "*.pug", 132 | "*.jade", 133 | "*.styl", 134 | "*.haml", 135 | "*.slim", 136 | "*.coffee", 137 | "*.ls", 138 | "*.kit", 139 | "*.ts" 140 | ], 141 | "history": [] 142 | }, 143 | "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}", 144 | "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}", 145 | "autoprefixer": { 146 | "browsers": "last 5 versions" 147 | }, 148 | "file-type-pug": "{\"compilers\":[\"pug\"]}", 149 | "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}", 150 | "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}", 151 | "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}", 152 | "file-type-markdown": "{\"compilers\":[\"markdown\"]}", 153 | "file-type-haml": "{\"compilers\":[\"haml\"]}", 154 | "file-type-slim": "{\"compilers\":[\"slim\"]}", 155 | "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}", 156 | "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}", 157 | "file-type-kit": "{\"compilers\":[\"kit\"]}", 158 | "uglify-js": { 159 | "ie8": false, 160 | "compress": { 161 | "sequences": true, 162 | "properties": true, 163 | "dead_code": true, 164 | "drop_debugger": true, 165 | "unsafe": false, 166 | "unsafe_comps": false, 167 | "unsafe_math": false, 168 | "unsafe_proto": false, 169 | "unsafe_regexp": false, 170 | "conditionals": true, 171 | "comparisons": true, 172 | "evaluate": true, 173 | "booleans": true, 174 | "loops": true, 175 | "unused": true, 176 | "toplevel": false, 177 | "top_retain": "", 178 | "hoist_funs": true, 179 | "hoist_vars": false, 180 | "if_return": true, 181 | "join_vars": true, 182 | "collapse_vars": true, 183 | "reduce_vars": true, 184 | "warnings": true, 185 | "negate_iife": true, 186 | "pure_getters": false, 187 | "pure_funcs": [], 188 | "drop_console": false, 189 | "expression": false, 190 | "keep_fargs": true, 191 | "keep_fnames": false, 192 | "passes": 1, 193 | "keep_infinity": false, 194 | "side_effects": true, 195 | "global_defs": [] 196 | }, 197 | "output": { 198 | "ascii_only": false, 199 | "beautify": false, 200 | "comments": "", 201 | "indent_level": 4, 202 | "indent_start": 0, 203 | "inline_script": false, 204 | "keep_quoted_props": false, 205 | "max_line_len": false, 206 | "preamble": "", 207 | "preserve_line": false, 208 | "quote_keys": false, 209 | "quote_style": 0, 210 | "semicolons": true, 211 | "shebang": true, 212 | "width": 80 213 | } 214 | }, 215 | "cssnext": { 216 | "customProperties": true, 217 | "applyRule": true, 218 | "calc": false, 219 | "nesting": true, 220 | "customMedia": true, 221 | "mediaQueriesRange": true, 222 | "customSelectors": true, 223 | "attributeCaseInsensitive": true, 224 | "colorRebeccapurple": true, 225 | "colorHwb": true, 226 | "colorGray": true, 227 | "colorHexAlpha": true, 228 | "colorFunction": true, 229 | "fontVariant": true, 230 | "filter": true, 231 | "initial": true, 232 | "rem": true, 233 | "pseudoElements": true, 234 | "pseudoClassMatches": true, 235 | "pseudoClassNot": true, 236 | "pseudoClassAnyLink": true, 237 | "colorRgba": true, 238 | "overflowWrap": true 239 | }, 240 | "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}", 241 | "babel": { 242 | "useBabelRc": true, 243 | "presets": { 244 | "babel-preset-es2015": true 245 | }, 246 | "plugins": { 247 | "babel-plugin-syntax-jsx": true, 248 | "babel-plugin-transform-react-jsx": true, 249 | "babel-plugin-transform-async-to-generator": true, 250 | "babel-plugin-transform-class-properties": true, 251 | "babel-plugin-transform-object-rest-spread": true 252 | } 253 | }, 254 | "file-type-png": "{\"compilers\":[\"png\"]}", 255 | "file-type-jpg": "{\"compilers\":[\"jpg\"]}" 256 | } -------------------------------------------------------------------------------- /scss/grid.scss: -------------------------------------------------------------------------------- 1 | // FLEXBOX CSS GRID 2 | // by Laptev Pavel 3 | 4 | // VARiABLES 5 | // desktop grid 6 | $grid-desktop-columns: 12; 7 | $grid-desktop-sideMargin: 80px; 8 | $grid-desktop-gutter: 40px; 9 | $grid-desktop-breakpoint: 1400px; 10 | 11 | // tablet grid 12 | $grid-tablet-columns: 12; 13 | $grid-tablet-sideMargin: 60px; 14 | $grid-tablet-gutter: 30px; 15 | $grid-tablet-breakpoint: 1020px; 16 | 17 | // mobile grid 18 | $grid-mobile-columns: 4; 19 | $grid-mobile-sideMargin: 32px; 20 | $grid-mobile-gutter: 20px; 21 | $grid-mobile-breakpoint: 620px; 22 | 23 | // pixels to % variables 24 | $desk-grid-width: 100% - 25 | (($grid-desktop-sideMargin * 2 / $grid-desktop-breakpoint) * 100%); 26 | $tab-grid-width: 100% - 27 | (($grid-tablet-sideMargin * 2 / $grid-tablet-breakpoint) * 100%); 28 | $mob-grid-width: 100% - 29 | (($grid-mobile-sideMargin * 2 / $grid-mobile-breakpoint) * 100%); 30 | 31 | $desk-gutter: ( 32 | ( 33 | $grid-desktop-gutter / 34 | ($grid-desktop-breakpoint - ($grid-desktop-sideMargin * 2)) 35 | ) * 100% 36 | ); 37 | $tab-gutter: ( 38 | ( 39 | $grid-tablet-gutter / 40 | ($grid-tablet-breakpoint - ($grid-tablet-sideMargin * 2)) 41 | ) * 100% 42 | ); 43 | $mob-gutter: ( 44 | ( 45 | $grid-mobile-gutter / 46 | ($grid-mobile-breakpoint - ($grid-mobile-sideMargin * 2)) 47 | ) * 100% 48 | ); 49 | 50 | // FUNCTIONS AND MiXINS 51 | @function col-width($i, $columns) { 52 | @return 100% / $columns * $i; 53 | } 54 | 55 | @mixin col-props($i, $columns, $gutter) { 56 | box-sizing: border-box; 57 | width: col-width($i, $columns); 58 | padding-left: $gutter/2; 59 | padding-right: $gutter/2; 60 | } 61 | 62 | @mixin columns-loop($name, $columns, $gutter) { 63 | @for $i from 0 through $columns { 64 | &-#{$name}-#{$i} { 65 | @include col-props($i, $columns, $gutter); 66 | } 67 | &-#{$name}-shift-#{$i} { 68 | margin-left: col-width($i, $columns); 69 | } 70 | } 71 | } 72 | 73 | @mixin grid-base($width) { 74 | box-sizing: border-box; 75 | display: flex; 76 | margin-left: auto; 77 | margin-right: auto; 78 | flex-wrap: wrap; 79 | max-width: $grid-desktop-breakpoint; 80 | width: $width; 81 | } 82 | 83 | // CLASSES 84 | .grid { 85 | @include grid-base($desk-grid-width); 86 | @media screen and (max-width: $grid-tablet-breakpoint) { 87 | width: $tab-grid-width; 88 | } 89 | @media screen and (max-width: $grid-mobile-breakpoint) { 90 | width: $mob-grid-width; 91 | } 92 | &-0 { 93 | @include grid-base(100%); 94 | } 95 | } 96 | 97 | .col { 98 | @include columns-loop(desk, $grid-desktop-columns, $desk-gutter); 99 | @media screen and (max-width: $grid-tablet-breakpoint) { 100 | @include columns-loop(tab, $grid-tablet-columns, $tab-gutter); 101 | } 102 | @media screen and (max-width: $grid-mobile-breakpoint) { 103 | @include columns-loop(mob, $grid-mobile-columns, $mob-gutter); 104 | } 105 | } 106 | --------------------------------------------------------------------------------