I like the idea of style tiles, but as an early deliverable for a website, I'm not sold on the end-product. To hand over a file - usually a JPG or a PDF - for a website just seems weird to me.
So I've created this thing, styleSRC
It acts much like a style tile, but it's all web-based; hex-refs, browser-rendered fonts and all that jazz. To me, it's a nicer deliverable that more accurately represents your end-product.
styleSRC isn't meant to be the beginnings of a styleguide, it isn't set in stone, it's simply the beginnings of a project once you've come to some early design decisions. Just grab a copy of styleSRC and bash in what you've come up with, then stick it online somewhere. It takes literally 5-10 minutes and looks so much better.
If there's some feedback from the client and you need to do some changes, do them in code and quickly push them back up to your online styleSRC. No passing around ridiculously named versions between people.
Also, I've made it responsive; the hope being that when you fire your link over in an e-mail, anyone can see it on whatever device they're using.
styleSRC is in its really early stages, so please don't rip it to shreds...it's my first GitHub repo.
If you've got a suggestion for a feature or can think of ways to improve it then fork it or send me a tweet at @thecodezombie
I've tried to make this as straight-forward as possible.
The index.html file has the majority of what you need to edit. Search !! and you'll jump through the stages you need to change.
To add icons (via. a webfont), rename the font file to icon and drop it into the font folder. Then go to the _icon.scss partial and paste in the class-based styles. Then quickly paste the names in the icons section of index.html. Admittedly, this section is a bit annoying and not as straight-forward as others, but what it produces looks pretty good and still only takes a couple of minutes.
styleSRC uses Sass...because it made sense to use a CSS pre-processor and I already use Sass.
So far, there's just Logo, Colour Palette, Typography and Icons but I've got ideas for more:
- Logo treatment: What the logo will look like on a light or dark background, or overlaid on a photograph.
- Example copy: Examples of your font in the usual dummy text (e.g. Lorem Ipsum and The quick brown fox)
- Photography / Illustrations: Examples that you think would be suitable for the website.
- Social names: For when your project is brand new and you want to clearly propose the Facebook page or Twitter handle
Bashed together in a couple of CodeFriday's
Licensed under a the DBAD license: http://www.dbad-license.org/