Entries tagged with #css.↳ Show all entries
Building Web Layouts For Dual-Screen And Foldable Deviceshttps://www.smashingmagazine.com/2022/03/building-web-layouts-dual-screen-foldable-devices/
Stephanie Stimac: “Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them.”
Font-display, by @notwaldorfhttps://font-display.glitch.me/
A small and concise explainer on font loading with the font-display property by Monica Dinculescu on Glitch.
A Collection of Interesting Facts about #CSS Grid Layout, by @mmatuzohttps://css-tricks.com/collection-interesting-facts-css-grid-layout/
Manuel Matuzović shares some of the lesser known features of CSS Grid.
Practical CSS Grid: Adding Grid to an Existing Design, by @meyerwebhttps://alistapart.com/article/practical-grid
“It’s been decades since CSS first emerged, but it’s never contained a system anything like this.” – Eric Meyer on CSS grid and the process of progressively enhancing his site to use grid.
Getting started with variable fonts, by @clagnuthttp://clagnut.com/blog/2389/
Richard Rutter explains the basics of variable fonts and the new values coming with CSS4.
Understanding Flexbox: Everything you need to know, by @OhansEmmanuelhttps://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbj
A concise and complete introduction to CSS Flexbox.
Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 wayshttps://24ways.org/2016/responsive-display-text/
Richard Rutter (Clearleft) shows how to use
vmin and a hybrid method of sizing text using CSS
calc() to achieve balanced font-sizes for different viewports.
cssreference – a free visual guide to CSS, by @jgthmshttp://cssreference.io
Learn by example cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
How Will Web Components Change CSS Architecture?https://snook.ca/archives/html_and_css/will-web-components-change-css
Why everybody who talks about the importance of semantics is both right and wrong at the same time.
Developing Dependency Awarenesshttps://www.smashingmagazine.com/2016/05/developing-dependency-awareness/
Progressive enhancement once more is on a roll: Great(!) article by @AaronGustafson about reducing dependencies
Grid Style Sheets 2.0https://gridstylesheets.org/
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
It's about time to learn CSS Flexbox. And this ingenious game lets you get your head around the relevant CSS properties in no time. Wonderful work.
An opinionated styleguide for writing sane, maintainable and scalable Sass.