Skip to main content
Known Participant
April 5, 2017
Question

Creating responsive website with a grid - advice?

  • April 5, 2017
  • 2 replies
  • 1050 views

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

    This topic has been closed for replies.

    2 replies

    rayek.elfin
    Brainiac
    April 5, 2017

    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.

    Known Participant
    April 5, 2017

    This is great!

    Thank you very much.

    pziecina
    Brainiac
    April 5, 2017

    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).

    Known Participant
    April 5, 2017

    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
    Brainiac
    April 5, 2017

    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.