"Bootstrap Style Guide Boilerplate is an easy way to generate living style guides semi-automatically, by linking a stylesheet and creating html files for each element /pattern.
For some time now, I’ve found myself looking for a way to document the styles in my project without needing to add specially formatted comments to my stylesheets or make big changes to my workflow. After looking for a while I ran into Brett Jankord’s Style Guide Boilerplate and fell in love. The premise is easy. Take a php file, plug in your stylesheet, and make html pages showing off your markup. The script takes care of putting it all together into some pretty impressive documentation.
- Did not require me to structure my css in any specific way
- Did not require me to actually include the html markup in my css
- It allowed for great flexibility in what I could include. Anything that can go in an html file goes.
- It automatically shows and formats the html source for each element.
- It requires no installation, just upload to the server.
I used it for a couple of projects- but then noticed when using it with a project based on Twitter Bootstrap, that I had a lot of redundant css (css to make the actual documentation page + the css I was documenting), and that the html snippets and patterns that I needed were mostly standard bootstrap components. I set out to do a bootstrapped version of the Boilerplate."
Tomas Laurinavicius – October 2, 2014
"Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users.
One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.
It is beneficial to have a style guide in order to create a cohesive experience among different pages. Also it helps to ensure that future development or third-party production will follow brand guidelines and will be perceived as part of the overall brand.
Luke Clum has touched the surface of using style guides as your first step in web design last year and I would like to take a more in-depth look on how to create a usable web design style guide for your projects."
UK Government Digital Service
"This style guide is part of the Design Principles document.
- Writing for GOV.UK
- Style points
- Content types
- Writing for the web
- What’s new
- A to Z
Writing for GOV.UK
GOV.UK is for anyone who has an interest in how UK government policies affect them. Using this style guidance will help us make all GOV.UK information readable and understandable.
It has a welcoming and reassuring tone and aims to be a trusted and familiar resource.
We take all of the writing for web points into account when we write for GOV.UK. Then we add the following points based on user testing and analysis on our own website."
Style guides should be complex documents that include written tone and voice, and analyze the websites potential audience. This is an excellent example.
"What Is PotatoGuide
Front-end web design involves many aspects in detail. Unlike other web UI or CSS Frameworks, PotatoGuide doesn’t cover any styling of application-specific components, like nav menus, tabs, breadcrumbs, paginations, or modals etc. It only comes with a very simple grid layout design and some CSS helpers that can be used across many web interface designs to generate a consistent and pretty look. PotatoGuide is created with web standards, usability, and accessibility aspects in mind rather than showing simply fashion and technology.
To be more concrete, all the default presentational styles that can be achieved simply by using the corresponding HTML tags won’t have equivalent CSS helper classes in PotatoGuide. For example, you may use
<small> to define smaller inline text (and other side comments), you can use
<b> tag or
<strong> tag to make text bold,
<i> tag or
<em> tag to render text in italics, use
<hr> tag to define a thematic break in your content, and
<sub> to define superscript text and subscript text respectively. PotatoGuide does some work to make these default styles look consistent across different browsers, but there’s no need to create the corresponding CSS classes to solve this."
A basic web framework.
“Get five tips to creating a document that unifies a product’s design, even after launch.”
Probably the best responsive framework system out there. ZURB University shows you how to set up a style guide.
1. Style Tiles
"Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room. An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?"
A LIST APART
"by SAMANTHA WARREN March 27, 2012
When you engage in a new client project how do you get started?
A solid process plays a critical role in the project’s overall success, yet this process is one of the deepest darkest secrets of our industry. Evolving from print, identity, and advertising the web retains many methodologies and deliverable relics from disciplines that produce very different products."
"Style tiles are the paint and fabric swatches of web design. Bringing together typography, branding, and UI elements to establish a visual language for a project.
"Halfway between a mood board and a mock up, style tiles are a way of defining the visual approach for a website. Here’s how to use them.
Style tiles are a visual reference to the design language of a website (or other design deliverable). They help tell a story through fonts, colour and style collections, and when viewed in combination with wireframes, site-maps and other UI elements, they define that story in an accessible, client-friendly manner. In this article I’ll explain how to get the best out of this handy technique."