Screenshots from Front-end Style Guides

Front-end Style Guides

Learn how to create comprehensive style guides for the web, whether you’re starting from scratch or assembling one for an existing site.

Buy for £2 Download includes .epub, .mobi and .pdf files.

ISBN: 978-1-907828-50-8
69 pages, 5 chapters.

Style guides, once the exclusive domain of print designers, are now finding their way onto the web. In this pocket guide, you'll learn about the style guides that have been created specifically for websites, and how to make your own.

Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have used them. It's packed with practical tips, whether you're starting from scratch or assembling one for an existing site.

This book is for people who build stuff for the web and want to make their own style guides. It's full of techniques, practical advice and examples for both coders and non-coders.

Reviews

This book is great for web designers who work closely with developers. It will give you a good idea on what elements need to be designed, even if you aren’t writing the code. And, if you want to dip your toe into writing CSS, I think creating a style guide is a perfect, and practical place to start.

Benjy Stanton, via Readmill

Really good read. There are some great links to resources on how to get started with your own style guide. I will be coming back to this title many times for reference and inspiration.

Ryan Johnston, via Readmill

Establishing a style guide / pattern portfolio can induce some up-front pain but can potentially save you so much more pain, time and money in the long term. This eBook quickly got me on the right path. Helpful and informative, but also a joy to read. Highly recommended.

Mike Barbarelli, via Amazon

I just recently began researching style guide frameworks and practices. This book couldn't have come out at a better time for me. It reinforced a lot of what I've learned and gave me a lot more to think about. I'll definitely be using some of what I learned here as I build out a boilerplate style guide for my projects. Great pocket guide.

Jason Polete, via Readmill

Ideal for someone having a first try at this sort of thing and the detail the author goes into about the different types of style guide that you can create quite helped me redefine mine.

I also enjoyed the vast amount of amazing resources Anna offers links to - all of which I had to leave the book for a good while and pore over, before heading back to the book of course!

Daniel Furze, via Readmill

As a seasoned designer with lots of experience working with—and writing—more traditional brand guidelines for print and web this all made great sense and will be a great reference to have. I wasn't previously familiar with "Front-end Style Guides" in the sense live-code "living" documents.

Can absolutely see this as a must-have primer on the topic for the fresh-out-of-school designers out there.

Matthew Wetzler, via Readmill

Part 1: What style guides are for

An introduction to why style guides exist, the different types out there, and where they're useful.

Part 2: The web style guide spectrum

There’s more than one way to build a style guide. Some designers and developers have varied their approaches depending on their own skills and project requirements.

Part 3: Style guide ingredients

Now you've whet your appetite exploring some techniques, you're ready to get cooking. Follow the step-by-step instructions to bake your own style guide.

Part 4: Benefits

Find out about the positive side effects of building a style guide, and pre-empt some of the challenges you may face.

Part 5: Examples and tools

This final section will introduce you to some existing examples to help inspire you, and a range of tools to help you get started.