Are you tired of flat design in every way? Do you miss the good old days of Windows 7 with its glassy effects and raised buttons? I have what you need: 7.css. In the spirit of XP.css or win98.css, it is a style framework that will give a fresh look (or old, depending) to your web interfaces!
So how does it work?
Well, you call it in your HTML page then you just have to add the right classes to your HTML elements and voilà, your site will suddenly have a little air of déjà vu.
This lib was designed to be accessible et responsive which means that your retro interface will adapt perfectly to all screens, from the good old desktop PC to the latest smartphone. And in terms of accessibility, it’s tip top too: management of keyboard controls, support for screen readers, everything is planned to ensure that your site remains usable by everyone.
Besides, to show you that 7.css isn’t just a nostalgic hipster thing, I’m going to give you a little demo. Together we will create a very 2000s interface, with its main window, its text entry area and its very shiny buttons. Come on, let’s start with the HTML structure:
Nothing fancy so far, we have our window structure with its title, its controls to reduce/enlarge/close, a list of contacts, a field to enter your message and a status bar. Now, as you can see, I added some styling with 7.css:
And there, magic! Our chat interface is instantly adorned with the finery of Windows 7. The window has its gray outline and its sky blue title bar, the input field and the button have their very recognizable aqua look.
Afterwards, I’m not saying that we should launch into a complete remake of Windows either, eh, but I find that it can bring a little touch of originality and personality to a website, especially in this sanitized world of current design where everything looks the same.
To discover here!
