All Projects → vladocar → 60gs

vladocar / 60gs

Licence: MIT license
60GS - 60 Columns Grid System based on CSS Grid Layout

Programming Languages

HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to 60gs

grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (+21.54%)
Mutual labels:  grid, css-grid, grid-layout, grid-system
Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+5966.15%)
Mutual labels:  grid, css-grid, grid-layout, grid-system
Bootstrap Grid Css
The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.
Stars: ✭ 119 (+83.08%)
Mutual labels:  grid, css-grid, grid-layout
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-70.77%)
Mutual labels:  grid, grid-layout, grid-system
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (+415.38%)
Mutual labels:  grid, grid-layout, grid-system
aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-80%)
Mutual labels:  css-framework, css-grid, grid-layout
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+141.54%)
Mutual labels:  grid, grid-layout, grid-system
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (-12.31%)
Mutual labels:  grid, css-framework, css-grid
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+6560%)
Mutual labels:  grid, grid-layout, grid-system
Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+992.31%)
Mutual labels:  grid, grid-layout, grid-system
Interior
Design system for the modern web.
Stars: ✭ 77 (+18.46%)
Mutual labels:  grid, css-grid, grid-layout
Bedrock
Foundational Layout Primitives for your React App
Stars: ✭ 173 (+166.15%)
Mutual labels:  css-grid, grid-layout, grid-system
grid-layout
grid-layout is a layout engine which implements grid, can use in canvas/node-canvas
Stars: ✭ 43 (-33.85%)
Mutual labels:  grid, css-grid, grid-layout
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (+35.38%)
Mutual labels:  grid, grid-layout, grid-system
Grid Cheatsheet
CSS Grid cheat sheet
Stars: ✭ 83 (+27.69%)
Mutual labels:  grid, css-grid, grid-layout
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-58.46%)
Mutual labels:  grid, css-grid, grid-layout
Two-Lines-CSS-Framework
Two Lines CSS Framework
Stars: ✭ 17 (-73.85%)
Mutual labels:  css-framework, css-grid
Popo
PoPo is the grid layout tool, the best choice for runtime layout.
Stars: ✭ 130 (+100%)
Mutual labels:  grid, grid-layout
Dashboards
Responsive dashboard templates 📊✨
Stars: ✭ 10,914 (+16690.77%)
Mutual labels:  grid, css-grid
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (+136.92%)
Mutual labels:  grid, css-framework

60 Columns Grid System

60 Grid System is Starter Grid for the CSS Grid.


What is 60 Grid System?

60 Grid System is Starter Grid for the CSS Grid.

It is just one CSS class.

Let me show you the code:

.grid {
          display: grid;
          grid-template-columns: repeat(60, 1fr)
        }

This is it? You must be joking!? Is it some kind of dark magic?

I will show you it’s dark secrets in a minute. Just give me a chance to explain.

Why 60 columns?

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

So what?

This is the easiest way to make 1- 6 column grid with equal width using the CSS Grid.

I’m talking about this picture:

Hmm.. I’m sceptical about this?

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.

60 Grid System does the same thing 1 - 6 columns by making 60 smaller units. Plus is flexible.

It will work with any width:

.grid {
   width: 1237px / 83% / 40rem /* random numbers */
   display: grid;
   grid-template-columns: repeat(60, 1fr)
}

You can also add grid-gap:

.grid {
   width: 1237px / 83% / 40rem /* random numbers */
   display: grid;
   grid-gap: 10px; /* random number */
   grid-template-columns: repeat(60, 1fr)
}

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.

You can. Make your own id and classes.

I like layout with Header, Footer, Sidebar the classic style, how can I do that?

Hmm, nobody does that anymore, but you are the boss.

You probably want something like this:

#header, #footer { grid-column: 1 / 61 }
#sidebar {  grid-column: 1 / 17 }
#article { grid-column: 17 / 61 }

Here is the demo

I still don't understand 1 / 17 and 17 / 61 ?

Are you sure you know CSS Grid!? First go learn the CSS Grid and come back later.

Yeah I'm still learning Flexbox.. now CSS Grid. Life was easier back in the day.

I hear you, brother.

I'm back. So I can add my own custom columns with my own naming system?

Yes, absolutely.

I just need to specify the grid-column to go form 1 to 61, right?

Yes, exactly.

What about overlapping columns?

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.

I don't like to make header, footer ids. What are we 1996? Can me make something more modern like OOP CSS?

Finally some good questions. Yes we can!

With the CSS Grid we can merge columns like this:

.col-30 { grid-column-end: span 30 }  /* 2 columns */
.col-20 { grid-column-end: span 20 } /* 3 columns */
<div class=“col-30”> 50% </div>
<div class=“col-30”> 50% </div>

<div class=“col-30”> 33.33% </div>
<div class=“col-30”> 33.33% </div>
<div class=“col-30”> 33.33% </div>

Aha, so it is important to 30 + 30 = 60 meaning 50% and 50% column?

Yes.

Can I use Sass with this?

Yes I’ve build some Sass. Go check the 60gs.scss file.

Is it responsive?

It can be, I’ve made some basic responsiveness in the 60gs.css file and it is your task to add more features.

Now some hard questions: Can I have 7 identical columns in one row?

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.

But the designer made 7 column grid, I don’t know what to do?

Fire the designer.

But seriously, I need 7 columns?

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.

What about 11 columns?

Do you know to play Russian Roulette .. play it for 11 times .. problem solved :)

I played it for 11 times can you now tell me the solution?

Hmm.. you lucky bas… Yes, you need to do the same thing like with the 7 columns.

Everyone was .. CSS Grid is the next big thing.. now I need to have 60 columns so I can have 6 columns?

There's more than one way to skin a cat, use the solution that works best for you.

What about browser compatibility?

First, know your customers. If your customers are people like me and you don’t have a problem.. otherwise go with the flow -> float.

So basically 60 gs is like the 960px grid but just for the CSS Grid?

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.

Thanks, I'll probably stick with Flexbox.

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.

Just kidding npm I love you too :)

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.

Install

You can copy and paste the code, download it form GitHub, use npm or use CDN.

$ npm i 60gs
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/60gs.css">

or

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/60gs-barebone.css">

Demos

https://vladocar.github.io/60gs/

Demo 1

License

This project is licensed under the MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].