├── .gitignore ├── .gitattributes ├── README.md └── trg.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | *.css.map 3 | 4 | .DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # trg 2 | ### tiny responsive grid 3 | 4 | please see the [Github Page](http://jkymarsh.com/tiny-responsive-grid) for documentation. 5 | 6 | view source for sample usage. 7 | 8 | #### features 9 | 10 | - pretty fuckin' small and simplistic 11 | - mobile-first 12 | - support down to IE8 13 | - no weird hacks or unnecessary fluff 14 | - less terrible than most other responsive grids 15 | - (optional) per-device gutters! 16 | 17 | #### inspiration 18 | 19 | - https://github.com/arnaudleray/pocketgrid 20 | - https://github.com/matthewhartman/base 21 | - https://github.com/daneden/Toast 22 | - https://github.com/ThisIsDallas/Simple-Grid 23 | - https://github.com/imperavi/kube 24 | - https://github.com/gsvineeth/rwdgrid 25 | - https://github.com/owenversteeg/min 26 | - https://github.com/jonikorpi/Frameless 27 | - https://github.com/cobyism/gridism 28 | - https://github.com/yahoo/pure-release 29 | - https://github.com/roybarber/micro-rwd-grid 30 | - https://github.com/DenisLeblanc/responsive.gs 31 | -------------------------------------------------------------------------------- /trg.css: -------------------------------------------------------------------------------- 1 | /* 2 | trg - tiny responsive grid 3 | author: j. ky marsh 4 | github: https://github.com/jkymarsh 5 | version: 1.0 6 | */ 7 | 8 | /* 9 | http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 10 | */ 11 | .container, 12 | .row, 13 | .col { 14 | -webkit-box-sizing: border-box; 15 | -moz-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | 19 | /* 20 | https://css-tricks.com/snippets/css/clear-fix/ 21 | */ 22 | .container:after, 23 | .row:after, 24 | .col:after { 25 | content: ""; 26 | display: table; 27 | clear: both; 28 | } 29 | 30 | /* 31 | mobile container leaves some whitespace on the sides 32 | */ 33 | .container { 34 | width: 90%; 35 | margin: 0 auto; 36 | } 37 | 38 | /* 39 | set bottom padding if desired 40 | */ 41 | .row { 42 | padding-bottom: 0; 43 | } 44 | 45 | /* 46 | default column styles 47 | */ 48 | .col { 49 | display: block; 50 | float: left; 51 | width: 100%; 52 | } 53 | 54 | /* 55 | tablet columns 56 | */ 57 | /* 800px */ 58 | @media (min-width: 50em) { 59 | .container { 60 | width: 45em; /* 720px */ 61 | } 62 | 63 | .gutters-t .col { 64 | margin-left: 2%; 65 | } 66 | 67 | .gutters-t .col:first-child { 68 | margin-left: 0; 69 | } 70 | 71 | .span-1-t { width: 8.333%; } 72 | .span-2-t { width: 16.666%; } 73 | .span-3-t { width: 25%; } 74 | .span-4-t { width: 33.333%; } 75 | .span-5-t { width: 41.666%; } 76 | .span-6-t { width: 50%; } 77 | .span-7-t { width: 58.333%; } 78 | .span-8-t { width: 66.666%; } 79 | .span-9-t { width: 75%; } 80 | .span-10-t { width: 83.333%; } 81 | .span-11-t { width: 91.666%; } 82 | .span-12-t { width: 100%; } 83 | 84 | .gutters-t .span-1-t { width: 6.5%; } 85 | .gutters-t .span-2-t { width: 15%; } 86 | .gutters-t .span-3-t { width: 23.5%; } 87 | .gutters-t .span-4-t { width: 32%; } 88 | .gutters-t .span-5-t { width: 40.5%; } 89 | .gutters-t .span-6-t { width: 49%; } 90 | .gutters-t .span-7-t { width: 57.5%; } 91 | .gutters-t .span-8-t { width: 66%; } 92 | .gutters-t .span-9-t { width: 74.5%; } 93 | .gutters-t .span-10-t { width: 83%; } 94 | .gutters-t .span-11-t { width: 91.5%; } 95 | .gutters-t .span-12-t { width: 100%; } 96 | } 97 | 98 | /* 99 | desktop columns 100 | */ 101 | /* 1200px */ 102 | @media (min-width: 75em) { 103 | .container { 104 | width: 64em; /* 1024px */ 105 | } 106 | 107 | .gutters-t .col { 108 | margin-left: 0; 109 | } 110 | 111 | .gutters-d .col { 112 | margin-left: 2%; 113 | } 114 | 115 | .gutters-d .col:first-child { 116 | margin-left: 0; 117 | } 118 | 119 | .gutters-t .span-1-d, .span-1-d { width: 8.333%; } 120 | .gutters-t .span-2-d, .span-2-d { width: 16.666%; } 121 | .gutters-t .span-3-d, .span-3-d { width: 25%; } 122 | .gutters-t .span-4-d, .span-4-d { width: 33.333%; } 123 | .gutters-t .span-5-d, .span-5-d { width: 41.666%; } 124 | .gutters-t .span-6-d, .span-6-d { width: 50%; } 125 | .gutters-t .span-7-d, .span-7-d { width: 58.333%; } 126 | .gutters-t .span-8-d, .span-8-d { width: 66.666%; } 127 | .gutters-t .span-9-d, .span-9-d { width: 75%; } 128 | .gutters-t .span-10-d, .span-10-d { width: 83.333%; } 129 | .gutters-t .span-11-d, .span-11-d { width: 91.666%; } 130 | .gutters-t .span-12-d, .span-12-d { width: 100%; } 131 | 132 | .gutters-d .span-1-d { width: 6.5%; } 133 | .gutters-d .span-2-d { width: 15%; } 134 | .gutters-d .span-3-d { width: 23.5%; } 135 | .gutters-d .span-4-d { width: 32%; } 136 | .gutters-d .span-5-d { width: 40.5%; } 137 | .gutters-d .span-6-d { width: 49%; } 138 | .gutters-d .span-7-d { width: 57.5%; } 139 | .gutters-d .span-8-d { width: 66%; } 140 | .gutters-d .span-9-d { width: 74.5%; } 141 | .gutters-d .span-10-d { width: 83%; } 142 | .gutters-d .span-11-d { width: 91.5%; } 143 | .gutters-d .span-12-d { width: 100%; } 144 | } --------------------------------------------------------------------------------