├── .DS_Store ├── 100g.gif ├── 60gs.png ├── demo-grid.png ├── 60gs-barebone.css ├── GitHub-Mark-32px-White.png ├── 60gs.scss ├── package.json ├── 60gs.css ├── LICENSE ├── custom.html ├── 60.html ├── index.html ├── README.md └── 60-Grid-Demo.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/60gs/HEAD/.DS_Store -------------------------------------------------------------------------------- /100g.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/60gs/HEAD/100g.gif -------------------------------------------------------------------------------- /60gs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/60gs/HEAD/60gs.png -------------------------------------------------------------------------------- /demo-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/60gs/HEAD/demo-grid.png -------------------------------------------------------------------------------- /60gs-barebone.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | grid-template-columns: repeat(60, 1fr) 4 | } 5 | -------------------------------------------------------------------------------- /GitHub-Mark-32px-White.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/60gs/HEAD/GitHub-Mark-32px-White.png -------------------------------------------------------------------------------- /60gs.scss: -------------------------------------------------------------------------------- 1 | $num: 60; 2 | $col: 6; 3 | 4 | .grid { 5 | display: grid; 6 | grid-gap: 10px; 7 | grid-template-columns: repeat($num, 1fr); 8 | } 9 | 10 | 11 | @for $i from 1 through $col { 12 | 13 | .col-#{$num / $i} { 14 | grid-column-end: span #{$num / $i}; 15 | } 16 | } 17 | 18 | /* helper columns */ 19 | .col-50 { grid-column-end: span 50 } /* 1 + 4 columns */ 20 | .col-45 { grid-column-end: span 45 } /* 1 + 3 columns */ 21 | 22 | @media (max-width: 600px) { 23 | .grid {grid-gap: 10px 0 } 24 | .grid > * { grid-column-end: span $num } 25 | img{ max-width:100%; height:auto } 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "60gs", 3 | "version": "1.0.0", 4 | "description": "60GS - 60 Columns Grid System based on CSS Grid Layout", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/vladocar/60gs.git" 12 | }, 13 | "keywords": [ 14 | "grid" 15 | ], 16 | "author": "Vladimir Carrer (http://www.vcarrer.com)", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/vladocar/60gs/issues" 20 | }, 21 | "homepage": "https://github.com/vladocar/60gs#readme" 22 | } 23 | -------------------------------------------------------------------------------- /60gs.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | grid-gap: 10px; 4 | grid-template-columns: repeat(60, 1fr) 5 | } 6 | 7 | .col-60 { grid-column-end: span 60 } /* 1 column */ 8 | .col-30 { grid-column-end: span 30 } /* 2 columns */ 9 | .col-20 { grid-column-end: span 20 } /* 3 columns */ 10 | .col-15 { grid-column-end: span 15 } /* 4 columns */ 11 | .col-12 { grid-column-end: span 12 } /* 5 columns */ 12 | .col-10 { grid-column-end: span 10 } /* 6 columns */ 13 | 14 | /* helper columns */ 15 | .col-50 { grid-column-end: span 50 } /* 1 + 4 columns */ 16 | .col-45 { grid-column-end: span 45 } /* 1 + 3 columns */ 17 | 18 | @media (max-width: 600px) { 19 | .grid {grid-gap: 10px 0 } 20 | .grid > * { grid-column-end: span 60 } 21 | img{ max-width:100%; height:auto } 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Vladimir Carrer 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 | -------------------------------------------------------------------------------- /custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 60 Columns CSS Grid 7 | 8 | 9 | 10 | 11 | 12 | 55 | 56 | 57 | 58 | 59 |
60 |
Custom1 from (1 / 24)
61 |
Custom2 from (24 / 39)
62 |
Custom3 from (39 / 61)
63 |
Custom4 from (1 / 15)
64 |
Custom5 from (15 / 31)
65 |
Custom6 from (31 / 42)
66 |
Custom7 from (42 / 61)
67 | 68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /60.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 60 Columns CSS Grid 7 | 8 | 9 | 10 | 11 | 12 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | 81 | 82 | 83 |
84 | 
 85 | 
 86 |       /* You start with this code: */
 87 | 
 88 |       .grid {
 89 |         display: grid;
 90 |         grid-gap: 10px;
 91 |         grid-template-columns: repeat(60, 1fr)
 92 |       }
 93 | 
 94 | 
 95 |       /* And this is your code: */
 96 | 
 97 |       #header, #footer { grid-column: 1 / 61 }
 98 | 
 99 |       #sidebar { grid-column: 1 / 17 }
100 | 
101 |       #article { grid-column: 17 / 61 }
102 | 
103 |
104 |
105 | 106 |
Footer
107 | 108 |
109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 60 Columns CSS Grid 7 | 8 | 9 | 10 | 11 | 12 | 13 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |
78 | 79 |
80 |
81 |

60 Columns Grid System

82 |

Experimental CSS Grid Layout.

83 |
84 | 85 | 86 |
60 GS is starter kit for the CSS Grid.
87 | 88 |
1
89 |
2
90 | 91 |
1
92 |
2
93 |
3
94 | 95 |
1
96 |
2
97 |
3
98 |
5
99 | 100 |
1
101 |
2
102 |
3
103 |
4
104 |
5
105 | 106 |
1
107 |
2
108 |
3
109 |
4
110 |
5
111 |
6
112 | 113 |
Why 60? 114 |

Because the number 60 is dividable by 2,3,4,5 and 6.

115 |
116 | 117 |
Lightweight - 1 CSS class
118 |
1-60 columns
119 |
It can be Fluid or Responsive
120 | 121 |
122 | 
123 | 
124 |         No joke, It is just one CSS class:
125 | 
126 |         .grid {
127 |           display: grid;
128 |           grid-template-columns: repeat(60, 1fr)
129 |         }
130 | 
131 |         This is it! Everything else is optional.
132 |
133 | 134 |
135 |
136 | 
137 | 
138 |         You can some extra features like:
139 | 
140 |         .col-60 { grid-column-end: span 60 } /* 1 column */
141 |         .col-30 { grid-column-end: span 30 } /* 2 columns */
142 |         .col-20 { grid-column-end: span 20 } /* 3 columns */
143 |         .col-15 { grid-column-end: span 15 } /* 4 columns */
144 |         .col-12 { grid-column-end: span 12 } /* 5 columns */
145 |         .col-10 { grid-column-end: span 10 } /* 6 columns */
146 | 
147 |         You don't need to use this.
148 | 
149 |
150 | 151 |
152 | 153 |
154 | Why do you need this grid system? Bescouse is hard to have 2,3,4,5,6 columns under the same display: grid;
155 | 156 |
Custom1
157 |
Custom2
158 |
Custom3
159 | 160 |
161 | 162 | Learn more on Github 163 |
164 | 165 |
166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

60 Columns Grid System

4 | 5 |

60 Grid System is Starter Grid for the CSS Grid.

6 | 7 |
8 | 9 | What is 60 Grid System? 10 | 11 | 60 Grid System is Starter Grid for the CSS Grid. 12 | 13 | It is just one CSS class. 14 | 15 | Let me show you the code: 16 | 17 | ```css 18 | .grid { 19 | display: grid; 20 | grid-template-columns: repeat(60, 1fr) 21 | } 22 | 23 | ``` 24 | 25 | This is it? You must be joking!? Is it some kind of dark magic? 26 | 27 | 28 | I will show you it’s dark secrets in a minute. Just give me a chance to explain. 29 | 30 | Why 60 columns? 31 | 32 | 60 is the first number that is dividable by 2,3,4,5 and 6. 33 | 34 | So what? 35 | 36 | This is the easiest way to make 1- 6 column grid with equal width using the CSS Grid. 37 | 38 | I’m talking about this picture: 39 | 40 | 41 | 42 | Hmm.. I’m sceptical about this? 43 | 44 | Back in the day the 960px was the magic number and was dividable by 2,3,4,5 and 6. You all probably used 960px layout in the past. 45 | 46 | 60 Grid System does the same thing 1 - 6 columns by making 60 smaller units. Plus is flexible. 47 | 48 | It will work with any width: 49 | 50 | ```css 51 | .grid { 52 | width: 1237px / 83% / 40rem /* random numbers */ 53 | display: grid; 54 | grid-template-columns: repeat(60, 1fr) 55 | } 56 | ``` 57 | You can also add grid-gap: 58 | 59 | ```css 60 | .grid { 61 | width: 1237px / 83% / 40rem /* random numbers */ 62 | display: grid; 63 | grid-gap: 10px; /* random number */ 64 | grid-template-columns: repeat(60, 1fr) 65 | } 66 | ``` 67 | 68 | I don't get it? How you can add columns? I like to make my own semantic HTML5 friendly layout and I don't want to use any framework. 69 | 70 | You can. Make your own id and classes. 71 | 72 | I like layout with Header, Footer, Sidebar the classic style, how can I do that? 73 | 74 | Hmm, nobody does that anymore, but you are the boss. 75 | 76 | You probably want something like this: 77 | 78 | ```css 79 | #header, #footer { grid-column: 1 / 61 } 80 | #sidebar { grid-column: 1 / 17 } 81 | #article { grid-column: 17 / 61 } 82 | ``` 83 | 84 | Here is the demo 85 | 86 | I still don't understand 1 / 17 and 17 / 61 ? 87 | 88 | Are you sure you know CSS Grid!? First go learn the CSS Grid and come back later. 89 | 90 | Yeah I'm still learning Flexbox.. now CSS Grid. Life was easier back in the day. 91 | 92 | I hear you, brother. 93 | 94 | I'm back. So I can add my own custom columns with my own naming system? 95 | 96 | Yes, absolutely. 97 | 98 | I just need to specify the grid-column to go form 1 to 61, right? 99 | 100 | Yes, exactly. 101 | 102 | What about overlapping columns? 103 | 104 | Overlapping columns .. ah you are that guy that watched the video about overlapping columns and you want to make multilayer posters with HTML and CSS. Sure you can do overlapping columns as well. Example (1 to 23 and 17 to 30…) just overlap the numbers. 105 | 106 | I don't like to make header, footer ids. What are we 1996? Can me make something more modern like OOP CSS? 107 | 108 | Finally some good questions. Yes we can! 109 | 110 | With the CSS Grid we can merge columns like this: 111 | 112 | ```css 113 | .col-30 { grid-column-end: span 30 } /* 2 columns */ 114 | .col-20 { grid-column-end: span 20 } /* 3 columns */ 115 | ``` 116 | 117 | ```HTML 118 |
50%
119 |
50%
120 | 121 |
33.33%
122 |
33.33%
123 |
33.33%
124 | ``` 125 | 126 | Aha, so it is important to 30 + 30 = 60 meaning 50% and 50% column? 127 | 128 | Yes. 129 | 130 | Can I use Sass with this? 131 | 132 | Yes I’ve build some Sass. Go check the 60gs.scss file. 133 | 134 | Is it responsive? 135 | 136 | It can be, I’ve made some basic responsiveness in the 60gs.css file and it is your task to add more features. 137 | 138 | Now some hard questions: Can I have 7 identical columns in one row? 139 | 140 | No. Who does 7 columns!? Not even Rick and Morty have 7 columns in their grid! And Rick is the smartest man in the universe. 141 | 142 | But the designer made 7 column grid, I don’t know what to do? 143 | 144 | Fire the designer. 145 | 146 | But seriously, I need 7 columns? 147 | 148 | Allllright.. .grid7{ grid-template-columns: repeat(7, 1fr) } .somename{grid-column-end: span 1} and put the grid7 inside the grid. Like Matrix or Inception. 149 | 150 | What about 11 columns? 151 | 152 | Do you know to play Russian Roulette .. play it for 11 times .. problem solved :) 153 | 154 | I played it for 11 times can you now tell me the solution? 155 | 156 | Hmm.. you lucky bas… Yes, you need to do the same thing like with the 7 columns. 157 | 158 | Everyone was .. CSS Grid is the next big thing.. now I need to have 60 columns so I can have 6 columns? 159 | 160 | There's more than one way to skin a cat, use the solution that works best for you. 161 | 162 | What about browser compatibility? 163 | 164 | First, know your customers. If your customers are people like me and you don’t have a problem.. otherwise go with the flow -> float. 165 | 166 | So basically 60 gs is like the 960px grid but just for the CSS Grid? 167 | 168 | Yes, but 60 gs can take any value not just 960px and is much more flexible and fluid plus is super easy to make your grid-gap. 169 | 170 | Thanks, I'll probably stick with Flexbox. 171 | 172 | P.S Ahh, You are still here. You are wondering where is the NPM command.. ahh sorry you prefer yarn. Didn't you read that npm is new yarn? Aha, you use webpack lately. You can just copy paste, it's only one CSS class. 173 | 174 | Just kidding npm I love you too :) 175 | 176 | P.S.S Please, don't be that guy who says: Why do I need another grid CSS Grid? CSS Grid is already a grid we no longer need to use any layout template.. Let me give you a simple answer: 60 GS can be applied on any medium Photoshop, Illustrattor, Paper.. 60 Grid System is pure math. You can use the 60 Grid units to make meaniful Grid System. CSS Grid is just a starting tool just like Photoshop or Illustrator. 177 | 178 | 179 |

Install

180 | 181 | You can copy and paste the code, download it form GitHub, use npm or use CDN. 182 | 183 | ```shell 184 | $ npm i 60gs 185 | ``` 186 | 187 | ```html 188 | 189 | 190 | or 191 | 192 | 193 | ``` 194 | 195 |

Demos

196 | 197 | [https://vladocar.github.io/60gs/](https://vladocar.github.io/60gs/) 198 | 199 | [Demo 1](https://vladocar.github.io/60gs/60-Grid-Demo.html) 200 | 201 | 202 | ### License 203 | 204 | This project is licensed under the MIT License 205 | -------------------------------------------------------------------------------- /60-Grid-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 60 Grid System 7 | 8 | 9 | 10 | 43 | 44 | 45 | 46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 |

Minimal Grid System

54 |
55 | 56 | 57 | 58 |
59 |

Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vivamus cursus.

60 | 61 |

Suspendisse potenti. Etiam sollicitudin. Vestibulum lacinia erat id neque. Morbi dolor. Nunc justo quam, pulvinar a, sagittis et, malesuada eget, nibh. Suspendisse laoreet risus ac quam. Mauris arcu. 62 |

63 |

Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst. Nunc commodo nisl ut turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tristique, augue sit amet bibendum ullamcorper, ipsum nisl malesuada arcu, ac aliquet tellus justo eu nisl. Vestibulum nec est.

64 | 65 |
66 |
67 |

68 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam.

69 |

70 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst.

71 |
72 |
73 |

74 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam.

75 |

76 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Morbi nunc. Cras in metus. Vestibulum mattis. Praesent interdum. In hac habitasse platea dictumst.

77 |
78 | 79 | 80 |
81 |

82 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae 83 |

84 |
85 |
86 |

87 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae 88 |

89 |
90 |
91 |

92 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae 93 |

94 |
95 |
96 |

97 | Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae 98 |

99 |
100 |
101 |

Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. 102 |

103 |
104 |
105 |

Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. 106 |

107 |
108 |
109 |

Praesent et ipsum fermentum metus convallis consequat. Suspendisse in quam. Integer viverra consequat nisi. Donec rutrum turpis non eros. Pellentesque mauris. Sed facilisis augue quis enim. Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra. 110 |

111 |
112 |
113 |

Praesent et ipsum

114 |

Quisque posuere, velit sit amet iaculis venenatis, dui lectus molestie magna, vel fringilla ante nunc eget urna. Nam eget lorem sit amet enim egestas pharetra.

115 |
116 |
117 | 118 | 119 | 120 | --------------------------------------------------------------------------------