├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bower.json ├── css ├── normalize.css └── style.css ├── dist ├── pills.css └── pills.min.css ├── gulpfile.js ├── img └── cover.png ├── index.html ├── package.json └── src ├── _mixins.scss ├── _reset.scss └── pills.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | *.map 4 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | img/ 3 | css/ 4 | npm-debug.log 5 | .DS_Store 6 | node_modules/ 7 | bower_components/ 8 | index.html 9 | .gitignore 10 | bower.json 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Rohit Kumar Rai 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. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pills 2 | 3 | > A simple, responsive, and tiny CSS grid for humans who don't like memorising all those cryptic codes like col-*-6 or something. 4 | > [View the Demo -->](http://arkpod.in/pills) 5 | 6 | ## Why? 7 | You must be thinking there are like a thousand grid frameworks. So why another one?? What's so special about this one?? 8 | 9 | Well, there are three types of people who use css grids in their own way - 10 | 11 | * First - The ones who just memorize the cryptic codes like col-md-6 or whatever from their favourite CSS Framework like Bootstrap or Foundation. And not long before, I too was in this category using Bootstrap's grid all the time. 12 | 13 | * Second - The ones who simplify the grids into simple partitions of the page. Like half of the page or one-third or something like that and process ahead with that. One of the best grid frameworks that is present for this category is [Gridism](http://cobyism.com/gridism/) which actually inspired me to create Pills in the first place. 14 | 15 | * Third - The ones who like to count number of rows and columns but in a simple, human-like language. 16 | 17 | 18 | ### My thoughts 19 | Trust me, Gridism is awesome and it simplifies stuff like anything. But still sometimes I felt the one-third, two-fifths, golden-small n all are a bit of confusing (_For me at least_). And Gridism is just a 5 column grid which can sometimes be a bit limiting compared to 12-column grids. 20 | 21 | > What if I wanted a simple 12-column layout and I could say that I want this div to be of size of **four columns** and another div in the same row with size of **eight columns**?? 22 | > What if I wanted to use offsets?? 23 | 24 | This made me think about a grid which will focus on both the Second and Third category of people. A grid which can be used like traditional row-column layout or the more contemporary thinking of dividing the page like half or one-third or something. 25 | 26 | So, Pills has two parts (Not literally, I mean there is just one file that is pills.css) - 27 | 28 | * First - This will have a 12 columns for that granular control but still would be simple enough like English language. 29 | 30 | * Second - Inspired by Gridism thinking and catering to people who think fractional division of page is simpler. 31 | 32 | 33 | ## Installation 34 | 35 | ### 1. Get the files 36 | 37 | The easiest way to use Pills in your project is via the [Bower](http://twitter.github.com/bower) package manager. 38 | 39 | ```sh 40 | bower install pills 41 | ``` 42 | 43 | Also, you can download it using npm. 44 | ```sh 45 | npm install pills 46 | ``` 47 | 48 | Otherwise, [download the zip folder from here](https://github.com/rohitkrai03/pills), extract it, and copy `dist/pills.min.css` into your project’s folder. Boom. Done. 49 | 50 | ### 2. Link the stylesheet 51 | 52 | Add the following stylesheet to your HTML’s `` section: 53 | 54 | ```html 55 | 56 | ``` 57 | 58 | **Note:** If you didn’t install using Bower, you need to adjust the path of the CSS file to match your file structure. 59 | 60 | ### 3. Viewport scale 61 | 62 | Add the following meta tag to your HTML’s `` section: 63 | 64 | ```html 65 | 66 | ``` 67 | 68 | Without this meta tag, mobiles and tablets might load your page as a scaled-down version of the desktop size, instead of resizing the content to match the device’s actual viewport width. 69 | 70 | ## Build 71 | Install npm dev dependencies. 72 | ```sh 73 | npm install 74 | ``` 75 | 76 | For compiling scss files and watching the changes. 77 | ```sh 78 | gulp 79 | ``` 80 | 81 | ## Usage 82 | 83 | ### 1. First 84 | 85 | A part of Pills is to build using `columns` classes which are inside of a `row` class. 86 | 87 | The `row` class encapsulates the `columns`. As Pills uses a twelve column grid, the `twelve columns` class will take up the whole of the row. 88 | ```html 89 |
90 |
91 |
92 |
93 | ``` 94 | 95 | 96 | You can mix it up however you like though. 97 | ```html 98 |
99 |
100 |
101 |
102 |
103 |
104 | ``` 105 | 106 | 107 | You can put a `row` class inside of a `column` class in order to nest `columns`. 108 | ```html 109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | ``` 122 | 123 | 124 | You can also offset a column as per your wish. 125 | ```html 126 |
127 |
128 |
129 | ``` 130 | 131 | 132 | 133 | 134 | ### 2. Second 135 | 136 | The second part of Pills consists of a five column layout with division of page in mind. If you want to strech the column to the whole page, just use `whole` along with `column` 137 | 138 | ```html 139 |
140 |
141 |
142 |
143 | ``` 144 | 145 | 146 | Using two halves of the page 147 | ```html 148 |
149 |
150 |
151 |
152 |
153 |
154 | ``` 155 | 156 | 157 | This can also be nested like above. 158 | ```html 159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 | ``` 172 | 173 | 174 | You can also offset a column as per your wish. 175 | ```html 176 |
177 |
178 |
179 | ``` 180 | 181 | 182 | ### 3. Other useful classes. 183 | 184 | ####For using different width for the rows. 185 | 186 | .wide - 1180px 187 | ```html 188 |
189 |
190 |
191 |
192 | ``` 193 | 194 | .wider - 1366px 195 | ```html 196 |
197 |
198 |
199 |
200 | ``` 201 | 202 | No max-width for the rows. 203 | ```html 204 |
205 |
206 |
207 |
208 | ``` 209 | 210 | ## Contributing 211 | I'd love to get contributions for this project. This is just my amateur attempt at doing something which came to my mind. I'm all up for criticism if i've done something wrong, but do help me correct those by contributing to this project. Fork at your will. 212 | 213 | ## License 214 | 215 | [LICENSE](https://github.com/rohitkrai03/pills/blob/gh-pages/LICENSE) (MIT). 216 | 217 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pills", 3 | "version": "v1.0.1", 4 | "author": "Rohit Rai", 5 | "homepage": "http://arkpod.in/pills", 6 | "main": ["dist/pills.css", "dist/pills.min.css"], 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/rohitkrai03/pills.git" 10 | }, 11 | "ignore": [ 12 | "**/.*", 13 | "index.html", 14 | "node_modules/", 15 | "bower_components/", 16 | "css/", 17 | "img/", 18 | "package.json", 19 | ".gitignore", 20 | ".npmignore" 21 | ], 22 | "license": "MIT" 23 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects `block` display not defined in IE6/7/8/9 & FF3. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* 26 | * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. 27 | */ 28 | 29 | audio, 30 | canvas, 31 | video { 32 | display: inline-block; 33 | *display: inline; 34 | *zoom: 1; 35 | } 36 | 37 | /* 38 | * Prevents modern browsers from displaying `audio` without controls. 39 | * Remove excess height in iOS5 devices. 40 | */ 41 | 42 | audio:not([controls]) { 43 | display: none; 44 | height: 0; 45 | } 46 | 47 | /* 48 | * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. 49 | * Known issue: no IE6 support. 50 | */ 51 | 52 | [hidden] { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /* 61 | * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using 62 | * `em` units. 63 | * 2. Prevents iOS text size adjust after orientation change, without disabling 64 | * user zoom. 65 | */ 66 | 67 | html { 68 | font-size: 100%; /* 1 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | -ms-text-size-adjust: 100%; /* 2 */ 71 | } 72 | 73 | /* 74 | * Addresses `font-family` inconsistency between `textarea` and other form 75 | * elements. 76 | */ 77 | 78 | html, 79 | button, 80 | input, 81 | select, 82 | textarea { 83 | font-family: sans-serif; 84 | } 85 | 86 | /* 87 | * Addresses margins handled incorrectly in IE6/7. 88 | */ 89 | 90 | body { 91 | margin: 0; 92 | } 93 | 94 | /* ========================================================================== 95 | Links 96 | ========================================================================== */ 97 | 98 | /* 99 | * Addresses `outline` inconsistency between Chrome and other browsers. 100 | */ 101 | 102 | a:focus { 103 | outline: thin dotted; 104 | } 105 | 106 | /* 107 | * Improves readability when focused and also mouse hovered in all browsers. 108 | * people.opera.com/patrickl/experiments/keyboard/test 109 | */ 110 | 111 | a:active, 112 | a:hover { 113 | outline: 0; 114 | } 115 | 116 | /* ========================================================================== 117 | Typography 118 | ========================================================================== */ 119 | 120 | /* 121 | * Addresses font sizes and margins set differently in IE6/7. 122 | * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. 123 | */ 124 | 125 | h1 { 126 | font-size: 2em; 127 | margin: 0.67em 0; 128 | } 129 | 130 | h2 { 131 | font-size: 1.5em; 132 | margin: 0.83em 0; 133 | } 134 | 135 | h3 { 136 | font-size: 1.17em; 137 | margin: 1em 0; 138 | } 139 | 140 | h4 { 141 | font-size: 1em; 142 | margin: 1.33em 0; 143 | } 144 | 145 | h5 { 146 | font-size: 0.83em; 147 | margin: 1.67em 0; 148 | } 149 | 150 | h6 { 151 | font-size: 0.75em; 152 | margin: 2.33em 0; 153 | } 154 | 155 | /* 156 | * Addresses styling not present in IE7/8/9, S5, Chrome. 157 | */ 158 | 159 | abbr[title] { 160 | border-bottom: 1px dotted; 161 | } 162 | 163 | /* 164 | * Addresses style set to `bolder` in FF3+, S4/5, Chrome. 165 | */ 166 | 167 | b, 168 | strong { 169 | font-weight: bold; 170 | } 171 | 172 | blockquote { 173 | margin: 1em 40px; 174 | } 175 | 176 | /* 177 | * Addresses styling not present in S5, Chrome. 178 | */ 179 | 180 | dfn { 181 | font-style: italic; 182 | } 183 | 184 | /* 185 | * Addresses styling not present in IE6/7/8/9. 186 | */ 187 | 188 | mark { 189 | background: #ff0; 190 | color: #000; 191 | } 192 | 193 | /* 194 | * Addresses margins set differently in IE6/7. 195 | */ 196 | 197 | p, 198 | pre { 199 | margin: 1em 0; 200 | } 201 | 202 | /* 203 | * Corrects font family set oddly in IE6, S4/5, Chrome. 204 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 205 | */ 206 | 207 | code, 208 | kbd, 209 | pre, 210 | samp { 211 | font-family: monospace, serif; 212 | _font-family: 'courier new', monospace; 213 | font-size: 1em; 214 | } 215 | 216 | /* 217 | * Improves readability of pre-formatted text in all browsers. 218 | */ 219 | 220 | pre { 221 | white-space: pre; 222 | white-space: pre-wrap; 223 | word-wrap: break-word; 224 | } 225 | 226 | /* 227 | * Addresses CSS quotes not supported in IE6/7. 228 | */ 229 | 230 | q { 231 | quotes: none; 232 | } 233 | 234 | /* 235 | * Addresses `quotes` property not supported in S4. 236 | */ 237 | 238 | q:before, 239 | q:after { 240 | content: ''; 241 | content: none; 242 | } 243 | 244 | small { 245 | font-size: 75%; 246 | } 247 | 248 | /* 249 | * Prevents `sub` and `sup` affecting `line-height` in all browsers. 250 | * gist.github.com/413930 251 | */ 252 | 253 | sub, 254 | sup { 255 | font-size: 75%; 256 | line-height: 0; 257 | position: relative; 258 | vertical-align: baseline; 259 | } 260 | 261 | sup { 262 | top: -0.5em; 263 | } 264 | 265 | sub { 266 | bottom: -0.25em; 267 | } 268 | 269 | /* ========================================================================== 270 | Lists 271 | ========================================================================== */ 272 | 273 | /* 274 | * Addresses margins set differently in IE6/7. 275 | */ 276 | 277 | dl, 278 | menu, 279 | ol, 280 | ul { 281 | margin: 1em 0; 282 | } 283 | 284 | dd { 285 | margin: 0 0 0 40px; 286 | } 287 | 288 | /* 289 | * Addresses paddings set differently in IE6/7. 290 | */ 291 | 292 | menu, 293 | ol, 294 | ul { 295 | padding: 0 0 0 40px; 296 | } 297 | 298 | /* 299 | * Corrects list images handled incorrectly in IE7. 300 | */ 301 | 302 | nav ul, 303 | nav ol { 304 | list-style: none; 305 | list-style-image: none; 306 | } 307 | 308 | /* ========================================================================== 309 | Embedded content 310 | ========================================================================== */ 311 | 312 | /* 313 | * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. 314 | * 2. Improves image quality when scaled in IE7. 315 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 316 | */ 317 | 318 | img { 319 | border: 0; /* 1 */ 320 | -ms-interpolation-mode: bicubic; /* 2 */ 321 | } 322 | 323 | /* 324 | * Corrects overflow displayed oddly in IE9. 325 | */ 326 | 327 | svg:not(:root) { 328 | overflow: hidden; 329 | } 330 | 331 | /* ========================================================================== 332 | Figures 333 | ========================================================================== */ 334 | 335 | /* 336 | * Addresses margin not present in IE6/7/8/9, S5, O11. 337 | */ 338 | 339 | figure { 340 | margin: 0; 341 | } 342 | 343 | /* ========================================================================== 344 | Forms 345 | ========================================================================== */ 346 | 347 | /* 348 | * Corrects margin displayed oddly in IE6/7. 349 | */ 350 | 351 | form { 352 | margin: 0; 353 | } 354 | 355 | /* 356 | * Define consistent border, margin, and padding. 357 | */ 358 | 359 | fieldset { 360 | border: 1px solid #c0c0c0; 361 | margin: 0 2px; 362 | padding: 0.35em 0.625em 0.75em; 363 | } 364 | 365 | /* 366 | * 1. Corrects color not being inherited in IE6/7/8/9. 367 | * 2. Corrects text not wrapping in FF3. 368 | * 3. Corrects alignment displayed oddly in IE6/7. 369 | */ 370 | 371 | legend { 372 | border: 0; /* 1 */ 373 | padding: 0; 374 | white-space: normal; /* 2 */ 375 | *margin-left: -7px; /* 3 */ 376 | } 377 | 378 | /* 379 | * 1. Corrects font size not being inherited in all browsers. 380 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. 381 | * 3. Improves appearance and consistency in all browsers. 382 | */ 383 | 384 | button, 385 | input, 386 | select, 387 | textarea { 388 | font-size: 100%; /* 1 */ 389 | margin: 0; /* 2 */ 390 | vertical-align: baseline; /* 3 */ 391 | *vertical-align: middle; /* 3 */ 392 | } 393 | 394 | /* 395 | * Addresses FF3/4 setting `line-height` on `input` using `!important` in the 396 | * UA stylesheet. 397 | */ 398 | 399 | button, 400 | input { 401 | line-height: normal; 402 | } 403 | 404 | /* 405 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 406 | * and `video` controls. 407 | * 2. Corrects inability to style clickable `input` types in iOS. 408 | * 3. Improves usability and consistency of cursor style between image-type 409 | * `input` and others. 410 | * 4. Removes inner spacing in IE7 without affecting normal text inputs. 411 | * Known issue: inner spacing remains in IE6. 412 | */ 413 | 414 | button, 415 | html input[type="button"], /* 1 */ 416 | input[type="reset"], 417 | input[type="submit"] { 418 | -webkit-appearance: button; /* 2 */ 419 | cursor: pointer; /* 3 */ 420 | *overflow: visible; /* 4 */ 421 | } 422 | 423 | /* 424 | * Re-set default cursor for disabled elements. 425 | */ 426 | 427 | button[disabled], 428 | input[disabled] { 429 | cursor: default; 430 | } 431 | 432 | /* 433 | * 1. Addresses box sizing set to content-box in IE8/9. 434 | * 2. Removes excess padding in IE8/9. 435 | * 3. Removes excess padding in IE7. 436 | * Known issue: excess padding remains in IE6. 437 | */ 438 | 439 | input[type="checkbox"], 440 | input[type="radio"] { 441 | box-sizing: border-box; /* 1 */ 442 | padding: 0; /* 2 */ 443 | *height: 13px; /* 3 */ 444 | *width: 13px; /* 3 */ 445 | } 446 | 447 | /* 448 | * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. 449 | * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` 450 | * to future-proof). 451 | */ 452 | 453 | input[type="search"] { 454 | -webkit-appearance: textfield; /* 1 */ 455 | -moz-box-sizing: content-box; 456 | -webkit-box-sizing: content-box; /* 2 */ 457 | box-sizing: content-box; 458 | } 459 | 460 | /* 461 | * Removes inner padding and search cancel button in S5, Chrome on OS X. 462 | */ 463 | 464 | input[type="search"]::-webkit-search-cancel-button, 465 | input[type="search"]::-webkit-search-decoration { 466 | -webkit-appearance: none; 467 | } 468 | 469 | /* 470 | * Removes inner padding and border in FF3+. 471 | */ 472 | 473 | button::-moz-focus-inner, 474 | input::-moz-focus-inner { 475 | border: 0; 476 | padding: 0; 477 | } 478 | 479 | /* 480 | * 1. Removes default vertical scrollbar in IE6/7/8/9. 481 | * 2. Improves readability and alignment in all browsers. 482 | */ 483 | 484 | textarea { 485 | overflow: auto; /* 1 */ 486 | vertical-align: top; /* 2 */ 487 | } 488 | 489 | /* ========================================================================== 490 | Tables 491 | ========================================================================== */ 492 | 493 | /* 494 | * Remove most spacing between table cells. 495 | */ 496 | 497 | table { 498 | border-collapse: collapse; 499 | border-spacing: 0; 500 | } 501 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | -webkit-transition: all .25s ease-in-out; 4 | -moz-transition: all .25s ease-in-out; 5 | transition: all .25s ease-in-out ; 6 | } 7 | 8 | 9 | html, body 10 | { 11 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 12 | font-size: 85%; 13 | color: #4b5554; 14 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 15 | 16 | } 17 | 18 | .cover 19 | { 20 | width: 100%; 21 | height: 368px; 22 | margin: 0; 23 | padding: 0; 24 | 25 | background: url('../img/cover.png') no-repeat top center fixed; 26 | background-color: #ffebee; 27 | } 28 | 29 | nav li 30 | { 31 | display: inline-block; 32 | 33 | list-style: none; 34 | } 35 | 36 | 37 | .nav-main, 38 | .nav-credits 39 | { 40 | float: right; 41 | } 42 | 43 | .nav-main li, 44 | .nav-credits li 45 | { 46 | margin-left: 1.85em; 47 | } 48 | 49 | .spotlight 50 | { 51 | text-align: center; 52 | } 53 | 54 | a 55 | { 56 | text-decoration: none; 57 | text-transform: uppercase; 58 | color: #69706f; 59 | } 60 | 61 | a:hover 62 | { 63 | color: #000; 64 | } 65 | 66 | header 67 | { 68 | padding: 30px 0; 69 | } 70 | 71 | .spotlight h1 72 | { 73 | font-size: 2.5em; 74 | font-weight: 100; 75 | margin-bottom: 1em; 76 | } 77 | .spotlight h1 strong 78 | { 79 | display: inline; 80 | font-weight: 500; 81 | } 82 | 83 | .spotlight h2 84 | { 85 | font-size: 1.25em; 86 | font-weight: 300; 87 | line-height: 1.5em; 88 | margin-bottom: 5em; 89 | } 90 | 91 | .spotlight-image 92 | { 93 | margin: 8em 0 10em; 94 | padding: 0; 95 | } 96 | .social li 97 | { 98 | float: left; 99 | 100 | margin-right: 1em; 101 | } 102 | .logo 103 | { 104 | display: block; 105 | padding: .5em 0; 106 | } 107 | .nav-main li a 108 | { 109 | display: block; 110 | padding: .5em 1.5em; 111 | border: 1.5px solid #15cab8; 112 | border-radius: 60px; 113 | } 114 | 115 | 116 | .nav-main li a:hover 117 | { 118 | color: #111; 119 | border: 1.5px solid #FF8A80; 120 | } 121 | 122 | 123 | 124 | 125 | 126 | 127 | /* Styles to help demonstrate the grid */ 128 | 129 | code, 130 | pre 131 | { 132 | font-family: 'Source Code Pro', Consolas, Menlo, Monaco, monospace; 133 | padding: 3px; 134 | color: #333; 135 | border-radius: 5px; 136 | background: #E0F2F1; 137 | } 138 | 139 | pre 140 | { 141 | padding: 10px; 142 | text-align: center; 143 | } 144 | 145 | .demo p 146 | { 147 | margin: 0; 148 | } 149 | 150 | .demo .column pre 151 | { 152 | margin: 0; 153 | padding: 20px 0; 154 | 155 | -webkit-transition: all .2s ease-in-out; 156 | -moz-transition: all .2s ease-in-out; 157 | transition: all .2s ease-in-out; 158 | } 159 | 160 | .demo .column pre:hover 161 | { 162 | background: #A7FFEB; 163 | } 164 | 165 | .grid, 166 | .column 167 | { 168 | -webkit-transition: all .25s ease-in-out; 169 | -moz-transition: all .25s ease-in-out; 170 | transition: all .25s ease-in-out; 171 | } 172 | 173 | .demo .column .grid 174 | { 175 | overflow: hidden; 176 | 177 | background: rgba(241,227,213,.5); 178 | } 179 | 180 | .demo .column .row:first-child 181 | { 182 | border-radius: 5px 5px 0 0; 183 | } 184 | 185 | .demo .column .row:last-child 186 | { 187 | border-radius: 0 0 5px 5px; 188 | } 189 | 190 | p code{ 191 | display: inline-block; 192 | margin-top: 5px; 193 | } 194 | 195 | -------------------------------------------------------------------------------- /dist/pills.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Pills 3 | * A simple, responsive, and tiny CSS grid for humans who don't like memorising all those cryptic codes like col-*-6 or something. 4 | * https://github.com/rohitkrai03/pills 5 | * Copyright 2015, Rohit Rai 6 | */ 7 | html, body { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | *, *:after, *:before { 13 | -webkit-box-sizing: border-box; 14 | -moz-box-sizing: border-box; 15 | box-sizing: border-box; 16 | } 17 | 18 | .row { 19 | display: block; 20 | margin: 0 auto; 21 | max-width: 1024px; 22 | overflow: hidden; 23 | *zoom: 1; 24 | } 25 | 26 | .row::before, .row::after { 27 | content: ""; 28 | display: table; 29 | line-height: 0; 30 | } 31 | 32 | .row::after { 33 | clear: both; 34 | } 35 | 36 | .row .row { 37 | max-width: 100%; 38 | min-width: 100%; 39 | } 40 | 41 | .row .column, 42 | .row .columns { 43 | float: left; 44 | padding: 10px; 45 | width: 100%; 46 | } 47 | 48 | .row .column:first-of-type, 49 | .row .columns:first-of-type { 50 | padding-left: 20px; 51 | } 52 | 53 | .row .column:last-of-type, 54 | .row .columns:last-of-type { 55 | padding-right: 20px; 56 | } 57 | 58 | .wide { 59 | max-width: 1180px; 60 | } 61 | 62 | .wider { 63 | max-width: 1366px; 64 | } 65 | 66 | .free-width { 67 | max-width: none; 68 | } 69 | 70 | .column img, 71 | .columns img { 72 | max-width: 100%; 73 | } 74 | 75 | .column .column:first-of-type, 76 | .column .columns:first-of-type, 77 | .columns .column:first-of-type, 78 | .columns .columns:first-of-type { 79 | padding-left: 0; 80 | } 81 | 82 | .column .column:last-of-type, 83 | .column .columns:last-of-type, 84 | .columns .column:last-of-type, 85 | .columns .columns:last-of-type { 86 | padding-right: 0; 87 | } 88 | 89 | .column .row:first-of-type > .column, 90 | .column .row:first-of-type > .columns, 91 | .columns .row:first-of-type > .column, 92 | .columns .row:first-of-type > .columns { 93 | padding-top: 0; 94 | } 95 | 96 | .column .row:last-of-type > .column, 97 | .column .row:last-of-type > .columns, 98 | .columns .row:last-of-type > .column, 99 | .columns .row:last-of-type > .columns { 100 | padding-bottom: 0; 101 | } 102 | 103 | .column.no-padding, 104 | .columns.no-padding { 105 | padding-left: 0 !important; 106 | padding-right: 0 !important; 107 | } 108 | 109 | .column.one, 110 | .columns.one { 111 | width: 8.33333%; 112 | } 113 | 114 | .column.two, 115 | .columns.two { 116 | width: 16.66667%; 117 | } 118 | 119 | .column.three, 120 | .columns.three { 121 | width: 25%; 122 | } 123 | 124 | .column.four, 125 | .columns.four { 126 | width: 33.33333%; 127 | } 128 | 129 | .column.five, 130 | .columns.five { 131 | width: 41.66667%; 132 | } 133 | 134 | .column.six, 135 | .columns.six { 136 | width: 50%; 137 | } 138 | 139 | .column.seven, 140 | .columns.seven { 141 | width: 58.33333%; 142 | } 143 | 144 | .column.eight, 145 | .columns.eight { 146 | width: 66.66667%; 147 | } 148 | 149 | .column.nine, 150 | .columns.nine { 151 | width: 75%; 152 | } 153 | 154 | .column.ten, 155 | .columns.ten { 156 | width: 83.33333%; 157 | } 158 | 159 | .column.eleven, 160 | .columns.eleven { 161 | width: 91.66667%; 162 | } 163 | 164 | .column.twelve, 165 | .columns.twelve { 166 | width: 100%; 167 | } 168 | 169 | .column.whole, .column.w-1-1, 170 | .columns.whole, 171 | .columns.w-1-1 { 172 | width: 100%; 173 | } 174 | 175 | .column.half, .column.w-1-2, 176 | .columns.half, 177 | .columns.w-1-2 { 178 | width: 50%; 179 | } 180 | 181 | .column.one-third, .column.w-1-3, 182 | .columns.one-third, 183 | .columns.w-1-3 { 184 | width: 33.33333%; 185 | } 186 | 187 | .column.two-thirds, .column.w-2-3, 188 | .columns.two-thirds, 189 | .columns.w-2-3 { 190 | width: 66.66667%; 191 | } 192 | 193 | .column.one-quarter, .column.one-fourth, .column.w-1-4, 194 | .columns.one-quarter, 195 | .columns.one-fourth, 196 | .columns.w-1-4 { 197 | width: 25%; 198 | } 199 | 200 | .column.three-quarters, .column.three-fourths, .column.w-3-4, 201 | .columns.three-quarters, 202 | .columns.three-fourths, 203 | .columns.w-3-4 { 204 | width: 75%; 205 | } 206 | 207 | .column.one-fifth, .column.w-1-5, 208 | .columns.one-fifth, 209 | .columns.w-1-5 { 210 | width: 20%; 211 | } 212 | 213 | .column.two-fifths, .column.w-2-5, 214 | .columns.two-fifths, 215 | .columns.w-2-5 { 216 | width: 40%; 217 | } 218 | 219 | .column.three-fifths, .column.w-3-5, 220 | .columns.three-fifths, 221 | .columns.w-3-5 { 222 | width: 60%; 223 | } 224 | 225 | .column.four-fifths, .column.w-4-5, 226 | .columns.four-fifths, 227 | .columns.w-4-5 { 228 | width: 80%; 229 | } 230 | 231 | .offset.by-one { 232 | margin-left: 8.33333%; 233 | } 234 | 235 | .offset.by-two { 236 | margin-left: 16.66667%; 237 | } 238 | 239 | .offset.by-three { 240 | margin-left: 25%; 241 | } 242 | 243 | .offset.by-four { 244 | margin-left: 33.33333%; 245 | } 246 | 247 | .offset.by-five { 248 | margin-left: 41.66667%; 249 | } 250 | 251 | .offset.by-six { 252 | margin-left: 50%; 253 | } 254 | 255 | .offset.by-seven { 256 | margin-left: 58.33333%; 257 | } 258 | 259 | .offset.by-eight { 260 | margin-left: 66.66667%; 261 | } 262 | 263 | .offset.by-nine { 264 | margin-left: 75%; 265 | } 266 | 267 | .offset.by-ten { 268 | margin-left: 83.33333%; 269 | } 270 | 271 | .offset.by-eleven { 272 | margin-left: 91.66667%; 273 | } 274 | 275 | .offset.by-half { 276 | margin-left: 50%; 277 | } 278 | 279 | .offset.by-one-third { 280 | margin-left: 33.33333%; 281 | } 282 | 283 | .offset.by-two-thirds { 284 | margin-left: 66.66667%; 285 | } 286 | 287 | .offset.by-one-quarter, .offset.by-one-fourth { 288 | margin-left: 25%; 289 | } 290 | 291 | .offset.by-three-quarters, .offset.by-three-fourths { 292 | margin-left: 75%; 293 | } 294 | 295 | .offset.by-one-fifth { 296 | margin-left: 20%; 297 | } 298 | 299 | .offset.by-two-fifths { 300 | margin-left: 40%; 301 | } 302 | 303 | .offset.by-three-fifths { 304 | margin-left: 60%; 305 | } 306 | 307 | .offset.by-four-fifths { 308 | margin-left: 80%; 309 | } 310 | 311 | .align-center { 312 | text-align: center; 313 | } 314 | 315 | .align-left { 316 | text-align: left; 317 | } 318 | 319 | .align-right { 320 | text-align: right; 321 | } 322 | 323 | .pull-left { 324 | float: left; 325 | } 326 | 327 | .only-on-mobiles { 328 | display: none !important; 329 | } 330 | 331 | .hide { 332 | display: none !important; 333 | } 334 | 335 | .invisible { 336 | visibility: hidden; 337 | } 338 | 339 | @media screen and (max-width: 599px) { 340 | .row:not(.no-stacking-on-mobiles) > .column, 341 | .row:not(.no-stacking-on-mobiles) > .columns { 342 | padding-left: 20px; 343 | padding-right: 20px; 344 | width: 100% !important; 345 | } 346 | .column .row .column, 347 | .column .row .columns, 348 | .columns .row .column, 349 | .columns .row .columns { 350 | padding-left: 0px; 351 | padding-right: 0px; 352 | } 353 | .center-on-mobiles { 354 | text-align: center !important; 355 | } 356 | .hide-on-mobiles { 357 | display: none !important; 358 | } 359 | .only-on-mobiles { 360 | display: block !important; 361 | } 362 | } 363 | 364 | @media screen and (min-width: 1180px) { 365 | .wide .row, 366 | .row .wide { 367 | margin: 0 auto; 368 | max-width: 1180px; 369 | } 370 | } 371 | 372 | @media screen and (min-width: 1366px) { 373 | .wider .row, 374 | .row .wider { 375 | margin: 0 auto; 376 | max-width: 1366px; 377 | } 378 | } 379 | 380 | .show-for-landscape, 381 | .hide-for-portrait { 382 | display: block !important; 383 | } 384 | 385 | @media screen and (orientation: landscape) { 386 | .show-for-landscape, 387 | .hide-for-portrait { 388 | display: block !important; 389 | } 390 | } 391 | 392 | @media screen and (orientation: portrait) { 393 | .show-for-landscape, 394 | .hide-for-portrait { 395 | display: none !important; 396 | } 397 | } 398 | 399 | .hide-for-landscape, 400 | .show-for-portrait { 401 | display: none !important; 402 | } 403 | 404 | @media screen and (orientation: landscape) { 405 | .hide-for-landscape, 406 | .show-for-portrait { 407 | display: none !important; 408 | } 409 | } 410 | 411 | @media screen and (orientation: portrait) { 412 | .hide-for-landscape, 413 | .show-for-portrait { 414 | display: block !important; 415 | } 416 | } 417 | -------------------------------------------------------------------------------- /dist/pills.min.css: -------------------------------------------------------------------------------- 1 | html,body{margin:0;padding:0}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row{display:block;margin:0 auto;max-width:1024px;overflow:hidden;*zoom:1}.row::before,.row::after{content:"";display:table;line-height:0}.row::after{clear:both}.row .row{max-width:100%;min-width:100%}.row .column,.row .columns{float:left;padding:10px;width:100%}.row .column:first-of-type,.row .columns:first-of-type{padding-left:20px}.row .column:last-of-type,.row .columns:last-of-type{padding-right:20px}.wide{max-width:1180px}.wider{max-width:1366px}.free-width{max-width:none}.column img,.columns img{max-width:100%}.column .column:first-of-type,.column .columns:first-of-type,.columns .column:first-of-type,.columns .columns:first-of-type{padding-left:0}.column .column:last-of-type,.column .columns:last-of-type,.columns .column:last-of-type,.columns .columns:last-of-type{padding-right:0}.column .row:first-of-type>.column,.column .row:first-of-type>.columns,.columns .row:first-of-type>.column,.columns .row:first-of-type>.columns{padding-top:0}.column .row:last-of-type>.column,.column .row:last-of-type>.columns,.columns .row:last-of-type>.column,.columns .row:last-of-type>.columns{padding-bottom:0}.column.no-padding,.columns.no-padding{padding-left:0 !important;padding-right:0 !important}.column.one,.columns.one{width:8.33333%}.column.two,.columns.two{width:16.66667%}.column.three,.columns.three{width:25%}.column.four,.columns.four{width:33.33333%}.column.five,.columns.five{width:41.66667%}.column.six,.columns.six{width:50%}.column.seven,.columns.seven{width:58.33333%}.column.eight,.columns.eight{width:66.66667%}.column.nine,.columns.nine{width:75%}.column.ten,.columns.ten{width:83.33333%}.column.eleven,.columns.eleven{width:91.66667%}.column.twelve,.columns.twelve{width:100%}.column.whole,.column.w-1-1,.columns.whole,.columns.w-1-1{width:100%}.column.half,.column.w-1-2,.columns.half,.columns.w-1-2{width:50%}.column.one-third,.column.w-1-3,.columns.one-third,.columns.w-1-3{width:33.33333%}.column.two-thirds,.column.w-2-3,.columns.two-thirds,.columns.w-2-3{width:66.66667%}.column.one-quarter,.column.one-fourth,.column.w-1-4,.columns.one-quarter,.columns.one-fourth,.columns.w-1-4{width:25%}.column.three-quarters,.column.three-fourths,.column.w-3-4,.columns.three-quarters,.columns.three-fourths,.columns.w-3-4{width:75%}.column.one-fifth,.column.w-1-5,.columns.one-fifth,.columns.w-1-5{width:20%}.column.two-fifths,.column.w-2-5,.columns.two-fifths,.columns.w-2-5{width:40%}.column.three-fifths,.column.w-3-5,.columns.three-fifths,.columns.w-3-5{width:60%}.column.four-fifths,.column.w-4-5,.columns.four-fifths,.columns.w-4-5{width:80%}.offset.by-one{margin-left:8.33333%}.offset.by-two{margin-left:16.66667%}.offset.by-three{margin-left:25%}.offset.by-four{margin-left:33.33333%}.offset.by-five{margin-left:41.66667%}.offset.by-six{margin-left:50%}.offset.by-seven{margin-left:58.33333%}.offset.by-eight{margin-left:66.66667%}.offset.by-nine{margin-left:75%}.offset.by-ten{margin-left:83.33333%}.offset.by-eleven{margin-left:91.66667%}.offset.by-half{margin-left:50%}.offset.by-one-third{margin-left:33.33333%}.offset.by-two-thirds{margin-left:66.66667%}.offset.by-one-quarter,.offset.by-one-fourth{margin-left:25%}.offset.by-three-quarters,.offset.by-three-fourths{margin-left:75%}.offset.by-one-fifth{margin-left:20%}.offset.by-two-fifths{margin-left:40%}.offset.by-three-fifths{margin-left:60%}.offset.by-four-fifths{margin-left:80%}.align-center{text-align:center}.align-left{text-align:left}.align-right{text-align:right}.pull-left{float:left}.only-on-mobiles{display:none !important}.hide{display:none !important}.invisible{visibility:hidden}@media screen and (max-width: 599px){.row:not(.no-stacking-on-mobiles)>.column,.row:not(.no-stacking-on-mobiles)>.columns{padding-left:20px;padding-right:20px;width:100% !important}.column .row .column,.column .row .columns,.columns .row .column,.columns .row .columns{padding-left:0px;padding-right:0px}.center-on-mobiles{text-align:center !important}.hide-on-mobiles{display:none !important}.only-on-mobiles{display:block !important}}@media screen and (min-width: 1180px){.wide .row,.row .wide{margin:0 auto;max-width:1180px}}@media screen and (min-width: 1366px){.wider .row,.row .wider{margin:0 auto;max-width:1366px}}.show-for-landscape,.hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.show-for-landscape,.hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.show-for-landscape,.hide-for-portrait{display:none !important}}.hide-for-landscape,.show-for-portrait{display:none !important}@media screen and (orientation: landscape){.hide-for-landscape,.show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.hide-for-landscape,.show-for-portrait{display:block !important}} 2 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var sass = require('gulp-sass'); 5 | var rename = require('gulp-rename'); 6 | 7 | gulp.task('sass', function () { 8 | return gulp.src('./src/pills.scss') 9 | .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError)) 10 | .pipe(gulp.dest('./dist')) 11 | .pipe(rename({suffix: '.min'})) 12 | .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError)) 13 | .pipe(gulp.dest('./dist')) 14 | }); 15 | 16 | gulp.task('watch', ['sass'], function () { 17 | gulp.watch('./src/*.scss', ['sass']); 18 | }); 19 | 20 | gulp.task('default', ['watch']); -------------------------------------------------------------------------------- /img/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohitkrai03/pills/6ded579db3af78da524f9285f6ff79c95cb64c99/img/cover.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A simple, responsive, and tiny CSS grid for humans - Pills 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |

Pills Demo

19 |
20 |
21 | 27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 | 35 | 36 | 37 |
38 |
39 |

Pills - A simple, responsive, and tiny CSS grid for humans.

40 |

4kb, Mobile First Grid System, HTML5 Boilerplate Head, Inspired by Simplicity and Control,
IE8+, Firefox, Chrome, Safari, Opera, Free to use and Abuse. 41 |

42 |
43 | 44 |
45 |
46 | 47 | 48 |
49 |
50 |

Part One

51 |
52 |
53 | 
.whole
54 |
55 |
56 |
57 |
58 | 
.half
59 |
60 |
61 | 
.half
62 |
63 |
64 |
65 |
66 | 
.one-third
67 |
68 |
69 | 
.two-thirds
70 |
71 |
72 |
73 |
74 | 
.one-quarter
75 |
76 |
77 | 
.three-quarters
78 |
79 |
80 |
81 |
82 | 
.one-fifth
83 |
84 |
85 | 
.four-fifths
86 |
87 |
88 |
89 |
90 | 
.two-fifths
91 |
92 |
93 | 
.three-fifths
94 |
95 |
96 |
97 |
98 |
99 |

Part Two

100 |
101 |
102 | 
.twelve
103 |
104 |
105 |
106 |
107 | 
.six
108 |
109 |
110 | 
.six
111 |
112 |
113 |
114 |
115 | 
.four
116 |
117 |
118 | 
.eight
119 |
120 |
121 |
122 |
123 | 
.three
124 |
125 |
126 | 
.two
127 |
128 |
129 | 
.seven
130 |
131 |
132 |
133 |
134 | 
.five
135 |
136 |
137 | 
.three
138 |
139 |
140 | 
.two
141 |
142 |
143 | 
.two
144 |
145 |
146 |
147 |
148 | 
.two
149 |
150 |
151 | 
.four
152 |
153 |
154 | 
.six
155 |
156 |
157 |
158 |
159 | 
.one
160 |
161 |
162 | 
.one
163 |
164 |
165 | 
.one
166 |
167 |
168 | 
.one
169 |
170 |
171 | 
.one
172 |
173 |
174 | 
.one
175 |
176 |
177 | 
.one
178 |
179 |
180 | 
.one
181 |
182 |
183 | 
.one
184 |
185 |
186 | 
.one
187 |
188 |
189 | 
.one
190 |
191 |
192 | 
.one
193 |
194 |
195 |
196 |
197 | 198 |
199 |
200 |
201 |

Download

202 |

You have two main options for using pills in your project.

203 |
204 |
205 |
206 |
207 |

A. bower or npm

208 |

Pills can be installed using the Bower or npm package manager.

209 | 
bower install pills
210 | 
npm install pills
211 |
212 |
213 |

B. Manual

214 |

Download the ZIP, extract the source code, and copy pills.min.css into your project’s directory.

215 |
216 |
217 |

Elsewise

218 |

Of course, you could also clone the repository using your terminal, or even add it as a submodule of your project.

219 |
220 |
221 |
222 |
223 |

Installation

224 |

Once you’ve acquired the pills source code, there’s a couple of other things you’ll probably want to do.

225 |
226 |
227 |
228 |
229 |

1. Stylesheet

230 |

Add the following stylesheet to the <head> section of your project’s HTML. If you didn’t use Bower, you may need to adjust the path to the CSS file to match your file structure.

231 | 
<link rel="stylesheet" href="bower_components/pills/dist/pills.min.css">
232 |
233 |
234 |
235 |
236 |

2. Viewport

237 |

Set the scale of your viewport to the width of the device. Placing the following tag in the <head> of your HTML ensures the viewport doesn’t load zoomed-out on mobiles and tablets.

238 | 
<meta name="viewport" content="width=device-width,initial-scale=1">
239 |
240 |
241 |
242 | 243 |
244 |
245 |
246 |
247 |

© Rohit Rai — All rights reserved.

248 |
249 |
250 |
251 |
252 |

This project is open-source and accepting pull requests. Fork at will.

253 |
254 |
255 |
256 |
257 | 258 | 268 | 269 | 270 | 271 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pills", 3 | "version": "1.0.1", 4 | "description": "A simple, responsive, and tiny CSS grid for humans.", 5 | "main": "dist/pills.min.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/rohitkrai03/pills.git" 9 | }, 10 | "keywords": [ 11 | "css", 12 | "grid", 13 | "responsive", 14 | "framework" 15 | ], 16 | "author": "Rohit Rai (http://arkpod.in/)", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/rohitkrai03/pills/issues" 20 | }, 21 | "homepage": "https://github.com/rohitkrai03/pills#readme", 22 | "devDependencies": { 23 | "gulp": "^3.9.1", 24 | "gulp-rename": "^1.2.2", 25 | "gulp-sass": "^2.3.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins to calculate column width and offset margin 2 | 3 | @mixin column-width($number-of-columns) { 4 | width: $number-of-columns / 12 * 100%; 5 | } 6 | 7 | @mixin fractional-column-width($numerator, $denominator) { 8 | width: $numerator / $denominator * 100%; 9 | } 10 | 11 | @mixin offset-margin($number-of-columns) { 12 | margin-left: $number-of-columns / 12 * 100%; 13 | } 14 | 15 | @mixin fractional-offset-margin($numerator, $denominator) { 16 | margin-left: $numerator / $denominator * 100%; 17 | } 18 | -------------------------------------------------------------------------------- /src/_reset.scss: -------------------------------------------------------------------------------- 1 | // Basic reset to start with 2 | 3 | html, body { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | *, *:after, *:before { 9 | -webkit-box-sizing: border-box; 10 | -moz-box-sizing: border-box; 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /src/pills.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Pills 3 | * A simple, responsive, and tiny CSS grid for humans who don't like memorising all those cryptic codes like col-*-6 or something. 4 | * https://github.com/rohitkrai03/pills 5 | * Copyright 2015, Rohit Rai 6 | */ 7 | 8 | @import "mixins"; 9 | @import "reset"; 10 | 11 | // the maximum width of the container in pixels 12 | $max-width: 1024px; 13 | 14 | $wide-max-width: 1180px; 15 | 16 | $wider-max-width: 1366px; 17 | 18 | // the minimum width of the container in pixels, before it switches to a mobile friendly display 19 | $min-width: 599px; 20 | 21 | // the padding that will be applied to both sides of a column in pixels, also known as gutter 22 | $padding-width: 10px; 23 | 24 | .row { 25 | display: block; 26 | margin: 0 auto; 27 | max-width: $max-width; 28 | overflow: hidden; 29 | *zoom: 1; 30 | 31 | &::before, 32 | &::after { 33 | content: ""; 34 | display: table; 35 | line-height: 0; 36 | } 37 | 38 | &::after { 39 | clear: both; 40 | } 41 | 42 | .row { 43 | max-width: 100%; 44 | min-width: 100%; 45 | } 46 | 47 | //This makes padding of first and last column double than normal 48 | .column, 49 | .columns { 50 | float: left; 51 | padding: $padding-width; 52 | width: 100%; 53 | 54 | &:first-of-type { 55 | padding-left: 2 * $padding-width; 56 | } 57 | 58 | &:last-of-type { 59 | padding-right: 2 * $padding-width; 60 | } 61 | 62 | } 63 | 64 | } 65 | 66 | .wide { 67 | max-width: $wide-max-width; 68 | } 69 | 70 | .wider { 71 | max-width: $wider-max-width; 72 | } 73 | 74 | .free-width { 75 | max-width: none; 76 | } 77 | 78 | 79 | .column, 80 | .columns { 81 | // This causes the img to be resized if img is bigger than the column 82 | img { 83 | max-width: 100%; 84 | } 85 | 86 | // This is to make padding of nested rows or columns as zero 87 | & .column, 88 | & .columns { 89 | 90 | &:first-of-type { 91 | padding-left: 0; 92 | } 93 | 94 | &:last-of-type { 95 | padding-right: 0; 96 | } 97 | 98 | } 99 | 100 | & .row { 101 | 102 | &:first-of-type > .column, 103 | &:first-of-type > .columns { 104 | padding-top: 0; 105 | } 106 | 107 | &:last-of-type > .column, 108 | &:last-of-type > .columns { 109 | padding-bottom: 0; 110 | } 111 | 112 | } 113 | 114 | // To let people remove any padding 115 | &.no-padding { 116 | padding-left: 0 !important; 117 | padding-right: 0 !important; 118 | } 119 | 120 | // For people who understand columns in a human way better 121 | &.one { 122 | @include column-width(1); 123 | } 124 | 125 | &.two { 126 | @include column-width(2); 127 | } 128 | 129 | &.three { 130 | @include column-width(3); 131 | } 132 | 133 | &.four { 134 | @include column-width(4); 135 | } 136 | 137 | &.five { 138 | @include column-width(5); 139 | } 140 | 141 | &.six { 142 | @include column-width(6); 143 | } 144 | 145 | &.seven { 146 | @include column-width(7); 147 | } 148 | 149 | &.eight { 150 | @include column-width(8); 151 | } 152 | 153 | &.nine { 154 | @include column-width(9); 155 | } 156 | 157 | &.ten { 158 | @include column-width(10); 159 | } 160 | 161 | &.eleven { 162 | @include column-width(11); 163 | } 164 | 165 | &.twelve { 166 | @include column-width(12); 167 | } 168 | 169 | // * For people who don't like thinking of grids in columns, rather they like to think in portions of page. Like half or one third of page. 170 | // * Width classes also have shorthand versions numbered as fractions 171 | // * For example: for a grid unit 1/3 (one third) of the parent width, 172 | // * simply apply class="w-1-3" to the element. 173 | 174 | &.whole, 175 | &.w-1-1 { 176 | @include fractional-column-width(1, 1); 177 | } 178 | 179 | &.half, 180 | &.w-1-2 { 181 | @include fractional-column-width(1, 2); 182 | } 183 | 184 | &.one-third, 185 | &.w-1-3 { 186 | @include fractional-column-width(1, 3); 187 | } 188 | 189 | &.two-thirds, 190 | &.w-2-3 { 191 | @include fractional-column-width(2, 3); 192 | } 193 | 194 | &.one-quarter, 195 | &.one-fourth, 196 | &.w-1-4 { 197 | @include fractional-column-width(1, 4); 198 | } 199 | 200 | &.three-quarters, 201 | &.three-fourths, 202 | &.w-3-4 { 203 | @include fractional-column-width(3, 4); 204 | } 205 | 206 | &.one-fifth, 207 | &.w-1-5 { 208 | @include fractional-column-width(1, 5); 209 | } 210 | 211 | &.two-fifths, 212 | &.w-2-5 { 213 | @include fractional-column-width(2, 5); 214 | } 215 | 216 | &.three-fifths, 217 | &.w-3-5 { 218 | @include fractional-column-width(3, 5); 219 | } 220 | 221 | &.four-fifths, 222 | &.w-4-5 { 223 | @include fractional-column-width(4, 5); 224 | } 225 | 226 | } 227 | 228 | .offset { 229 | 230 | &.by-one { 231 | @include offset-margin(1); 232 | } 233 | 234 | &.by-two { 235 | @include offset-margin(2); 236 | } 237 | 238 | &.by-three { 239 | @include offset-margin(3); 240 | } 241 | 242 | &.by-four { 243 | @include offset-margin(4); 244 | } 245 | 246 | &.by-five { 247 | @include offset-margin(5); 248 | } 249 | 250 | &.by-six { 251 | @include offset-margin(6); 252 | } 253 | 254 | &.by-seven { 255 | @include offset-margin(7); 256 | } 257 | 258 | &.by-eight { 259 | @include offset-margin(8); 260 | } 261 | 262 | &.by-nine { 263 | @include offset-margin(9); 264 | } 265 | 266 | &.by-ten { 267 | @include offset-margin(10); 268 | } 269 | 270 | &.by-eleven { 271 | @include offset-margin(11); 272 | } 273 | 274 | // fractional offset 275 | &.by-half { 276 | @include fractional-offset-margin(1, 2); 277 | } 278 | 279 | &.by-one-third { 280 | @include fractional-offset-margin(1, 3); 281 | } 282 | 283 | &.by-two-thirds { 284 | @include fractional-offset-margin(2, 3); 285 | } 286 | 287 | &.by-one-quarter, 288 | &.by-one-fourth { 289 | @include fractional-offset-margin(1, 4); 290 | } 291 | 292 | &.by-three-quarters, 293 | &.by-three-fourths { 294 | @include fractional-offset-margin(3, 4); 295 | } 296 | 297 | &.by-one-fifth { 298 | @include fractional-offset-margin(1, 5); 299 | } 300 | 301 | &.by-two-fifths { 302 | @include fractional-offset-margin(2, 5); 303 | } 304 | 305 | &.by-three-fifths { 306 | @include fractional-offset-margin(3, 5); 307 | } 308 | 309 | &.by-four-fifths { 310 | @include fractional-offset-margin(4, 5); 311 | } 312 | 313 | } 314 | 315 | // A few Utilities 316 | .align-center { 317 | text-align: center; 318 | } 319 | 320 | .align-left { 321 | text-align: left; 322 | } 323 | 324 | .align-right { 325 | text-align: right; 326 | } 327 | 328 | .pull-left { 329 | float: left; 330 | } 331 | 332 | // This class can be used to hide stuff on all devices except mobile 333 | .only-on-mobiles { 334 | display: none !important; 335 | } 336 | 337 | // To hide some blocks on all devices. This block will not be rendered on webpage. 338 | .hide { 339 | display: none !important; 340 | } 341 | 342 | // To make some blocks invisible on all devices. This block will be rendered with visibility as hidden on webpage. 343 | .invisible { 344 | visibility: hidden; 345 | } 346 | 347 | 348 | 349 | 350 | // A few responsive titbits 351 | @media screen and (max-width: 599px) { 352 | // This basically stacks all the columns for mobile devices. Except when you explicitly say .no-stacking-mobiles 353 | .row { 354 | 355 | &:not(.no-stacking-on-mobiles) > .column, 356 | &:not(.no-stacking-on-mobiles) > .columns { 357 | padding-left: 20px; 358 | padding-right: 20px; 359 | width: 100% !important; 360 | } 361 | 362 | } 363 | 364 | .column, 365 | .columns { 366 | 367 | & .row { 368 | 369 | & .column, 370 | & .columns { 371 | padding-left: 0px; 372 | padding-right: 0px; 373 | } 374 | 375 | } 376 | 377 | } 378 | 379 | // Changing a few behaviours on mobile devices if you want. 380 | .center-on-mobiles { 381 | text-align: center !important; 382 | } 383 | 384 | .hide-on-mobiles { 385 | display: none !important; 386 | } 387 | 388 | .only-on-mobiles { 389 | display: block !important; 390 | } 391 | 392 | } 393 | 394 | // Use .wide class for medium sized devices like laptops 395 | @media screen and (min-width: 1180px) { 396 | 397 | .wide .row, 398 | .row .wide { 399 | margin: 0 auto; 400 | max-width: $wide-max-width; 401 | } 402 | 403 | } 404 | 405 | // Use .wider class for devices with even bigger resolutions like retina 406 | @media screen and (min-width: 1366px) { 407 | 408 | .wider .row, 409 | .row .wider { 410 | margin: 0 auto; 411 | max-width: $wider-max-width; 412 | } 413 | 414 | } 415 | 416 | // Controlling visibility based on orientation of the device 417 | .show-for-landscape, 418 | .hide-for-portrait { 419 | display: block !important; 420 | } 421 | 422 | @media screen and (orientation: landscape) { 423 | 424 | .show-for-landscape, 425 | .hide-for-portrait { 426 | display: block !important; 427 | } 428 | 429 | } 430 | 431 | @media screen and (orientation: portrait) { 432 | 433 | .show-for-landscape, 434 | .hide-for-portrait { 435 | display: none !important; 436 | } 437 | 438 | } 439 | 440 | .hide-for-landscape, 441 | .show-for-portrait { 442 | display: none !important; 443 | } 444 | 445 | @media screen and (orientation: landscape) { 446 | 447 | .hide-for-landscape, 448 | .show-for-portrait { 449 | display: none !important; 450 | } 451 | 452 | } 453 | 454 | @media screen and (orientation: portrait) { 455 | 456 | .hide-for-landscape, 457 | .show-for-portrait { 458 | display: block !important; 459 | } 460 | 461 | } 462 | --------------------------------------------------------------------------------