In my mind a button is a glorified link and a nice simple button is a style class or two away. Here’s a little JSFiddle for an example:
Pretty simple, but you can make them more complicated by embedding an SVG icon, but I talk about that in another post/
All the border:none; and outline:none; in the .button classes are there to override any user-agent stylesheets that like to theme buttons and make yours less pretty. :)
When I need a custom icon asset on a website I’m rather fond of using Scalable Vector Graphic (SVG) icons, especially for simple, pictographic icons, precisely for the reason that I can style them directly CSS. Plus, in many cases SVG is a much better option over raster graphics (like PNG or JPG) because as a vector asset it replaces the need for a bunch tailored assets to cover various display pixel densities, but I digress.
For these instructions, I’m going to make a large assumption that you know how to make a vector graphic and use a vector editor. I personally use Inkscape for all my icon creating needs, but you can use whichever tickles your fancy. So all you need to do is create a simple pictographic icon that’s a single path (by merging all paths or whatnot), fill colours are irrelevant, since we’ll be using CSS later on.
And here’s one I made earlier of a music note:
Next, since vector editors tend to add a lot of unnecessary metadata and cruft to saved/exported SVG assets, we’re going to scrub them: this is where I use a small command-line utility called svgo to strip out all the unnecessary code and give you something nice and neat like this:
<svg height="16" width="16">
<path
d="M 5,1 C 5,1 5,1 5,2 L 5,9.1875 C 4.68353,9.07398 4.35553,9 4,9 2.34315,9 1,10.34315 1,12 c 0,1.65685 1.34315,3 3,3 1.65685,0 3,-1.34315 3,-3 l 0,-7 6,0 0,4.1875 C 12.68353,9.07398 12.35553,9 12,9 c -1.65685,0 -3,1.34315 -3,3 0,1.65685 1.34315,3 3,3 1.65685,0 3,-1.34315 3,-3 L 15,1 c 0,0 0,0 -1,0 z" />
</svg>
Now, if you embed the SVG directly in your site’s code it becomes very simple to style with CSS since you can directly reference the objects within it such as the SVG itself and the icon (path) within it, for example you can give it a fill color:
svgpath{fill:blue;}
This technique is not limited to tiny pictographic icons, if you need to do more complicated stylings you can add class names to the various elements of the SVG to style them individually.
Having read about how static sites are way more lightweight and the codebase can be quite minimalistic, they sounded right up my alley.
So, I basically rewrote the entire site in static HTML, using Jekyll, and I ditched the very bloated Wordpress as a my blogging backend—all of which I have to say was a learning experience, but it only took me a few days to get the hang of.
Another benefit of becoming static, is that I can host my site on an Amazon S3 bucket (which also conveniently has a Ruby gem which I can use to deploy to S3 immediately).
I’ll have to now work on the responsive design aspects and try out some of these trendy CSS preprocessors, like SASS.
Since I operate a few Personal Package Archives over on Launchpad I wanted a way to log the number of downloads for each package and file them by date. Fortunately there’s Launchpad’s API and Python.
In one respect, design is the culmination of the careful consideration of many elements that together make a finished product and what makes really good design is paying attention to the fine details (including the unseen ones).
What makes really good design is paying attention to the fine details
On the surface this may seem nit-picky or obsessive, but in reality it all adds up to an end result that is extremely polished and professional.
