Links
Entries tagged with #css.
↳ Show all entriesBuilding Web Layouts For Dual-Screen And Foldable Devices
https://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 @notwaldorf
https://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 @mmatuzo
https://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 @meyerweb
https://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 @clagnut
http://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 @OhansEmmanuel
https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbjA concise and complete introduction to CSS Flexbox.
Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 ways
https://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 @jgthms
http://cssreference.ioLearn 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-cssWith the slow rise of Web Components—the breakdown of interfaces into self-contained chunks of HTML, JavaScript, and CSS—will we see an evolution (or revolution) in how we manage the way we write, build, and bundle the CSS for our web sites?
Semantic CSS
http://snook.ca/archives/html_and_css/semantic-cssWhy everybody who talks about the importance of semantics is both right and wrong at the same time.
Developing Dependency Awareness
https://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.0
https://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.
Flexbox Froggy
http://flexboxfroggy.com/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.
Sass Guidelines
http://sass-guidelin.esAn opinionated styleguide for writing sane, maintainable and scalable Sass.