Links tagged “layout”

css-tricks.com

A reference guide to CSS flexbox covering every property on the flex container and on its items, with diagrams, examples and browser-support notes.

bitsofco.de

Explains what CSS display: contents does — dropping an element's own box while its children stay in the layout — and where it helps with grid and flexbox markup.

kilianvalkhof.com

How to give an element a sloped edge whose angle stays constant whatever its width, using clip-path with viewport-width units.

github.com

A React component for resizable split-pane layouts, splitting vertically or horizontally with a draggable divider between panes.

isotope.metafizzy.co

A JavaScript layout library that filters, sorts and animates groups of items across layout modes such as masonry, packery and fit-rows.

marvl.infotech.monash.edu

cola.js, a JavaScript library that adds constraint-based layout to graph and diagram drawing in the browser, usable alongside D3.

w3.org

W3C Working Draft of 30 June 2009 for CSS multi-column layout, defining the twelve properties that flow an element's content into a set of columns.

grokdotcom.com

Questions whether Jakob Nielsen's F-shaped scanning pattern holds regardless of a page's design, arguing that layout, imagery and formatting steer where visitors look.

960.gs

CSS framework built on a 960-pixel page width, shipping 12- and 16-column grids plus sketch paper and templates for the usual design tools.

designinfluences.com

Demo page for the Fluid 960 Grid System, a percentage-width take on the 960 Grid System shipping 12- and 16-column templates for MooTools, jQuery and plain CSS.

alistapart.com

A List Apart article introducing faux absolute positioning, a CSS technique mixing floats and relative positioning to build flexible multi-column grid layouts.