ndw + css   40

Shoelace.css: a back to the basics CSS starter kit
Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with helpful components. Bootstrap users will find it familiar, yet refreshing.
Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any preprocessing at all. The minified version is only 32.1KB and much smaller when gzipped.
webdev  css  framework 
17 days ago by ndw
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your web projects.
web  css  svg  backgrounds 
march 2017 by ndw
The Unexpected Power of Viewport Units in CSS
The days of fixed-width designs and needing to only test against a handful of viewport sizes are gone. We live in a fluid-width world with a myriad of device sizes and aspect ratios
css  viewport 
march 2017 by ndw
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
css  fonts 
february 2017 by ndw
How Flexbox works
Flexbox promises to save us from the evils of plain CSS (like vertical alignment).
Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging.
So let’s take an animated look at how Flexbox works, so we can use it to build better layouts.
Flexbox’s underlying principle is to make layouts flexible and intuitive.
css  web  flexbox 
february 2017 by ndw
Code Smells in CSS Revisited
Way back in 2012, I wrote a post about potential CSS anti-patterns called Code Smells in CSS. Looking back on that piece, I still agree with all of it even four years later, but I do have some new things to add to the list. Again, these aren’t necessarily always bad things, hence referring to them as code smells: they might be perfectly acceptable in your use case, but they still smell kinda funny.
css  web  programming  codesmell 
february 2017 by ndw
Visualize The CSS Color Function
css  colors 
january 2017 by ndw
The 100% correct way to do CSS breakpoints
You don’t want to get a giant lizard in the mail.
css  mobile  publ 
december 2016 by ndw
A free visual guide to CSS
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  web  design  publ 
november 2016 by ndw
I relaunched http://labs.jensimmons.com with a nod to Jan Tschichold, Mino Somenzi, & Piet Zwart. (Use Firefox Nightly)
css  design 
september 2016 by ndw
A modern CSS framework based on Flexbox
css  design  web  flexbox 
august 2016 by ndw
The Languages Which Almost Became CSS
But CSS wouldn’t be introduced for five years, and wouldn’t be fully implemented for ten. This was a period of intense work and innovation which resulted in more than a few competing styling methods which just as easily could have become the standard.
css  standards  history 
july 2016 by ndw
Grid by Example
The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a modern layout system for websites and web applications.
march 2016 by ndw
Bourbon Neat
A lightweight semantic grid framework for Sass and Bourbon.
css  sass  framework  web 
january 2016 by ndw
A collection of tips to help take your CSS skills pro
css  github  reference  tips 
december 2015 by ndw
Streamlining CSS Print Design with Sass — Medium
Three years ago, my colleagues and I in O’Reilly Media’s Production department made the decision to rearchitect our print-publishing software toolchain to support typesetting print books in HTML and CSS. Doing print layout with web technology was a fairly radical notion at the time (and still is today!), especially in traditional publishing-industry circles where commercial desktop-publishing software continues to hold sway. But we were convinced that aligning our publishing tech with the web stack would pay dividends. Short-term, we knew it would enable us to simultaneously produce print and digital media more efficiently. And long-term, we felt that placing our bets on HTML+CSS was the best way to future-proof our workflows as electronic publishing, both online and offline, continued to evolve.
css  design  print  oreilly 
december 2015 by ndw
About me | Lea Verou
My name is Lea Verou (Lea being short for Michailia or Μιχαήλια) and I’m a computer scientist / web standards geek / front-end developer / web designer / speaker / author,  originally from Greece. I’m currently a Research Assistant at MIT CSAIL, in David Karger’s Haystack group and an Invited Expert in the W3C CSS Working Group.
css  design  webstandards 
september 2015 by ndw
Tufte CSS
Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.
css  design  typography  tufte 
september 2015 by ndw
LESS « The Dynamic Stylesheet language
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
css  development 
march 2011 by ndw
Coding Colors Easily Using CSS3 hsl() Notation
This seemingly impossible task of coming up with color codes off the top of your head can be done using CSS3′s hsl color notation. HSL is a much more “human-friendly” notation than RGB, and with it you can code colors in your head easily without using The GIMP’s or Photoshop’s color-wheel.
color  css 
january 2011 by ndw
HTML5 and Atom Gone Wrong ・ 詹姆斯
Clever use of CSS for upside down answers. Also some other CSS cleverness wrt quotes and "..." for more.
css  web  html 
june 2010 by ndw
Drawter.com - DrawAble Markup Language
Interactive drawing environment that produces HTML+CSS
css  webdesign  tools  design 
january 2010 by ndw
Readability - An Arc90 Lab Experiment
Readability is an simple tool that makes reading on the Web more enjoyable by removing the clutter around what you're reading.
web  usability  ui  css 
december 2009 by ndw
Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazine
In addition, we’ll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.
css  web 
december 2009 by ndw
5 Simple, But Useful CSS Properties
This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use
css  webdesign 
november 2009 by ndw
CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
css  webdesign 
november 2009 by ndw
A List Apart: Articles: Put Your Content in My Pocket
Tips and suggestions for improving web rendering on an iPhone
iphone  web  safari  css  html 
july 2008 by ndw
Blueprint: A CSS Framework
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
css  web  development 
august 2007 by ndw

Copy this bookmark: