Links tagged with “css”
-
New CSS that can actually be used in 2024 | Thomasorus
I ignore new CSS for years so this summary might actually be useful to me. In a year or two. (via Adactio)
-
My Modern CSS Reset | jakelazaroff.com
Buy my book, “ConSiStent: A History of CSS Reset”, 576pp. (via adactio)
-
Some simple ways to make content look good - Set Studio
I do like nice clear walkthroughs of design and code like this, including bits of CSS that were new to me. (via Adactio)
-
Tree views in CSS
A collapsible tree view made out of lists and detail elements, no JavaScript. Witchcraft. (via Adactio)
-
An Interactive Guide to Flexbox in CSS
I thought I broadly understood flexbox but this brilliant guide made me realise how little I properly understood. (via Adactio)
-
Modern CSS Reset / Global Styles
This not only seems like a good modern version (which I could do with) but it’s extremely nicely explained. (via Adactio)
-
🖌️ Horton Hears a Whostyle
Nice idea – if someone comments/replies on your site, you use their CSS to render their comment/reply in their site’s style. I think. (via maya.land)
-
SmolCSS
Very little snippets of very modern CSS doing a single thing. As I’m a long way from the cutting edge CSS wise, this is useful. By Stephanie Eckles. (via @simonw)
-
Bulma: Free, open source, and modern CSS framework based on Flexbox
One of those “I’ll forget the name if I don’t bookmark it” things. Looks nice, as these things go. (via Infovore)
-
How to get started with web development | Go Make Things
I’d have no idea what to suggest to someone wanting to learn this stuff, but this looks like a great list for front-end development.
-
Let’s Define CSS 4 · Issue #4770 · w3c/csswg-drafts
Interesting discussion (an actual civil discussion, on the internet!). (via Adactio)
-
All – Tiny Helpers
Loads of websites that each do one useful thing for web designers and developers. (via Waxy)
-
HOW - Pure CSS - cyanHarlow
Nicely done explanation of how Diana Smith uses CSS properties in her amazing CSS art, and what hat art looks like without each property. (via Waxy)
-
Spectre.css CSS Framework
Looks nice. Some handy components that Bootstrap doesn’t have.
-
CSS Grid Layout Interface Builder | LayoutIt!
Very nifty thing for constructing a grid and getting the HTML and CSS for it using CSS Grid. (via FaveJet)
-
Typeplate » A typographic starter kit encouraging great type on the Web
Looks like a nice bit of CSS for styling readable text.
-
Flexbox Froggy - A game for learning CSS flexbox
Very nicely done. Although, even having completed it, I’m still pretty much guessing at how to do anything.
-
BEM 101 | CSS-Tricks
Pragmatic summary of the Block, Element, Modifier CSS style that wasn’t around last time I went down this rabbit hole.
-
Tufte CSS
Some nice things in this example of CSS that styles things in a web parallel of Edward Tufte’s books. (via Russell Davies)
-
CSS ICON — project by Wenting Zhang
Icons drawn only with CSS, and very easy to copy. A bit ugly, but maybe a good inspiration for better… (via @simonw)
-
Can we stop bad-mouthing CSS in developer talks, please? | Christian Heilmann
On why CSS is complex and good enough not to deserve being put down by some developers. (via Jeremy Keith)
-
Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps
Could be useful. (via @paulpod)
-
WTF, forms?
Some quite nice HTML/CSS form controls, but also nice because of the clear description of how they’ve been made. Mostly coming to Bootstrap v4 soon apparently.
-
Coder’s Block Blog / Checkbox Trickery with CSS
Lots of scope for doing this horribly, but some of this CSS-styling of radio buttons and checkboxes is nice for > IE8.
-
Luster - Mobile Web App Checklist
Loads of good tips for making websites feel more native on touch-based devices.
-
Bootstrap Slack
I’m enjoying @mdo’s public Slack channel for Bootstrap. So much nicer than IRC.
-
Code Guide by @mdo
“Standards for developing flexible, durable, and sustainable HTML and CSS,” by Mark Otto, creator of Bootstrap. Not all my preference, but I do enjoy some rigour.
-
Work with me – CSS Wizardry – consultancy, CSS code reviews, speaking, workshops, CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
Another way to do CSS class naming. Here are so many names. All of them feel like they’re trying to make up for fundamental deficiencies.
-
Transitioning to SCSS at Scale
How Etsy moved from “400,000+ lines of CSS split over 2000+ files” to using SCSS.
-
Sass Guidelines
Really good, whether you agree with all the decisions or not. I now want to reorganise all my Sass files. (via Tom Taylor)
-
How to structure a Sass project
Another thing I thought I’d bookmarked ages ago. This is pretty much what I do these days.
-
Huddle/PhantomCSS
“A CasperJS module for automating visual regression testing with PhantomJS and Resemble.js. For testing Web apps, live style guides and responsive layouts.” (via @tomstuart)
-
IE-friendly mobile-first CSS with Sass 3.2
Via previous link, on serving separate, slightly different, stylesheets for old IEs and everything else.
-
Responsive grid system which works in IE6 | Technology at GDS
Using SCSS. And not an ugly hack. Having been thinking about grids/page structure at work recently, and needing to support old browsers, this is handy. (via @benterrett)
-
Learning Susy | Zell Liew
This ($39) book’s good if you’re struggling to get to grips with Susy, the SASS/CSS layout framework. Does a nice job of explaining things in a way that makes more sense than the documentation.
-
suit/naming-conventions.md at master · suitcss/suit
Another CSS class naming convention. I think I like this better than BEM’s, but we’re now quibbling over tiny variations.
-
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
Forgot to link to this when I read, so for completeness… I kind of like this but the ugliness of the double hyphens and underscores just “smells” bad to me (maybe wrongly?).
-
Introducing AM - Attribute Modules for CSS - Glen Maddern: Internet Pro
More stuff about how to do CSS in another new way. I haven’t read this enough times to understand it.
-
CSS Guidelines (2.1.3) – High-level advice and guidelines for writing sane, manageable, scalable CSS
An extensive styleguide for writing CSS by Harry Roberts. (via @mattpointblank)
-
Medium’s CSS is actually pretty f***ing good. — Medium
On creating Medium’s CSS style guide. Really good. I’d love to read more things like this. (via Tom Taylor)
-
GOV.UK elements
HTML/CSS elements and how to use them on GOV.UK. Really useful, even if you’re doing differently, as a checklist of stuff to consider. (via @jamesweiner)
-
Crafting link underlines on Medium
Not necessarily for how they decided to make nice underlines on text, but for the description of how complicated a very simple-seeming website can be. (via @jamesweiner)
-
Absolute Positioning and Horizontal/Vertical Centering
Using CSS alone, no JS. I’m waiting for the inevitable real-world use in which this won’t work. There must be one. Surely. There usually is. (via @jamesweiner)
-
Being a client
A brief bit about the new Code for America website. So worth it for all the Clearleft and pattern library related links. All of them front-end-development gold, leading to even more.
-
8 Sass mixins you must have in your toolbox
Some handy things for use with SASS. (via Infovore)
-
Grid
A very nice step-by-step guide to a simple CSS grid system for responsive websites. Everyone will end up with something more complex, but it’s a nice intro. (via @felix_cohen)
-
Susy: Responsive grids for Compass
Looks like a very nice way to do CSS grids if SASS and Compass are your thing. (via Infovore)
-
Centering in the Unknown
For future reference, another thing about vertically centering text using CSS.
-
Designing CSS Layouts With Flexbox Is As Easy As Pie
I ended up using something like this to vertically centre text, falling back to using JavaScript for browsers that Modernizr suggested didn’t have flexbox.
-
Kapowaz: Cargo Cult CSS
Good article on the drawbacks of OOCSS and some tips for good practice. I like the need to use descriptive selectors, rather than terse ones; these make much more sense to me coming to a CSS file written by someone else.