#layout (70 links)
- Anchor Positioning Is Disruptive | OddBird oddbird.net
The more I play with it, the more convinced I am that anchor positioning is going to unlock some surprising new layouts.
- Magnet – Window manager for Mac magnet.crowdcafe.com
- gridless.design gridless.design
For the purposes of the following observations and examples we'll be referring to the grid used for user interface (UI) design to layout a web page or application. This is commonly known as the n-column grid or the n-pixel grid.
- Flexbox Tutorial sketchingwithcss.com
- Fluid Width Equal Height Columns | CSS-Tricks css-tricks.com
- Solved By Flexbox — Cleaner, hack-free CSS philipwalton.github.io
- Height equals width with pure CSS mademyday.de
- Learn CSS Layout learnlayout.com
- Fixed Positioning in Mobile Browsers | Brad Frost Web bradfrostweb.com
- IE10 Snap Mode and Responsive Design - TimKadlec.com timkadlec.com
- On ems and rems | Filament Group, Inc., Boston, MA filamentgroup.com
rems and ems serve different purposes and need not be mutually exclusive; both can be very useful in the same CSS layout, depending on what you’re trying to do
- Equal height boxes with CSS | 456 Berea Street 456bereastreet.com
7 years old and we still can't do this.
- Fixed Footers without JavaScript « Boagworld boagworld.com
- How to: vertical centering with CSS | The Hickensian | Hicksdesign hicksdesign.co.uk
A classic.
- Gridulator: Make pixel grids, lickety-split gridulator.com
- Adactio: Journal—A responsive mind adactio.com
The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.
- In the Woods – Vertical Centering With CSS blog.themeforest.net
- New CSS Sticky Footer - 2009 cssstickyfooter.com
Working in all major browsers, including Google Chrome!. It works with floated 2-column layouts and we don't get overlap in resized browser windows unlike older solutions you find when you Google sticky footer. And you don't need an empty push div.
When all the sections end evenly on the page, users subconsciously decide there isn’t anything else to look for and don’t try to scroll. Of course, if they don’t scroll, they miss important content, such as the list of products.
- Pixel Perfect pixelperfectplugin.com
A Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. By toggling the composition on and off, the developer can visually see how many pixels they are off in development.
IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.
- Float-less CSS layout tjkdesign.com
"A CSS layout that does not use DIV, FLOAT, CLEAR nor structural HACK!" It uses OLs. This is probably a horrible thing to do in terms of accessibility and semantics. Avoid.
- Bits & Pixels – Blog Archive – Cross-browser transparent columns bitsamppixels.com
How do we create transparent columns that can work in all browsers? What if we could use the opacity property but still have the content opaque?
- SimpleBits ~ Gridlasticness simplebits.com
A few notes when trying to create a grid layout using ems
Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.
- Blueprint. A CSS Framework. : Journal : Mark Boulton markboulton.co.uk
Another Blueprint discussion
- ClickTale Blog » Unfolding the Fold blog.clicktale.com
"In this post, we will demonstrate with charts and real data several behavioral patterns related to scrolling." No such thing as the fold - useful background for this POV.
- CSS Entry - Cody Lindley: CSS Step Menu codylindley.com
A step menu (AKA wizard menu). This menu has a varying amount of steps, dependent upon the type of user accessing the application.
- CSS Float Theory: Things You Should Know | Smashing Magazine smashingmagazine.com
The most important things you should keep in mind developing css-based layouts with floats.
- Actual Browser Sizes (final) - Baekdal.com baekdal.com
In order to support 95% of your visitors, you need to design for a maximum size of 776x424px.
- Liquid Flash Layout tutorio.com
This tutorial is an explanation of the techniques involved in creating a fluid flash movies that adapt to browser resolution.
- Subtraction: Oh Yeeaahh! subtraction.com
Creating some kind of definitive documentation about my approach to designing for the Web with the typographic grid as my primary layout tool.
- Information Architects Japan » iA Notebook » The 100% Easy-2-Read Standard informationarchitects.jp
- A List Apart: Articles: Whitespace alistapart.com
The space between major elements in a composition is “macro whitespace.” Micro whitespace, is [...] the space between smaller elements: between list items, between a caption and an image, or between words and letters.
- Adactio: Journal - New Year’s Resolution adactio.com
"The numbers clearly show that monitor sizes and resolutions are getting bigger. The most common interpretation of that is more and more people have bigger displays. But an equally valid interpretation of the numbers is the range of displays is bigger tha
- Easy Clearing: Even Bloody Easier Clearing thoughtballoon.co.uk
What we actually need is a selector that applies to everything immediately after our floated element, or its container. The W3C spec already has this element: the adjacent selector: A + B.