daneden/toast

🍞 A highly-customizable, responsive (S)CSS grid

Toast Framework

The Toast framework is a grid. That's it. Soon, it might have type styles and whatnot, but its power is in its highly customisable design.

Set any number of columns, any gutter size you want, and whatever classes you need. Just edit the _grid.scss file’s variables to your needs.

You should also know that you’d be insane to use Toast’s grid.

To learn more, go to http://daneden.github.io/Toast

Quick-start guide

Using Toast is easy. First, link to grid.css in your HTML document's head:

<link rel="stylesheet" href="css/toast/grid.css">

Then, to use the grid, you'll need a wrap (provided in your own CSS) and a .grid container.

<div class="container">
  <div class="grid">
        <div class="grid__col grid__col--1-of-4">

        </div>
        <div class="grid__col grid__col--3-of-4">

        </div>
        <div class="grid__col grid__col--6-of-12">

        </div>
  </div>
</div>

Customising

$toast-grid-namespace and $toast-grid-column-namespace adjusts the class names for the grid. With default values, grid wrappers have a class of .grid and columns .grid__col.

$toast-col-groups(n) adjusts column divisions. For example, $toast-col-groups(12) will produce a 12-column grid. $toast-col-groups(3,6,8) will produce a 3-, 6-, and 8-column grid.

$toast-gutter-width is—you guessed it—the gutter width. Accepts any unit.

$toast-breakpoint-medium and $toast-breakpoint-small are breakpoint placeholders. Columns have hooks to change their behaviour under these breakpoints. See the “Modifiers” section below.

Modifiers

Toast has some modifiers to make different kinds of layouts easier. There are breakpoint hooks to have columns behave differently than their default behaviour under breakpoints:

<div class="grid">
  <div class="grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-2 grid__col">
    This column will behave like a 1-of-2 column under the medium breakpoint and the small breakpoint.
  </div>

  <div class="grid__col--1-of-3 grid__col--ab grid__col">
    This column aligns to the bottom of its row.
  </div>

  <div class="grid__col--1-of-3 grid__col--am grid__col">
    This column aligns to the middle of its row.
  </div>

  <div class="grid__col--3-of-5 grid__col--centered grid__col">
    This column is centered and alone in its row.
  </div>

  <div class="grid__col--1-of-2 grid__col--d-last grid__col">
    This column comes first in the DOM, but appears last in its row.
  </div>

  <div class="grid__col--1-of-2 grid__col--d-first grid__col">
    This column appears last in the DOM, but appears first in its row.
  </div>
</div>

That’s it. Have fun.

toast's Issues

Overflow issue using full width

Hello,

I have discovered a little issue when I was trying to make a full width layout.

If you check my codepen --> http://codepen.io/andresgl/full/xZEyXR/ you can see a extra tittle right margin.

I have fixed it by myself changing the "margin-right" on .#{$toast-grid-column-namespace}

(codepend SCSS line 187 and 188)

margin-right: -.3125em;

instead of

margin-right: -.25em;

(5px) instead of (4px).

Maybe you can solve it in another way.

Thank you!

Margins break on img and form elements

To fix you need to add a border-box box sizing to img and form elements. Took me ages to work out, but seems to completely fix the problem of columns not aligning nicely.

SASS compile error, 'invalid selector for @extend on line 217`

Just grabbed _grid.scss and threw it into my project running SASS v.3.4.16 and getting the following error:

[gulp-sass] invalid selector for @extend on line 217 in _grid.scss

the line in question:

    &.#{$toast-grid-column-namespace}--m-1-of-4 {
      width: percentage(1/4);
    }

although I think it's in reference to this block right below it, as the above doesn't contain an @extend...

    &.#{$toast-grid-column-namespace}--m-2-of-4 {
      @extend .#{$toast-grid-column-namespace}--m-1-of-2;
    }

The purpose of -.25em? & best way to add gutter bottom?

What is the purpose of the margin right -.25em out of interest ?

Also the best way to add the same gutter below each column is to simply add it into..

.#{$toast-grid-column-namespace} { padding-bottom: $toast-gutter-width; }

Or is there another more intuitive method built in?

Any progress towards new version

Not really an issue, but just checking if some progress is made regarding inline block weirdness. Even on your demo page, the grid is not aligned perfectly, the first row where one column elements are used is definitely lacking in width, compared to other rows.

Also, any chance on offseting and centered columns for the next version? And the final question, when can we expect a new version?

p.s. the world needs something like Toast, not the bloated frameworks, where one doesn't even use 10% of the code provided:))

Explanation of how to add other widths

First, thanks for the framework. I'm a big fan of simple design and toast hits the right features for me...inline-block vs floats, rational fractions vs n-of-n columns and fluid widths. I'm adding it to a CMS system and the adaptable width and lack of need for clearfix markup is key, that's awesome.

Unfortunately, I don't understand the model well enough to add some of the widths I need. I'm moving from a 16 column system and I simply can't use toast as-is because the layout requires offsets and fine-grained column widths (like 5/16).

I want to adapt toast's model to my existing 16-column grid (i'm currently using skeleton). I've got a start, but I'm not sure how to calculate widths due to the fact that there's a .container and .grid with different dimensions and I don't know how to size my columns relative to that. I also am not sure how the gutters get sized, nor how to add padding offsets for empty columns.

I know it's not your goal for toast, and I'm not proposing adding any of this to the official version, but an explanation of the calculations required for gutters and column widths would be very helpful.

Also, nestability (stripping the outside gutter for embedded widths) would be awesome as well.

Sorry if this request seems vague, I'm just getting started with toast. For example, I'm totally confused as to why there's negative left margin on the grid, and how it still fits seemingly perfectly into the container's padding.

Thanks.

Normalize.css and baseline

Hi Dan,

Is it ok now to use normalize.css with your grid, or the baseline will not work again(like in the old version)?

Baseline doesn’t work…

Not sure if you’re still maintaining this but…

Because you are using normalize.css and not a traditional reset, none of the baseline actually works (you still have margins on a lot of elements that a reset would remove).

Steps to reproduce:

1. Create new HTML file, link it up to a toast.css
2. Add a basehold.it baseline
3. Add loads of text content to index.html
4. Observe.

H

Width between 700 and 710

First off great work! Can't wait until we all can drop IE7 and move on. ;)

I noticed that there seems to be a bug in the responsiveness of the grid in between width 700 and 710px. Tested in FF 11 on OSX lion.

Cheers

list-style-type not displayed

Warning: I'm not a designer and my CSS knowledge is not very advanced.

I've been playing with your library today and noticed that list decorations don't display. I believe the cause is what might be an overzealous reset routine (https://github.com/daneden/Toast/blob/master/toast.css#L26). It's possible that this was by design. Also, perhaps there is a way to fix this in an additional stylesheet? I couldn't figure it out.

Here's the problem in action: http://liveweave.com/RLr39c

Thanks for the great little framework 😄

Horizontal Scroll Bar

Hello. I started to test toast and found an issue. When i connect normalize.css, horizontal scroll bar comes when the blocks are touching the container. How to fix it?

Please convert SCSS to Less

Could you to convert SCSS to Less file?

is this responsive?

Toast way to hide column on mobile?

Does toast have way to hide column for example on mobile? Like: col--m-0-of-2?

Issue when printing the page using Toast Grid

Hello,
I'm using @media print to style my page to print and when I try to print the page, from the preview I can already see that the grid system no long works.

Is there an quick fix for this issue?

Thank you.

license

it should have a license. honestly, i'd prefer a more standard license than the "happy" license from the previous version, but that will work as well i assume.

About changes in v2.0

Hi Daniel,
Could not find reasons for changes done in v2.0.
It was a full change from Grid(12 columns) to fluid percentage based.
Any reasons why both options could not be included ?
(I can always extract from git though)

Regards.

Insane? - Quick Clarification

Is Toast's grid strictly for insane people? Or, am I (a reasonably sane person) free to use the grid?

Feature request: All col-groups for medium and small layouts

As of now it is restricted to -of-2, -of-3 and -of-4. I would like to have all col-groups available.

Just a little tip :)

I noticed you wrote in your grid.css a fix for "inline block weirdness"

well, I'm assuming the weirdness you're talking about is something that is actually expected.

if there is whitespace between html elements inline block elements make a bit of room for that whitespace.

a common fix for these issues is when using haml you could do something like

%p><= "My content"

or, in HTML you could do something like

<p>My Content</p><!-- no white spacing here --><p>My Content</p>

hope this helps! :)

bower package

I'll give Toast a try for my next project :) However, a bower package would be nice :)
http://bower.io

Medium and Small modifiers do not seem to work

I want 3 columns, for large, medium and small. This works above 700px, but below 700px I just get 1 column with 100% width :( Am i doing something wrong?

$grid-namespace: "grid";
$grid-column-namespace: "grid__col";
$col-groups: (3);
$gutter-width: 20px;
$breakpoint-medium: 700px;
$breakpoint-small: 480px;

<div class="grid">
    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-3 grid__col--s-1-of-3">
        aa
    </div>
    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-3 grid__col--s-1-of-3">
        bb
    </div>
    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-3 grid__col--s-1-of-3">
        cc
    </div>
</div>

calculated width + gutter width

Hi Dan,

Just a suggestion here. I started using your older grid, converting it to SASS and but then I decided that set percentages wouldn't work with gutters so I made a function to calculate widths. If you want to swap out your width percentage calculations for each unit so that gutters can be set even in percentages, check this out.

https://gist.github.com/10905171

1-of-2 column under the medium breakpoint Question

Hello - I've currently using 3-of-3 in a row to get 6 boxes displayed (3 rows, 2 x 3), I'd like this to break down to 1-of-2 at the medium breakpoint (e.g 3 x 2), using the 1-of-2 modifier works, but leaves a gap in where i would expect the 4th button to go, as obviously it's in a different row... Just wondered if there was any way to counter this?

Thanks!

margin-right: -.25em;

line 181 in _grid.scss
Is there a reason for this margin in every grid__col? With this my grid-columns do not take full 100%, it is always visible on the right side that there are some pixels missing.

Feature request: add more breakpoints

I was just thinking that mobile @480px and tablet @700px are quite limited nowadays.
Is there any way to modify the existing code so I can have 5 breakpoints for example?
Mobile @320px
Tablet @640px
Desktop @1024PX
Lg-desktop @1920px
Xl-desktop @2560px

one-of-five

I get an error on on-of-five class, the last div goes wrap... chrome browser...

Gamma

This is awesome Dan. Super simple. I did notice what I think is a mistake on line 128. Next to the h3 it says "alpha," and I think you mean "gamma."

Nested divs

First of all: thanks for making this awesome, easy to use framework. I love it and I use it in nearly all of my clients' websites.
However, I have one question / issue: it is not possible to use nested divs in the current setup because of the margin-left: 3% at the unit class. Are there any plans to implement this?

Best regards!

Negative margin on grid?

Why on grid class there is negative margin on right?
margin-right: -0.25em;
It messes up the columns a bit. Is this a bug or is there a reason?

toast-css isn't available on bower registry

Here is my bower's command line log:

$ bower install toast-css
bower ENOTFOUND     Package toast-css not found

considering the setting package's name in bower.json, it seems that this project was not registered. 🍶

Nested grid

Nice tool, thank you very much.
For a grid nested in a grid, is there anyway to define medium and small break-points that depend on the size of the higher level grid and not the screen-size?

Use unminified version of Normalize.css

You're using normalize.css for your "reset", but it has been minified (which removes the CSS comments explaining the code) and you have stripped the top comment that links back to the repo and includes a timestamp to help people identify which version of normalize.css they are using.

Can't center grid columns in small/medium device-widths

I want to center a .grid__col--m-2-of-3 column. But it looks like this selector:

@media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
  &[class*="#{$toast-grid-column-namespace}--m-"] {
    display: inline-block;
    margin-right: -.24em;
  }
   ... 
}

is overriding the display:block; margin-right:auto; of .grid__col--centered. Hence I can't center the column.

Inspector screenshot below:

Is this a bug or am I missing something? Why is the display:inline-block selector necessary? Surely these declarations are by default inherited from .grid__col anyhow?

Thanks

Questions and comments

Love the simplicity of this. A couple questions though,

1. Why not use a normalize instead of a reset?
2. What about using this? http://adamkochanowicz.com/oneline.html

Update bower package to the latest version

I've installed Toast using bower, but I've checked the installed version is an older one (for example variable names are $gutter-width instead of $toast-gutter-width)

Would it be possible to update the current version in bower?

Cheers!

Gutter Width?

Having an issue with gutter width not being rendered. I've copied and pasted raw scss (all namespaces etc. at defaults) directly from github along with the example html. No additional code whatsoever. Everything renders perfectly except for the gutter-- all the divs are squished together. Anyone experiencing similar issues?

Documentation

It is wonderful but it need some documentation. I don't understand two-thirds for example!

Changing CSS Doesn't Work

Hello,

New to web tech.

I'm trying to change the CSS of this : https://github.com/waferbaby/usesthis/ Here I changed the stylesheets/screen.css with stylesheets/toast.css . Then updated the URL in _layouts/default.html . However the changes aren't reflected and all I get is minimal UI.

Please let me know the issue.

Thanks.

Grid breaking with monospace fonts?

Not sure if anyone experienced this, but the grid seems to be breaking on me when font is styled to monospace.

Example in CodePen

Am I missing something? Or has anyone had experience in fixing this issue?

Grid issues

Remove -ms-box-sizing and -o-box-sizing as they were never implemented by IE and Opera respectively.

The grid also fails to account for source-code whitespace issues when using adjacent inline-block elements.

Nameset gutter width

It's nice to have smaller gutters on mobile and it would be great to be able to nameset these so a gutter width is tied to a grid.