5 useful CSS sites

I’ve been doing a lot of web development recently, primarily via the magical Hugo platform. Between it and the great themes for it, it’s making website building fairly painless. Of course, each theme often needs customising to the relevant brand a given site is for. That customising is usually just one by some fonts and by tweaking the CSS.*

I’ve been relying on some old, and some very new, funky tools to help with CSS hacking and I thought I would share them, in case they should prove useful to you in the future.

  • Developer Tools (F12) – you need to be using this, it’s awesome. Love changes to CSS, finding the right element, checking inheritances, viewing errors, and more. There are so many posts out there that help boost your usage of this but LMGTFY
  • CSS Linter – for checking out whether your CSS has any problems like duplicate classes
  • Hextractor – for bringing out all the colour codes in use in some CSS. Very handy for viewing the palette or getting a list so you can easily replace values
  • cssnext – use the latest CSS features like variables (ZOMG!!) and get a converted to mainstream version. I used this to put colours at the top of a file, and reference them throughout to make changing theme a breeze
  • Adobe Color not strictly CSS but incredibly handy for building quick colour schemes based on a given colour

What nifty sites and utilities am I missing for my CSS fudging? Please share your recommendations

* By this I mean that I add a custom CSS sheet, which overrides any existing values for non-destructive CSSing