#layouts (98 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.
- Best Practices for Chinese Layout — Medium medium.com
10 Principles to let long-form articles more readable If you are going to expand your service into Asia. First, you may see the language wall (and then the…
- shannonmoeller/handlebars-layouts github.com
Handlebars helpers which implement layout blocks similar to Jinja, Nunjucks (Swig), Pug (Jade), and Twig.
- Layout Demos by Jen Simmons labs.jensimmons.com
The Experimental Layout Lab of Jen Simmons Check back often. This will keep changing. Includes the demos for: Revolutionize Your Page: Real Art Direction on the…
- Flexbox Tutorial sketchingwithcss.com
- Fluid Width Equal Height Columns | CSS-Tricks css-tricks.com
- Solved By Flexbox — Cleaner, hack-free CSS philipwalton.github.io
- Liquidapsive (Liqui-dap-sive) liquidapsive.com
Via monospaced.
- Learn CSS Layout learnlayout.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.
Via thegingerbloke.
- 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.
Via smitchio.
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.
- Digital Web Magazine - Everything You Know About CSS Is Wrong digital-web.com
"When released, Internet Explorer 8 will support many new values for the CSS display property, including the table-related values: table, table-row, and table-cell—and it’s the last major browser to come on board with this support. This event will mark the end of complex CSS layout techniques" assuming one doesn't care about IE6, IE7 or source order.
- 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.
"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.
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?
"Font-based layouts will cause issues for people with visual impairments. [...] In usability testing I’ve seen people get really frustrated with horizontal scrolling. Or when they don’t notice the scrolling, frustrated with trying to do things that sh
Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.
Another Blueprint discussion
"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 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.