Skip to main content
  • Matthias Ott
    User Experience Designer
  • About
  • Workshops
  • Notes
  • Articles
  • Links

Links

  • #a11y (8)
  • #accessibility (3)
  • #agile (1)
  • #algorithms (1)
  • #animation (3)
  • #apps (2)
  • #architecture (1)
  • #articles (1)
  • #automation (1)
  • #basics (2)
  • #books (3)
  • #branding (1)
  • #browsers (1)
  • #build pipeline (1)
  • #business (2)
  • #chrome (1)
  • #code (6)
  • #color (2)
  • #component libraries (1)
  • #components (3)
  • #compression (1)
  • #craft (1)
  • #css (14)
  • #css grid (1)
  • #culture (3)
  • #dependencies (1)
  • #design (27)
  • #design thinking (2)
  • #design-systems (6)
  • #development (6)
  • #devices (1)
  • #education (1)
  • #engine (1)
  • #enhancement (1)
  • #flexbox (2)
  • #font (1)
  • #fonts (1)
  • #foundations (1)
  • #freelancing (1)
  • #game (1)
  • #git (1)
  • #github (1)
  • #graphics (1)
  • #grid (2)
  • #grunt (1)
  • #handbooks (1)
  • #head (1)
  • #history (1)
  • #html (4)
  • #hypertext (1)
  • #ia (1)
  • #icons (1)
  • #image (4)
  • #image optimization (1)
  • #inclusive design (1)
  • #indieweb (2)
  • #information (2)
  • #iterative (1)
  • #javascript (4)
  • #js (1)
  • #language (1)
  • #layout (6)
  • #leadership (2)
  • #learning (3)
  • #machine learning (1)
  • #media (1)
  • #media- (1)
  • #meta (1)
  • #modular (1)
  • #navigation (1)
  • #optimization (1)
  • #organizations (1)
  • #pattern libraries (6)
  • #performance (6)
  • #perspective (1)
  • #physics (1)
  • #picture (1)
  • #polyfills (1)
  • #postels-law (1)
  • #principles (4)
  • #process (6)
  • #progressive (2)
  • #progressive-enhancement (1)
  • #prototyping (4)
  • #public speaking (1)
  • #pwa (1)
  • #reference (2)
  • #resource (3)
  • #responsibility (1)
  • #responsive (4)
  • #robots (1)
  • #rss (1)
  • #rwd (4)
  • #sass (1)
  • #science (1)
  • #semantics (1)
  • #sketching (1)
  • #social (1)
  • #society (1)
  • #space (1)

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
  • About
  • Workshops
  • Notes
  • Articles
  • Links
Subscribe

You can subscribe to the RSS feeds for all posts or to individual feeds for articles, notes, and links.

Design and code © 2007–2023 Matthias Ott  •  Made with HTML, CSS, enhanced with JavaScript, powered by Craft CMS. .
Webmention endpoint   Privacy Policy   Site Notice / Impressum