CSS Icon

CSS

Styling the web and views since 1996.
98 Stories
All Topics

CSS github.com

Preview minimal CSS frameworks with this drop-in switcher

Minimal CSS “frameworks” are on the rise. There are so many of them now that it’s hard to compare apples to apples. This’ll help.

This is a quick drop-in CSS switcher to allow for previewing some of the many minimal CSS-only frameworks that are available. See the demo or drop the switcher into your own page to see how different frameworks would look together with your content.

This project only includes minimal frameworks, in other words, boilerplate / classless frameworks that require no adjustment of the corresponding HTML and can be simply dropped into the project to provide a starting point for further design. No additional javascript, compiling, pre-processors, or fiddling with classes should be required for these to look good and be responsive.

CSS github.com

A ridiculously small responsive CSS framework

lit is 395 bytes small. For reference, here’s 395 bytes of Lorem Ipsum text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at gravida nibh. Aenean vulputate ante quam. In imperdiet fermentum risus, vel varius dui vehicula non. Nunc gravida faucibus erat, vitae accumsan eros accumsan eget. Nam at fringilla turpis. Aenean mollis diam leo, quis eleifend ex efficitur sit amet. Sed porttitor quis mauris eu varius. Sed viverra sagittis dapibus blandit.

Andrey Sitnik Evil Martians

PostCSS 8.0 is coming. Here’s what it brings

Andrey Sitnik:

PostCSS, the framework for processing CSS with JavaScript that I started building while working at Evil Martians, has been around since 2013. With 100+ million downloads a month, it quietly tops the charts of most popular front-end tools. It is harder to find front-end code that does not rely on it in one way or another, many thanks to the ecosystem of plugins that the community has been building for years.

Support the project on Open Collective and click through to read what’s in store for the first major release in over two years.

Eric Meyer meyerweb.com

It’s time to get static

Eric Meyer says…

If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static.

…too many sites are already crashing because their CMSes can’t keep up with the traffic surges. And too many sites are using dynamic frameworks that drain mobile batteries and shut out people with older browsers. That’s annoying and counter-productive in the best of times, but right now, it’s unacceptable.

Eevee eev.ee

Old CSS, new CSS

Need a history lesson of CSS and web design? Take a long journey with Eevee on the subject…

I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with.

I’ve been taking for granted that most folks doing web stuff still remember those days, or at least the decade that followed, but I think that assumption might be a wee bit out of date. Some time ago I encountered a tweet marvelling at what we had to do without border-radius. I still remember waiting with bated breath for it to be unprefixed!

Tyler Sticka cloudfour.com

Far future CSS snippets

Tyler Sticka did some pondering:

The other day I was using CSS grid and custom properties to solve some problems that would have seemed almost impossible only a year or two ago. This made me wonder: What CSS could I be writing in a few years that might seem far-fetched today?

Container queries, content-aware SVG, click/touch target sizing are just a few of the CSS features Tyler can’t wait to get his editor on.

CSS sscaffold-css.com

Sscaffold – lightweight css for people who build things

sscaffold combines css rules from normalize.css, skeleton.css, and milligram into a single, reorganized, easy-to-use css file, with bugfixes and a few other updates and additions. It emphasizes sensible defaults and semantic HTML.

This library (not framework) looks like a good starter for many projects.

The single file is human-readable, commented, includes credits to original authors, and is designed to be easily customized.

HTML almanac.httparchive.org

The HTTP Archive's first annual *state of the web* report

Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.

There’s so much to digest here. 85 contributors! Quite an achievement and one that I’m excited to dig in to.

Rachel Andrew Smashing Magazine

Everything you need to know about CSS margins

Margins in CSS seem simple enough at first glance. Applied to an element it forms a space around the element, pushing other elements away. However, there is more to a margin than you might think.

No kidding! Margin collapsing has got to be one of the hardest things about CSS for new developers, and this article not only goes into it and how to avoid it, but explains the “why” behind it.

0:00 / 0:00