Demo: http://webstyles.ninja
Description: Responsive HTML & CSS template with repeatable patterns for exploring design elements such as colours or typography.
I started this project nearly a year ago. I use it in some form on every client project to communicate my ideas and plans for a website. I originally used a CSS framework, and the code became bloated. It's now completely re-written, with cleaner code.
I use this template on every new client project. I replace the filler content with copy from the client. This makes it easy to test out different typefaces with the content for the project. I mix and match the modules to share typography options, colour swatches, or inspiration images.
The filler HTML content is originally from Paul Lloyd's Bare Bones project. This content is perfect for developing a style guide, and testing a typeface - you get to see how it'll look with different HTML elements like buttons, lists, and headings.
After the colour palette and typography are determined for the website, I typically (almost always) move on to bulding a custom WordPress theme for the client. I copy over the colour palette's SASS variables, rename them and continue iterating. You'll notice the SASS files in this project include WordPress default classes. This is useful when I'm planning, testing, and iterating for a WordPress project. Most of my projects are WordPress
After I'm done with Web Styles, I move on and work with WordPress starter theme. Starter theme links: Github, Demo.
- Quickly enter hexcodes to experiment with colours for a design
- Test out different fonts for your project's copy
- Compare different typefaces and share with your client - in the browser.
- Easily switch to a different font or colour using the included variables.
- Begin building a style guide while you develop your initial design.
This simple HTML & CSS template is inspired by Samantha Warren's Style Tiles. Style Tiles open up the conversation about design without designing a a website in Photoshop.
I loved the idea behind Style Tiles: a simple way to share early design ideas with clients. However, when I tried to mock up some design ideas using the Style Tiles template, I was frustrated.
I'm a web designer and going into Photoshop to change a colour's HEX code felt wrong. And what about typography? If you work on the web, you know that type varies between Photoshop and the browser. (Even with Typekit Sync!)
So, I created this template. My Web Styles template is nothing fancy but it allows you to create colour palettes using old fashioned HTML & CSS (or SASS), try out type options and more.