background preloader

A grid system for fixed and fluid layouts

A grid system for fixed and fluid layouts
Responsive Make the grid fluid or fixed and add per-media layouts as needed. Change the column and gutter widths and remove or add columns as needed. Semantic The grid keeps your markup semantic and works without any "grid_x" classes. Unless you want to use them, in which case they are included. Precise Profound Grid uses negative margins to calculate columns. Unlike with other grid systems, fluid layouts will look exactly the same in every browser.

Related:  apapantoSwagGrid systemscode utile / outils

Layouts Pure was crafted with the goal that it can be used in every web project. To showcase this, we've made some common layouts that leverage Pure. These layouts are responsive and don't require JavaScript (except for certain menu interactions). Rolling Your Own Grid Layouts on the Fly Without a Framework Do you hate CSS grid frameworks but love the rapid layout benefits that they provide? Do you struggle with the math and code necessary to create your own flexible multi-column layouts on the fly? Today we’re going to walk you through creating your own basic, reusable system for creating multiple columns that you can implement anywhere any time with only a few lines of code. No bloated code or non-sematic class names required! Grid Frameworks: Pros and Cons

Responsive Web Design Patterns Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern A Responsive Off-Canvas Menu This is a responsive off-canvas menu demo using CSS transforms and transitions. Give it a try on your mobile device! Check back soon for a more accessible version. This article is from my blog. To wrap up 2011 I wrote a few thoughts on web design looking forward.

Gridlock  /  Projects  /  Ben Plum Syntax Gridlock features three distinct grid sizes that correspond to specific screen sizes: desktop, tablet and mobile. Desktop features a full 12 or 16 column grid, tablet snaps down to 6 or 8, and mobile contains only 3. Sample Work — PSD to HTML & CSS services — According to our Privacy Policy and NDA your files are safe with us. We will never share them with anybody without your clear consent. You can download our sample projects below. HTML5 CSS3 Responsive Website made for Jordan Price, UI/UX Designer from San Francisco. download sample Magently — HTML5 CSS3 Fluid, mobile-friendly site for our new brand, featured on CSSMania & Design Shack — with some neat CSS3 animations and parallax.js

Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2.

Off Canvas Layouts CSS - Foundation 3 - ZURB Playground - Off Canvas What Now? If you've used Facebook's iPhone app (or Path, or any number of apps that now follow this convention) then you've seen an off canvas panel in a native app. You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). Luke Wroblewski, author of Mobile First, mentioned this style of layout in his roundup of mobile layout patterns. He and Jason Weaver then worked to create a batch of layouts, which they published to demonstrate how layouts like this could work on the Web.

Related:  CSS Frameworkstools