Responsive Grid Layout Framework

 

I want an easy to use grid framework for my current web project. These are the features i would appreciate:

  • fluid grid layout : boxes that can be aligned horizontally (side by side), each having the same height (for example a 3-column layout), working with 100% width
  • responsiveness : adapts automatically when resizing the browser window
  • mobile devices : shows an alternate fitting layout for pads and mobile phones
  • text size : optionally adjust text sizes dynamically (for example full width headlines)
  • image size : optionally adjust images sizes dynamically (for example full width image galleries)
  • breakpoints : optionally define width values which trigger events which alter the layout (for example removing buttons if the width is fallen below a threshold)

    • Update

    I found many grids, but narrowed it down to the following three promising frameworks that might be a good fit for my requirements:

  • Foundation
  • Semantic Grid
  • Golden Grid System

    • Here are all the others:

  • CSS Grid (not fluid)
  • 320 and Up (not fluid)
  • Columnal (not fluid)
  • Skeleton (not fluid)
  • SimpleGrid (not fluid)
  • Less Framework (not fluid)
  • Bootstrap (non-semantic classes)
  • Breakpoints.js (only breakpoints, too similar to media queries)
  • Adaptive images (only images)
  • FitText (only text)
  • Gridset (commercial)
  • HTML5 Boilerplate (old)

    • Normally, i would test them myself before asking here so that i can formulate more specific questions. But due to the vast amount of frameworks i'd like to hear some pointers where to begin.

  • How are your experiences with these or other similar frameworks?
  • Do you recommend a specific framework that matches my requirements?

    • Solution

    I ended up using Foundation which is clearly the winner in this race - in my humble opinion.

    Update 2

    Bootstrap 3 is a real competition now, because it supports semantic grid classes too. And it supports SASS as well as LESS.

    I have used columnal priorly and it does provide most of the functionality that you want apart from the breakpoints feature. It is easy to use and is adaptive. In mobile screens the grids degrades to a stack so all the column contents are shown one under the other. However for the intelligent adaption feature, as you have outlined in the breakpoints feature : I would very strongly recommend you to use the CSS 3 media queries directly because that is exactly what they are meant for and they are not difficult to use. The CSS frameworks which provide these features under the sheets utilize media queries only.

    Taking a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive , Bootstrap's fluid grid does provide some convenient shortcuts for setting css properties for specific screen sizes which are not present in columnal.

    链接地址: http://www.djcxy.com/p/88314.html

    上一篇: Bootstrap最小宽度网格

    下一篇: 响应式网格布局框架