Creating responsive website with a grid - advice?

[MQuilitzsch]

Hi,

I came across the 960 grid for creating layouts, but I want to use a responsive grid.

I then found CSS files from unsemantic.com, but had some apparent trouble with the 'clearfix' for some block items that weren't 100% width.

Bootstrap seems to be the framework to go with, but I'm not yet familiar with it, and there seem to be many other options.

Does anyone have any advice on what is the best CSS or framework to use for universally compatible web design?

Thanks

Matt

[pziecina]

There is no such thing as a univerally compatible framework or css layout, as it will always depend on just what you wish to create.

A grid framework is an hangover from when designers used fixed width layouts, and even though they have now been used to describe a flexible layout system, they are not really suited to a media that can be viewed at almost any width from a few hundred pixels to a 55 inch 4k tv screen, (or larger).

I would at the moment recommend using css flexbox for layout, but many people cannot come to terms with its use, as it requires a different way of thinking about how a layout works from the now traditional 'float' based layout. In the next few years there will also be a rise in the number of people using the css grid layout module, which is a css layout system and has nothing in common with the current grid frameworks such as Bootstrap.

All i can really suggest is try both css flexbox and css grid layouts, and compare them with the frameworks such as Bootstrap and Foundation, both of which are going over to use css flexbox as their default layout system, (which should at least tell you that css flexbox is worth learning first, even if you then move to one of the frameworks).

[MQuilitzsch]

Hi pziecina,

Thank very much for the response.

In a tutorial I noticed the use of media queries.

Does that relate to any or all of the css/frameworks mentioned?

[pziecina]

Media-queries are used to target specific css rules to a screen size and/or resolution, (many more options available).

With traditional float based layouts and all the frameworks they are absolutly essential to getting your layout correct for the various devices and viewing possibilities. However css flexbox does not require the use of media-queries for the actual layout in most circumstances, but that will depend on your expertise in using css flexbox and the devices targeted.

[MQuilitzsch]

Great!

Thanks for the information.

[pziecina]

A few other thing you may wish to take into consideration.

Flexbox i have found is much more suited to use with html5 semantics for the mark-up. Plus this also gives you the built in accessibility features provided by browsers, without any extra mark-up, something you do not get when using any of the frameworks.

[MQuilitzsch]

Interesting.

I'm also looking at this information A Complete Guide to Flexbox | CSS-Tricks

[pziecina]

Even if you decide to use a pre-built framework, flexbox is certainly worth learning.

You will see lots of articles saying do not use, ignore them as even the ones written as recent as 2015 are often refering to the original specs, and as i have already said, many people have difficulty using flexbox correctly, and then decide that no one else should either.

[MQuilitzsch]

Very good.

I'll work with that.

Thanks again.

[rayek.elfin]

If you do opt for a grid framework, I'd avoid Bootstrap, and go with Foundation. 1) it is arguably a much better grid implementation, 2) its syntax is friendlier, and 3) a flexbox-based version is also available. Also easy to download a streamlined version with just the features you will actually be using.

Foundation | The most advanced responsive front-end framework in the world.

Skeleton is also a simpler grid framework with an easier syntax. Skeleton: Responsive CSS Boilerplate

In my opinion Bootstrap is an over-hyped framework.

[MQuilitzsch]

This is great!

Thank you very much.