I’ve complained about styling forms before on this blog. But things have gotten better over the last several years and we are starting to see some browser consistency. I did run into a problem with select elements to find that adding pseudo classes won’t work, which is my usual go to for adding font icons to… things. So I tried something else, using an SVG as a background image and I think it came out pretty great.
Pure CSS Vertical Divider
So several months ago I had a few designs come by my desk requiring vertical dividers between the columns of a grid system. If you have done any front end development for some time you will know how much of a pain this can be. The requirements that I required for a vertical divider were the following, dividers need to expand to the column with the most amount of content, need to have some responsive aspect to it, needs to be able to be added to other columns fast. So after racking my brain for several hours, I came up with the solution below.
Please feel free to pick this apart and adapt it to your frameworks and grid systems!
Fullscreen Masthead
A very popular feature among sites right now is to have a call to action or as I like to call them a “Masthead” that occupy the entire browser window and scales to fit any browser size. It is a great way to get a single message across to your audience without other site elements distracting or using a terrible slider. But I found it terribly hard to Google this feature and an array of methods to achieve this effect.
I choose to stick with a simple CSS solution for the Masthead and borrowed some javascript from MightyScroll to achieve the desired feature. Feel free to play with it below.
[CodePen height=400 show=result href=niqKL user=philhoyt ]
Justified (Full Width) CSS Navigation Menu
Justified menus have been an issue for me. Designers have always given me mocks up which show menu items fluidly filling the width of the layout. If you have ever attempted to do this in practice you will know it is more difficult than it sounds, especially if the number of menu items changes during dev. The above code attempts to solve this issue using flexbox which works really great with modern browsers and an IE 9 fallback using display:table which doesn’t work in Firefox because WHY on earth would you want to apply position:relative to an element with display:table-cell #sarcasm.
Generic CSS Buttons
[CodePen height=300 show=result href=wCIGc user=philhoyt ]
Much like my search for a drop down menu, I failed to find a great solution for buttons that were not image based, js heavy, or had large amounts of CSS to over complicate them. So I create these very simple buttons can can add to your project and styled to your liking.
Simple Pure CSS Drop Down Menu
I made this very stripped down drop down menu. Enjoy!