Create a Grid System

[sfrisk]

Items to consider:

• Since we're right now potentially supporting IE8 and some other older versions of IE, Flexbox solutions are probably impossible at this time. :-(
• Do we want to have a set number of columns (10, 16 etc), or do we want to allow for users to specify the number of columns and gutter widths? This makes everything a bit more flexible for a user to apply to their design, but potentially could complicate things. ( No we want a flexible grid builder )
• Do we want the option to specify if an element to remain in a grid format at the mobile/tablet width, or if it should switch to 100% width.
• Do we want to add styling that allow you to offset a column?

  Update 3/29/15

Summing up the issue so far

• The grid will be an optional module ( other components except for perhaps full page layout stuff when we get there ) will not depend on the grid.
• Do we want to just make susy a dev dependency and implement it through our builder, or make our own from scratch? Benefits of going with something like susy is that the grid can easily be adapted to the needs of a project.
• @cbracco grid proposal https://gist.github.com/arschmitz/39fd81718bb3b3829124
• @jslegers grid proposal https://gist.github.com/arschmitz/2ce0b464ed5dab2d283f
• Should we look at display:grid, and consider only supporting layouts possible with what will be the grid standard that way in the future we could potentially drop the grid component all together? ( IE only right now )

[cbracco]

Taking another page out of @csswizardry's book, I am a fan of fluid (%) columns and fixed (px/rem/em) gutters. With the HTML comments included <!-- -->, this should work in IE8 (minus the @media query modifiers).

See the upcoming Inuit.css implementation of this here: https://github.com/inuitcss/objects.layout/blob/master/_objects.layout.scss

I prefer to use the %-width classes as general purpose "width" utility classes that can be applied to anything, not just grid columns. I also like being able to manipulate grid behavior across a predetermined set of breakpoints (which I typically store as preprocessor variables, and modify on a per-project basis).

Below is some CSS to illustrate what I mean (sorry for the length, I don't currently have this online anywhere yet. A version of it will likely be included in the upcoming Cardinal 3.0.0).

As for offsetting (aka push & pull), if we use the below implementation we can do something like this for offsetting: http://codepen.io/cbracco/pen/hjFDL ... it should work the same way as it would in a traditional float-based grid system.

EDIT( @arschmitz ): Moved code sample to a gist for improved issue readability https://gist.github.com/arschmitz/39fd81718bb3b3829124

[jslegers]

The grid I'm using in Cascade Framework integrates Nicole Sullivan's original OOCSS grid and the media object. It includes the following features :

• Responsive behavior for all browsers that support media queries
• Full support for the desktop version for IE6-IE8
• You can hide content for desktop, tablet, phone and mobile. This works even for IE6-IE8
• You can mix any number of columns
• You can nest as deeply as you want
• You can combine regular grid elements with Media object elements.
• You can have a fluid width, a fixed width or a multiple fixed widths with intervals

AFAIK, there is no grid system with better browser support (IE6) and greater flexibility.

EDIT( @arschmitz ): Moved code sample and detailed description to a gist for improved issue readability https://gist.github.com/arschmitz/2ce0b464ed5dab2d283f

[jzaefferer]

A process suggestion: Consider creating pull requests with the code above, along with test pages to view it in a browser. That allows testing and reviewing and commenting on individual lines, which might be more effective.

[sfrisk]

That could work, great suggestion, @jzaefferer

[jslegers]

@jzaefferer & @sfrisk :

I just released Cascade Framework's grid system as a standalone project, with three test pages. You can find it at jslegers/cascadeframeworkgrid. The code is MIT-licensed, just like other releases of Cascade Framework.

Would that be sufficient?

[cbracco]

Nice grid! A few comments / things to consider:

• I don't think breakpoint naming conventions based on device type is a good idea, since a desktop browser window @ 320px will produce the same outcome as a phone @320px. I try to stick to xs-*, .sm-*, .md-*, .lg-*, ..xl-*, etc as a convention, since the grid behavior is dependent on viewport size and not device type.
• Using floats instead of inline-block forces layout to be in strict rows and columns, which can make it difficult to achieve certain layouts changes across breakpoints.
• Hiding classes should probably be more general purpose, available for use on any element and not just grid items.
• I don't like the idea of applying a clearfix to bare HTML elements, because they will not always require those styles.

Edit ( @arschmitz ) See detailed response from @jslegers along with grid code here: https://gist.github.com/arschmitz/2ce0b464ed5dab2d283f

[cbracco]

:+1: thanks for the explanation, I had misunderstood a few things upon first glance. It's a very robust grid!

In regards to the clearfixing, I sometimes need to append styles to pseudo elements of these common elements (bg images, CSS shapes, etc), and having to "unclearfix" them each time feels a bit hacky to me, but alas. Why not just apply the clearfix to the elements / components / objects that need it? Using a grid with inline-block has been nice, since I only seldom have to worry about clearfixing.

Also, is there any way for grid cells to sit flush with their parent? What if I wanted a grid that behaves as 100%-width stacked items on small devices, but then switch to a three column layout with gutters on larger devices? Looks to me like every .cell gets a margin (which is also equal to the gutter?). Let me know if I missed this option somewhere.

[MichaelArestad]

I'm not a huge user of most grid systems. I find them bloated or goofy in syntax. That said, I'm a pretty big fan of Susy. It's as much or as little of a grid system as the project requires. We could generate any of the above systems with it, but with the added ability of allowing the grid system to be customized easily on a per-project basis. Susy is crazy flexible and makes changing the settings and doing the math quite easy.

Personally, I don't recommend a grid system at all and would like to raise this question: Do we want to include a grid system at all?

I've picked up projects that have used Bootstrap and a few others. Most of the time (from my experience), the grids are used incorrectly despite the quality of the grid documentation.

I've worked on a pretty wide variety of web projects from marketing sites, to products, to CMS's. I've yet to actually need a grid. At most, I need to create a grid for a specific component which is all of a few lines of code.

[sfrisk]

I have thought about the possibility of creating a mixin that allows people to customize their grid implementation, maybe even with #17 we could help users set up the grid they need in the browser before download?

I definitely understand the 'grids are bloated/goofy in syntax' feeling. It's not to bad if you just have 12 columns, but once you start going into behaviors of each grid depending on the size of the screen, you end up with a lot of css (not to mention documentation).

[MichaelArestad]

I would expect the grid to be an optional thing with maybe some customization as you mentioned via the build process. I know it's usually the first thing I remove from any framework.

The problem is the need for multiple types of grids (flexible, fixed) for various situations which tends to make them over complex to begin with. Adding in the ability for functionality based on screen is sure handy to have as well.

I think using a mixin that pulls from a settings map (like Susy uses) would be a good choice for allowing for pretty good manipulation of the grid setup.

[prasunanand]

I tried to create a custom grid builder: _mixins.scss http://pastebin.com/59GbJp0c grid.scss http://pastebin.com/kUM1MQju Right now everything works fine.I am adding more features. Please, have a look. http://jsbin.com/nuvaxihiro/3/

[geekman-rohit]

We should consider allowing users to specify the number of columns, this really simplifies things for a user. But the implementation would be heavy? We could allow the user for instance to define a variable in scss about the number of columns his grid should support? We could later add it to theme roller Just an idea.

[geekman-rohit]

+1 to keeping the grid optional!

[prasunanand]

@geekman-rohit I am creating more mixins to ease the calculations and create margins

[trailofdad]

Having a grid optional/custom is a great idea IMO. It keeps the framework clean and minimal impact for the user. A lot of people like having things clean, minimal and little bloat. This would give them the option to go super lightweight. Keeping things as modular as possible is also important.

[maikuru]

+1 for customizable grid system(s) especially when it's so easy to use tools like Susy.

[arschmitz]

Just to be clear here. We always planned the grid to be optional. We plan to support custom builds so any and all components are optional. There was originally the question of making the grid itself customizable. However i think we long ago decided that was the direction we were taking. So I think this issue is really now just about hammering out an actual implementation of this.

[maikuru]

So in the name of going all John Henry on this, is the idea to: include as dependency, create "wrapper" mixins that generate classes that conform to the project's spec or a much more ambitious undertaking to fork Susy and optimize for Chassis' needs?

[arschmitz]

http://www.w3.org/blog/news/archives/4500

[MichaelArestad]

@maikuru If we wanted go a route like Susy, I'd prefer we just include it as a dependency rather than build out a custom version. Maintaining and building a grid system like Susy can be a pretty big project itself.

@arschmitz Browser support for that is pretty sparse, IIRC. Can't wait to mess with it, though.

[cbracco]

@sfrisk in case you guys are still interested in my grid suggestions, I've made some minor updates to the grid since I last posted ... basically added some shorthand options for widths and some grid gutter options (1px, 0, double, half). Let me know if you'd like me to make any contributions here!

https://github.com/cbracco/cardinal/blob/master/layout/grids.less https://github.com/cbracco/cardinal/blob/master/utilities/widths.less