Skip to main content

Home/ Tools for web developers/ Group items tagged layout

Rss Feed Group items tagged

Sarah HL

Relearn CSS layout: Every Layout - 0 views

shared by Sarah HL on 02 Jul 20 - No Cached
  •  
    If you find yourself wrestling with CSS layout, it's likely you're making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. Employing algorithmic layout design means doing away with @media breakpoints, "magic numbers", and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.
Vernon Fowler

Golden Grid System - 0 views

  • Responsive grids that use gutters proportional to the screen can make the content feel like it's being squeezed together or pulled apart as the screen width changes.
  • With elastic gutters this just doesn't happen, as the gutters always stay in proportion to the content.
  • If you specify all your font-sizes, line-heights, as well as vertical paddings, margins and borders in ems, they'll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact (save for a 1px rounding error or two), which lets the layout keep the same vertical rhythm regardless of screen size.
  • ...1 more annotation...
  • GGS comes with a set of type presets aligned to a baseline grid, which is based on a base line-height of 1.5.
Vernon Fowler

Unsemantic CSS Framework - 0 views

  •  
    Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it's entirely based on percentages. For instance, if you want a 50% wide column, simply use class="grid-50". There are grid classes for multiples of five: 5, 10, 15 … 95, 100. There are also grid classes for dividing a page into thirds: grid-33 and grid-66.
1 - 4 of 4
Showing 20 items per page