Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit 960 Grid System Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development Adapt.js - Adaptive CSS The Semantic Grid System 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. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. Later on I developed Frameless, the last entry in my early CSS grid system saga.
The Shapes of CSS Learn Development at Frontend Masters CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right Triangle Bottom Left Triangle Bottom Right Curved Tail Arrow via Ando Razafimandimby Trapezoid Parallelogram Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Square via Joseph Silber Diamond Shield via Joseph Silber Diamond Narrow via Joseph Silber Cut Diamond via Alexander Futekov Egg Pac-Man Talk Bubble RSS Feed via Kevin Huff 12 Point Burst via Alan Johnson 8 Point Burst via Alan Johnson Yin Yang via Alexander Futekov Badge Ribbon via Catalin Rosu Space Invader via Vlad Zinculescu TV Screen Magnifying Glass
A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter) Responsive web design is here to stay. Jeffrey Zeldman's press, A Book Apart, has published a book by the name. The HTML5 Boilerplate has responsive elements built into its code base. Why? The Magic is in the Media Query With the advent of CSS3 Media Queries, we have the ability to create CSS rules designed specifically for a variety of screen sizes. load assets and layout styles progressively and only as they’re needed Thus, it becomes possible to produce a single "device agnostic, one web boilerplate" for your designs. It's a Beautiful Thing In this short tutorial, I'll provide both a basic review (or introduction) to the basic concepts of responsive design while building a handy CSS3 Media Query Reporter which you may find handy in your future design projects. Then, using that reporter, we will take a first step toward converting a fixed-width grid system into a fluid and responsive grid system. What we'll do here: 1: Introduction 2: A CSS3 Media Query Reporter 3: Toward a Fluid Grid