Links Entries tagged with #css. ↳ Show all entries 🔗 Building 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.” #css #css grid #browsers #devices #responsive #rwd 🔗 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. #fonts #webfonts #performance #css 🔗 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. #css #grid #layout 🔗 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. #css #html #layout #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. #webfonts #font #technology #css #typography #variable fonts 🔗 Understanding Flexbox: Everything you need to know, by @OhansEmmanuel https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbj A concise and complete introduction to CSS Flexbox. #css #layout #flexbox #development #design 🔗 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. #typography #responsive #design #rwd #css #code 🔗 cssreference – a free visual guide to CSS, by @jgthms http://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. #css #reference #code #animation #learning 🔗 How Will Web Components Change CSS Architecture? https://snook.ca/archives/html_and_css/will-web-components-change-css With 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? #html #css #web #components #architecture 🔗 Semantic CSS http://snook.ca/archives/html_and_css/semantic-css Why everybody who talks about the importance of semantics is both right and wrong at the same time. #css #semantics #code 🔗 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 #progressive-enhancement #progressive #enhancement #dependencies #js #css #javascript 🔗 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. #css #polyfills #layout #algorithms 🔗 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. #css #flexbox #code #game 🔗 Sass Guidelines http://sass-guidelin.es An opinionated styleguide for writing sane, maintainable and scalable Sass. #code #css #sass #styleguides
