Design and CSS tips from Adam Wathan

30 November 2018

I came across a great video in which Ben Orenstein, the author of Refactoring Rails and a founder of Tuple, pairs with Adam Wathan, the author of Tailwind CSS and the upcoming Refactoring UI book, to improve the docs site for Tuple.

I've found the video so valuable for someone (like me) who has a developer background and wants to get better at design and CSS that I sat down and took notes as I watched the video.

Below you'll find the video and my notes. I hope it serves you and you'll come away with a few tips you can use .

Enjoy!

• (~2:30) Optimal line length for reading should be 65-75 chars. You can set this via the max-width of the container where the text goes.
• (~5:15) mx-auto to center the text in the container so that there’s not so much whitespace on the right on bigger screens. On smaller screens you might not want to do that.
• (~6:00) Body color and headings color should be different so that header colors are more emphasized.
• (~8:00) Adam experiments a lot in the Chrome tools. You just shouldn’t change too many things because then you might forget some of them :).
• (~09:40) Headers should be closer to the text they belong to so that it’s inferred they belong together (so margin-top should be bigger than margin-bottom)
• (~13:00) Adam talks about some design principles and challenges behind naming Tailwind’s utility classes and what values to set them to
• (~22:45) The font-size ratio between headers and paragraph text should be smaller on small screens so that the text sticks more together on smaller devices. You can get away with bigger font size jumps on larger screens. The header font size can be bumped up more on larger screens. Adam puts a class="text-sm sm:text-base” on the html tag so that on anything bigger than xs (starting from sm) the text is bigger.
• (~28:00) In CSS, the rule that is declared later in the file takes precedence if the specificity is the same. Flowing from that, Adam has three sections in his css files: 1. base styles for the whole site (normalization, sensible defaults) 2. component classes (= anything with >1 declarations in it), for example, a button 3. utilities
• (~40:00) A short border can be aesthetic under the main header title (instead of the long border above the header)
• (~40:30) The principle of "design in a text editor first” so that you can design with the real text that’s going to be on the page
• (~42:00) Add meta-viewport tags so that responsive design works fine on mobile (especially as regards to font-size). Adam always snatches those settings from Bootstrap.
• (~45:30) Adam is trending towards using sans-serif fonts for technical stuff. For text, Adam recommends using a font that has more personality than the system fonts.
• (~46:10) Webfonts are not ideal but almost all sites use it and chances are higher that they’ll be cached (so it doesn’t incur a perf penalty). Google Fonts tip: click the type of font you want, sort by popular and filter by having >=10 styles.
• (~50:00) Nice tips about how to position header elements using flex, container padding. svgs are display: inline by default so the line-height affected its position.
• (~1:00:30) Some nice git aliases and using the hub command to create a PR from the command line and to wrap up the session.

The numbers in parentheses are the approximate time where that section starts.