Skip to main content

Bookmarks tagged with “css”

  1. 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.

  2. 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.

  3. 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)

  4. 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)

  5. 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)

  6. 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.

  7. 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.

  8. Luster - Mobile Web App Checklist

    Loads of good tips for making websites feel more native on touch-based devices.

  9. Bootstrap Slack

    I’m enjoying @mdo’s public Slack channel for Bootstrap. So much nicer than IRC.

  10. 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.

  11. 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.

  12. Transitioning to SCSS at Scale

    How Etsy moved from “400,000+ lines of CSS split over 2000+ files” to using SCSS.

  13. 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)

  14. How to structure a Sass project

    Another thing I thought I’d bookmarked ages ago. This is pretty much what I do these days.

  15. 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)

  16. IE-friendly mobile-first CSS with Sass 3.2

    Via previous link, on serving separate, slightly different, stylesheets for old IEs and everything else.

  17. 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)

  18. 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.

  19. 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.

  20. 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?).

  21. 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.

  22. 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)

  23. 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)

  24. 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)

  25. 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)

  26. 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)

  27. 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.

  28. 8 Sass mixins you must have in your toolbox

    Some handy things for use with SASS. (via Infovore)

  29. 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)

  30. Susy: Responsive grids for Compass

    Looks like a very nice way to do CSS grids if SASS and Compass are your thing. (via Infovore)

  31. Centering in the Unknown

    For future reference, another thing about vertically centering text using CSS.

  32. 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.

  33. 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.

  34. Safari on iOS 7 and HTML5: problems, changes and new APIs | Breaking the Mobile Web

    Very useful look at all the new, improved or broken things in Safari on iOS 7. (via @jamesweiner)

  35. ai/autoprefixer · GitHub

    “Parse CSS and add vendor prefixes to rules by Can I Use.” Very clever and good but, like increasing numbers of things, also makes me go, “oh god, I wish CSS was simpler.”

  36. Bootstrap 2.x to 3.0 Migration Guide

    For moving Twitter Bootstrap sites to the new version. There doesn’t seem to be anything like this in the official 3.0 docs. Yet, at least.

  37. Sneak peek of Macaw - The code-savvy web design tool

    Actually looks quite good. Jump to the end to see the finished page in-browser, and the HTML and CSS. (via @jamesweiner)

  38. CSS Architecture | Appfolio Engineering

    Lots of good thoughts on structuring CSS. (via Tom Taylor)

  39. Geocities as Style and Marketing Gimmick @divshot | One Terabyte of Kilobyte Age

    I’ve had “Geocities WordPress theme” as a “someday” project for ages. Maybe I should cross it off now. Geocities styles for Twitter Bootstrap and Tumblr.

  40. Flat UI Free - PSD&HTML User Interface Kit - Designmodo

    Looks interesting for quickly making things look nice. (via @paulpod)

  41. Ratchet

    “Prototype iPhone apps with simple HTML, CSS and JS components.” Seems really nice. Less extensive than something like jQuery Mobile, but looks nice and simple to get something up and running quickly.

  42. Chrome Web Store - Stylebot

    Lets you adjust the CSS of any website and have your changes stick. *cough*Co-op business banking*cough* (via @bamblesquatch)

  43. Responsive Web Design Frameworks, Grid Systems and Starter Kits

    Good summary of lots HTML/CSS frameworks. (via mildlydiverting)

  44. About HTML semantics and front-end architecture – Nicolas Gallagher

    Really good in-depth thoughts about writing HTML/CSS. Reminds me a bit of that SMACSS style guide (which I can *never* remember the name/acronym for). (via Dotcode)

  45. Modern Web Development

    Pretty comprehensive and good look at the Chrome developer tools. A bunch of things I didn’t know or had simply ignored. (via @simonw)

  46. 24 ways: Rock Solid HTML Emails

    2009, but I assume this is still a good overview of what you should and shouldn’t do when making HTML emails.

  47. A Baseline for Front-End Developers - Adventures in JavaScript Development

    All good stuff. But I must admit, after doing front end dev work (not solely, but a lot) over the past, what, 17 years, these days it’s really, really hard to keep up. (via Dotcode)

  48. Cyberdelia/django-pipeline

    Good-looking thing for compressing and concatenating CSS and JavaScript files with Django. Good documentation, handles LESS, SASS, CoffeeScript etc. Nice.

The most common tags

  1. webdevelopment (727)
  2. london (356)
  3. uk (317)
  4. music (255)
  5. javascript (171)
  6. mac (167)
  7. articles (152)
  8. maps (146)
  9. css (146)
  10. via:kottke (139)

More…