cobyism / gridism Goto Github PK

A simple responsive CSS grid.

Home Page: http://pages.cobyism.com/gridism

License: MIT License

CSS 100.00%

gridism's Introduction

🚨 ⚠️ Attention ⚠️ 🚨

2017 Update: This grid system was created almost 5 years ago now, and should be considered deprecated as these days browsers let you do much more with grids using things like Flexbox. Unless you’re looking for something really basic, you’ll probably be better off using Flexbox to achieve what you need instead. An excellent guide to getting started with Flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Gridism

A simple responsive CSS grid. View the demo →

Why?

My process

When I design web layouts, my thought process usually goes something like this:

Alright, in this section, I want a bit that’s one third of the section’s width, and then next to that I want another bit that’s two thirds of the sections’s width. Now, in the next section…

I don’t think in 12 or 16 column grids. Instead, my mental model basically just consists of the page being divided up into multiple full-width vertical sections, and each vertical section being divided up into simple fractions of the section width.

Existing grid frameworks

Most frameworks I’ve used don’t match that thought process at all. I usually have to:

Remember how many columns are in the grid for the particular framework I’m using.
Decide how I want to divide up this particular section’s content.
Mentally do the conversion from what I want to see (one quarter + three quarters, for example) into the number of columns I need for the grid I’m using.
Remember the class naming structure for the framework I’m using. Is it .span3, .grid_3, .col-3, or something else altogether?
Deal with other hassles like clearing floats, messing with column padding to have the gutters look right, indicating which elements are the first in a row, and so forth.

Only the second step should be necessary.

Gridism’s Goals

I couldn’t find a framework that matched this mental model of how I work, so I started hacking on Gridism with the following goals:

Class names should be memorable and self-evident.
Gutters and basic content padding should be taken care of.
Clearing floats should be done automatically.
Wrapped grid sections should be independant of vertical page sections.
Frequently required utility classes should be provided.
Common patterns for Responsive Design™ should be built-in.

I hope you find that this project is living up to those goals. If not, please create an issue and let me know.

Installation

1. Get the files

The easiest way to use Gridism in your project is via the Bower package manager.

bower install gridism

Elsewise, download the zip folder, extract it, and copy gridism.css into your project’s folder. Boom. Done.

2. Link the stylesheet

Add the following stylesheet to your HTML’s <head> section:

<link rel="stylesheet" href="bower_components/gridism/gridism.css">

Note: If you didn’t install using Bower, you need to adjust the path of CSS file to match your file structure.

3. Viewport scale

Add the following meta tag to your HTML’s <head> section:

<meta name="viewport" content="width=device-width,initial-scale=1">

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.

Contributing

I’d ❤️ to receive contributions to this project. It doesn’t matter if it’s just a typo, or if you’re proposing an overhaul of the entire project—I’ll gladly take a look at your changes. Fork at will! 😀.

License

Go nuts. See LICENSE (MIT).

gridism's People

Contributors

Stargazers

Watchers

Forkers

ideesimple matsnl65 msoftware vivekrp creamcoderz wjthomas9 sergslon cyrke vovazubko yomigits vova84 andriyl gtaglang anilkk douglogue jplacsinto mdunbavan chu888chu888 ncgordan rmtsukuru adkham jhei mdlorey aeharding juankennaugh irontony vecna dottorblaster talkpoppycock valikr martinhughes davejlane timlili lgm243 yingchu steelman bxck75 cub3lab htmlstrap palmersp dnewms malachi358 unrared realyhy robertcedwards kaspal langzhai eiennotoso fenggnaw ycaihua umarmughal educostachaves captaincyr shprink andy737 brice-j suiramus dangerdave007 rchrd2 freedomlang guglielmopardo nguyenlamzx cinan beingy shanthosh1 136993377 jonathanmoore rittamdebnath shajansheriff onceclick gsdu8g9 dirkakrid tylerjohnsondev yeahisme austinsmom tcompart giollianosulit armagheadon gabriella-bulgarelli uschmelzer shimigami-nukimara darthsho css-grid

gridism's Issues

Centered half / golden-small / one-third / etc ?

Hey :)

This library is great! however I'm facing a small problem I can't find out why it doesn't work. Take in example this code:

<section class="login">

    <div class="grid">
        <div class="unit whole align-center">
            <div class="grid">
                <div class="unit golden-small">
                    Random Text, Login controls should come here and such
                </div>
            </div>
        </div>
    </div>

</section>

As you can see, I'm trying to have a centered, small login form horizontally centered in my page, and it doesn't work, it ends up aligned to the left - I assume it's because .grid has float:left, but it does nothing anyways if I remove it.

Any ideas? Thanks in advance :)

one-third using a margin that messes it up?

I'm trying to use the "one-third" class, but there seems to be a margin-left rule that messes it up. When I turn off the rule, the grid responds the way it should:

media="all"
.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds {
    float: left;
    margin-left: 2.564102564102564%;
}

With "margin-left" left in tact:

When the "margin-left" is turned off:

Non-stacked nested units

Please move «.grid:not(.no-stacking-on-mobiles) > .unit {}» after «.unit .grid .unit {}».

License Type?

Vertical align??

How to get a vertical align i have only one div with a class whole for design of my login systen but how to align vertical?

SCSS

Great work, mate. I am building an internal frontend framework for the company I work with and we are looking for a no bullshit, no frills, aesthetic grid system, and this seems to be it.

We are writing our core code in SCSS, do you plan to have support for SCSS in the future at all?

Also, what is the browser support on this? I think that should be included somewhere. Thanks!

bug ie float

i'm french sorry for my english
I use your css grid responsive i have a bug with ie 9 and 10 but not ie 8.

the element with class grid unid have no float left automatically
How adjust this bug ?

Thanks

sixth class

Hey I found myself needing to divide things into 6 - so I added this, seems to work so I thought I'd post it in case anybody else needs something like this!

.grid .one-sixth, .grid .w-1-6 { width: 16.6667%; }
.grid .two-sixths, .grid .w-2-6 { width: 33.3333%; }
.grid .three-sixths, .grid .w-3-6 { width: 50.0001%; }
.grid .four-sixths, .grid .w-4-6 { width: 66.6668%; }
.grid .five-sixths, .grid .w-5-6 { width: 83.3335%; }

Align classes for units?

Are there any best practice ways to align content in units in Gridism? For example , a navigation header the buttons and possibly a logo has to be aligned to the bottom of a unit.

Intermediate size media query

I might be gilding the lily, but I thought it would be a good idea to add the an intermediate sized media query so that I could add intermediate sized units. This I did as follows:

Css:

/* Added imtermediate sizes */
@media screen and (min-width: 320px) and (max-width: 560px) {
    .grid .small-whole,          .grid .ws-1-1 { width: 100%; }
    .grid .small-half,           .grid .ws-1-2 { width: 50%; }
    .grid .small-one-third,      .grid .ws-1-3 { width: 33.3332%; }

    .grid .unit {
         /*width: 100% !important;*/
         padding-left: 20px;
         padding-right: 20px;
    }

    .unit .grid .unit {
        padding-left: 0;
        padding-right: 0;
    }

    /* Sometimes, you just want to be different on small screens */
    .center-on-mobiles { text-align: center !important; }
    .hide-on-mobiles { display: none !important; }
}

Html:

    <div class="grid">
        <div class="unit unit one-third ws-1-2">
            <pre>one-third & small half</pre>
        </div>
        <div class="unit unit one-third ws-1-2">
            <pre>one-third & small half</pre>
        </div>
        <div class="unit unit one-third ws-1-1">
            <pre>one-third & small whole</pre>
        </div>
    </div>

This does the trick with one exception, padding is now incorrect. Try as I may I can't seem to find the answer. Any help would be gratefully accepted.

Link to Bower package doesn't work

Sorry but this is the only way to report this issue.
Thanks for your work
Hans

First and last elements of a unit are different width

Due to the following lines in gridism:

/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { padding-left: 20px; }
.grid .unit:last-child { padding-right: 20px; }

There's an extra 10px of padding on the first and last children of a unit. This is causing those elements to have a different width for me. I understand the desire for the gutters to all appear the same width, but it seems like having the elements be the same width is more desirable. Am I perhaps doing something wrong, or is there a good workaround for this other than just overriding the padding, which is what I'm currently doing?

How about this?

If I use your grid unit'd content's widths aren't equal.
I use this code to fix it:

`.grid {
margin: 0 -10px;
}

.unit:first-of-type {
padding-left: 10px;
}

.unit:last-of-type {
padding-right: 10px;
}

.offset-… ?

Any plans on implementing these classes?

Some kind of .wrap-around or .multiline class?

I'm reworking the jekyll-import site and using a grid to list the importers:

The first item has no padding due to:

.unit .unit:first-child { padding-left: 0; }

The first .unit within my nested .grid has no left padding, but all the others have a great, nice gutter as expected.

Perhaps a .grid.multiline class could add this padding back or remove the nth child's padding? Like every 4 items gets no left padding for the .w-1-4.

Investigate `text-align: justify` as alternative mechanism for gridism

I stumbled upon this interesting article yesterday, and it looks like that technique might be something that gridism could employ instead of the current setup. I’m not sure about the bit about needing placeholder elements in there, because I think that could easily make this project too complex for someone to use who doesn’t really understand what’s going on under the hood, but it’s definitely something I’d like to look into when I get a sec.

Re-consider top and bottom margin on .unit elements

I'd rather add vertical padding if needed than worry about removing it or how it impacts vertical rhythm. What do you think about removing the 10px vertical padding on the .unit element?

.grid .unit {
  float: left;
  width: 100%;
  padding: 10px;
}

Offsets

This framework needs supporting of offsets I think.

Text Wrapping

I had a need to have images respond to t=resizing at different screen widths and also have text wrap around the images. Being a fan of gridism I was well aware that it would satisfy my image requirement, but not the text wrapping.
After some thought I came up with what seemed like a solution. It probably wouldn't work, but was worth try. It was simply to use gridism for the images and not for the text.

After unashamedly altering gridism, but keeping in the spirit of it's conception, that is to satisfy my thought process of what a grid should do, I cam up with the following.

CSS.

Gridism
A simple, responsive, and handy CSS grid by @cobyism
https://github.com/cobyism/gridism
*/

/* Preserve some sanity */
.grid, .unit {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Set up some rules to govern the grid */
.grid {
display: block;
clear: both;
}
.grid .unit {
float: left;
width: 100%;
padding: 10px;
}

/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { padding-left: 20px; }
.grid .unit:last-child { padding-right: 20px; }

/* Nested grids already have padding though, so let’s nuke it */
.unit .unit:first-child { padding-left: 0; }
.unit .unit:last-child { padding-right: 0; }
.unit .grid:first-child > .unit { padding-top: 0; }
.unit .grid:last-child > .unit { padding-bottom: 0; }

/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters {
padding: 0 !important;
}

/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
max-width: 978px;
margin: 0 auto;
}

/* Width classes */
.grid .w1-1 { width: 100%; }
.grid .w1-2 { width: 50%; }
.grid .w1-3 { width: 33.3333333332%; }
.grid .w2-3 { width: 66.6666666667%; }
.grid .w1-4 { width: 25%; }
.grid .w3-4 { width: 75%; }
.grid .w1-5 { width: 20%; }
.grid .w2-5 { width: 40%; }
.grid .w3-5 { width: 60%; }
.grid .w4-5 { width: 80%; }
.grid .w1-6 { width: 16.6666666667%; }
.grid .w3-6 { width: 50%; }
.grid .w5-6 { width: 83.3333333333%; }
.grid .w1-8 { width: 12.5%; }
.grid .w3-8 { width: 37.5%; }
.grid .w5-8 { width: 62.5%; }
.grid .w7-8 { width: 87.5%; }

/* Clearfix after every .grid */
.grid {
*zoom: 1;
}
.grid:before, .grid:after {
display: table;
content: "";
line-height: 0;
}
.grid:after {
clear: both;
}

/* Utility classes */
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* !important must be added to these floats */
.pull-left { float: left !important; }
.pull-right { float: right !important; }

/* A property for a better rendering of images in units: in
this way bigger pictures are just resized if the unit
becomes smaller */
.unit img {
max-width: 100%;
}

/* 736px and less. */
@media screen and (max-width: 46em) {
.medium_hide {
display: none !important;
visibility: hidden;
}

.grid .wm1-1 { width: 100%; }
.grid .wm1-2 { width: 50%; }
.grid .wm1-3 { width: 33.3333333332%; }
.grid .wm2-3 { width: 66.6666666667%; }
.grid .wm1-4 { width: 25%; }
.grid .wm3-4 { width: 75%; }
.grid .wm1-5 { width: 20%; }
.grid .wm2-5 { width: 40%; }
.grid .wm3-5 { width: 60%; }
.grid .wm4-5 { width: 80%; }
.grid .wm1-6 { width: 16.6666666667%; }
.grid .wm3-6 { width: 50%; }
.grid .wm5-6 { width: 83.3333333333%; }
.grid .wm1-8 { width: 12.5%; }
.grid .wm3-8 { width: 37.5%; }
.grid .wm5-8 { width: 62.5%; }
.grid .wm7-8 { width: 87.5%; }

}

/* 560px and below */
@media screen and (max-width: 35em) {
.small_hide {
display: none !important;
visibility: hidden;
}

.grid .ws1-1 { width: 100%; }
.grid .ws1-2 { width: 50%; }
.grid .ws1-3 { width: 33.3333333332%; }
.grid .ws2-3 { width: 66.6666666667%; }
.grid .ws1-4 { width: 25%; }
.grid .ws3-4 { width: 75%; }
.grid .ws1-5 { width: 20%; }
.grid .ws2-5 { width: 40%; }
.grid .ws3-5 { width: 60%; }
.grid .ws4-5 { width: 80%; }
.grid .ws1-6 { width: 16.6666666667%; }
.grid .ws3-6 { width: 50%; }
.grid .ws5-6 { width: 83.3333333333%; }
.grid .ws1-8 { width: 12.5%; }
.grid .ws3-8 { width: 37.5%; }
.grid .ws5-8 { width: 62.5%; }
.grid .ws7-8 { width: 87.5%; }

/* Sometimes, you just want to be different on small screens */
.center-on-small { text-align: center !important; }
.hide-on-small { display: none !important; }

}

/* 400px 25em /
@media screen and (max-width: 25em) {
/ Stack anything that isn’t full-width on smaller screens */
.grid .unit {
width: 100% !important;
padding-left: 10px;
padding-right: 10px;
}

.unit .grid .unit {
    padding-left: 0;
    padding-right: 0;
}

/* Sometimes, you just want to be different on small screens */
.center-on-mobiles { text-align: center !important; }
.hide-on-mobiles { display: none !important; }

}

HTML.

<title>Gridism • a simple responsive CSS grid by @cobyism</title>

The Last Temptation of Homer

Oh, I'm in no condition to drive. Wait a minute. I don't have to listen to myself. I'm drunk. Last night's "Itchy and Scratchy Show" was, without a doubt, the worst episode _ever._ Rest assured, I was on the Internet within minutes, registering my disgust throughout the world. Remember the time he ate my goldfish? And you lied and said I never had goldfish. Then why did I have the bowl, Bart? _Why did I have the bowl?_ Oh, everything looks bad if you remember it.

Mr. Plow

And the fluffy kitten played with that ball of string all through the night. On a lighter note, a Kwik-E-Mart clerk was brutally murdered last night. Homer no function beer well without. "Thank the Lord"? That sounded like a prayer. A prayer in a public school. God has no place within these walls, just like facts don't have a place within an organized religion. When I held that gun in my hand, I felt a surge of power…like God must feel when he's holding a gun. I'm allergic to bee stings. They cause me to, uh, die.

Life on the Fast Lane

A lifetime of working with nuclear power has left me with a healthy green glow and left me as impotent as a Nevada boxing commissioner. Beer. Now there's a temporary solution. Stan Lee never left. I'm afraid his mind is no longer in mint condition. I didn't get rich by signing checks. Aaah! Natural light! Get it off me! Get it off me! Inflammable means flammable? What a country.

Images.

To my complete amazement it does exactly what I require. Have I just reinvented the wheel?

Bootstrappable?

First off, I loved your demo page and your ideas so much, I decided to use Gridism for my own website frontpage. This after trying CMS after CMS, design after design - Jekyll, Wintersmith, Nanoc, Wordpress, Drupal, Wolf, Hyde, Django... And back to Wordpress (what the rest of the site currently is based on and giving me endless grief).

Long story short: I've decided to use gridism for the frontpage, and either Harpjs, Jekyll or Wordpress for the rest of it with intent to meld the two over time.

My first question is whether Twitter Bootstrap can bootstrap well with Gridism or is this unknown/untested? I don't particularly care about twbs, in fact I prefer Foundation. But I ask for the same reason I use Wordpress (currently): twbs has tremendous 3rd party support, tools and so on.

Please add some more classes — …

.grid .unit.first {
padding-left: 20px;
}

.grid .unit.last {
padding-right: 20px;
}

.grid .single.unit {
padding-left: 20px;
padding-right: 20px;
width: 100%;
}

Some more unit classes?

`.grid .one-sixth, .grid .w-1-6 {
width: 16.6666%;
}

.grid .five-sixths, .grid .w-5-6 {
width: 83.3334%;
}

.grid .one-twelfth, .grid .w-1-12 {
width: 8.3333%;
}`

Thanks!