File Identity and Metadata Project

A Project by Brandt Redd

Monday, July 2, 2018

Simple, Clean, and Functional CSS Styles

When other images fail, bollards will do.

Let's say you're creating a website and you need a really good CSS stylesheet for it. There are a ton of attractive styles out there; many of them created by talented designers. But, from a programmer's perspective they have frequent problems. They are hard to use, not accessible, or faul to adapt to mobile form factors.

That's where I was a couple of months ago. I looked around to find a good example to start from. I found lots of articles about good principles but no simple basis for my css. So, I'm offering the stylesheets I created. They may not be the very best in the world. But they look good, are well designed, easy to use, and license free.

Here's a summary of what makes up a good CSS Stylesheet:

  • The theme should be simple and functional.
  • The look shouldn't be so dramatic that it draws attention away from the content or interferes with communicating the message.
  • Web conventions should be retained such as underlined links and menu mouseovers.
  • Contemporary elements like appealing fonts, gradient shading, appropriate use of color and stylish borders should be used to give the site a modern look.
  • The stylesheet should use semantic HTML tags the way they are intended to be used. This includes elements like <header>, <footer> <article>, a full set of section headers (<h1>, <h2> etc.), <blockquote>, and <code>. Semantically named classes should be provided for elements that don't exist in HTML like .title and .subtitle. Not only to these elements make the stylesheet easier to use, but they also assist in search engine optimization (SEO).
  • The style should facilitate making accessible pages: The order of elements in the HTML should follow the reading order (for screen readers). Foreground and background should have high contrast for readability, measurements such as font sizes, margins, padding, positions, should all be in "em" units thereby making elements grow proportionally and text flow properly when users zoom in and out.
  • The layout should be responsive — looking good on everything from an extreme widescreen monitor to a mini tablet or phone.
  • The stylesheet should be self-contained — not relying on bitmap graphics though it can use web fonts if they are publicly available and hosted (thanks, Google).

The result is in FileMeta/WebStyles on GitHub.

The first thing I did was create a sample web page that exercises every element I needed to include in the stylesheet. I added some JavaScript so that you can switch styles on-the-fly. This enabled A/B testing so that I could quickly compare the results of a change with the original.

I declared common elements such as colors and gradients in variables so that they can be changed in one place. It was tempting to use an enhanced stylesheet format like [SCSS]( but I found that my style goals are simple enough not to need it.

I refined my work into four stylesheets named after my websites on which they are used: "FileMeta", "BrandtRedd", "EdMatrix", and "OfThat". To these I added "Block", which is an interesting variant on "FileMeta", and "BrowserDefault" which is a blank stylesheet showing you what the page would look like with the default browser styles.

All but "OfThat" look pretty similar to each other. I was deliberately seeking a common theme. That's not a limitation of this approach. You can use one of these as-is but I recommend making it your own. Change a font, use a different color scheme, add a columnar layout, whatever. The stylesheets include lots of comments to help guide you and the web is full of tutorials on how to use CSS. I'm partial to W3Schools.

I'm dedicating this to the public domain using the "unlicense". Use or adapt it however you want. There are no legal restrictions, and no requirement that you need to credit me. However, a mention of FileMeta or one of my other sites would be appreciated if you have an appropriate opportunity.

Happy styling!

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.