background preloader

Style Guide

Facebook Twitter

Lonely Planet Travel Guides and Travel Information. This is the primary and secondary colour palettes as described in the PSD styleguide and in colour_palette.sass Gray Palette Click to copy Copied! #2c3643 $darkgray #3b444f $titlegray #67747c $bodygray #99a9b3 $lightgray #dbe6ec $subduedgray Primary Palette #142b44 $darkblue #1d508d $navblue $lpblue #288ad6 $linkblue $teal #16c98d $green #feef6d $yella #ffc83f $orange #fa5e5b $red #bf538d $plum Secondary Palette #684e79 $mauve #ff708e $pink #47a899 $darkcyan #8abee5 $softblue #c7e6aa $softgreen #cfcbaf $beige #582c2b $maroon #841e1b $darkred Color list "darkgray" "titlegray" "bodygray" "lightgray" "subduedgray" "darkblue" "navblue" "lpblue" "linkblue" "teal" "green" "yella" "orange" "red" "plum" "mauve" "pink" "darkcyan" "softblue" "softgreen" "beige" "maroon" "darkred" $color-palette-names $color-palette.

Front-end and UI style guides. This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here (besides MailChimp, which is surface-level patterns) to demonstrate the many uses of these documents. Anna Debenham has an excellent round-up of what makes up a front-end style guide in her post on 24 ways and her book — here are some more examples to explore.

Clearleft Baselines. Drupal Technical. Github Comprehensive. Google Instructional. MailChimp Educational. Mozilla Continuity. Salesforce Visual. Wordpress Collaborative. Sources: Brian Krall A Sr. Creating Style Guides. Several years ago, I was working on a large, complex application. It was a bit of a legacy project: many different designers and front-end developers had come and gone, each appending a new portion to the sprawling application. By the time I arrived, the CSS was huge, the styles were varied, and it took a lot of effort to find out if anything was reusable. Article Continues Below During all this, I discovered style guides—a way to control markup and CSS so neither veered out of control or ballooned. In jobs since, I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

It has been a revelation, and in this article, I want to show you how to build and maintain them, too. What is a style guide? To me, a style guide is a living document of code, which details all the various elements and coded modules of your site or application. Why should I use a style guide? Phew. Front-end-styleguide. Living Styleguide for componentized front end development with Sass, JavaScript and Handlebars. Installation For global CLI access install npm install -g front-end-styleguide-cli. For local installation run npm install front-end-styleguide --save-dev. Project Creation Create a new project with front-end-styleguide init. If you didn't install the CLI package you have to run . /node_modules/.bin/front-end-styleguide init. Usage The following tasks are available: front-end-styleguide to start the default task. Custom configuration files can be specified: front-end-styleguide [task] --config=path/to/config.json --paths=path/to/paths.json For more information take a look at the readme of the init package.

If you didn't install the CLI package you have to run . Front-end Style Guides. We all know that feeling: some time after we launch a site, new designers and developers come in and make adjustments. They add styles that don’t fit with the content, use typefaces that make us cringe, or chuck in bloated code. But if we didn’t leave behind any documentation, we can’t really blame them for messing up our hard work. To counter this problem, graphic designers are often commissioned to produce style guides as part of a rebranding project. A style guide provides details such as how much white space should surround a logo, which typefaces and colours a brand uses, along with when and where it is appropriate to use them.

Design guidelines Some design guidelines focus on visual branding and identity. The UK National Health Service (NHS) refer to theirs as “brand guidelines”. Some guidelines go further, encompassing a whole experience, from the visual branding to the messaging, and the icon sets used. The BBC’s Global Experience Language. Code standards documents Easier to test. Front-End Style-Guides: Definition, Requirements, Component Checklist. Summary: Front-end style-guides help efficient design and testing, and enforce UI consistency. We present 8 style-guide requirements and 25 common components. What Is a Front-End Style Guide? Front-end style guides have become an increasingly commonplace deliverable in UX practice. As described by Jeff Gothelf and Josh Seiden in their book Lean UX, they originated in Agile or Lean environments. Definition: Front-end style guides are a modular collection of all the elements in your product’s user interface, together with code snippets for developers to copy and paste as needed to implement those elements.

A front-end style guide is both a deliverable created by the UX team (in concert with the engineering team, typically) and a tool used by the entire team for maintaining consistent, nimble product design in a modular format. The UX Benefits of a Front-End Style Guide The purpose of a style guide is to collect all product-interface elements in a modular library. Conclusion References. Front-end Style Guides. Creating and Maintaining Style Guides for Websites Style guides, once the exclusive domain of print designers, are now finding their way onto the web.

In this book, you'll learn about the style guides that have been created specifically for websites, and how to make and maintain 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. An Introduction to Style Guides An overview of the different types of style guide, from print to web, and the terminology used to describe them. DHTML Style Guide Working Group – AOL Access. The DHTML Style Guide Working Group (DSGWG) has come together to create a recommendation for keyboard shortcuts to be used in website widgets. We realize that many keystrokes are already in use by various operating systems, user interfaces, and assistive technology.

Therefore our task is to recommend the best, most intuitive, most international friendly shortcut keys possible without regard to their current use. It is hoped that developers, AT vendors, and Browser manufactures will use these as guidelines, but understand it may not be practical or possible given their individual constraints. For more information about Key-navigable custom JavaScript widgets see the Codetalks Wiki [ no longer exists. This Mozilla article seems similar.

Accordion See Tab Panel. Alert Example: A message with important information (ARIA Alert). Example: An alert (ARIA active region) does not require any keyboard support. Auto Complete Button Link. Website Style Guide Resources. Introduction - Material design - Material design guidelines. 50 Meticulous Style Guides Every Startup Should See Before Launching. All good brands have a great style guide. Creating a simple booklet that catalogues the specific colors, type, logos, imagery, patterns, taglines, etc. of a brand makes sure the brand machine runs smoothly.

To prove why you shouldn’t let your style guide go by the wayside, we’re going to take a look at 50 stunning and detailed examples of style guides that are sure to encourage you to begin compiling your own. And when you’re ready to put that style guide to work, trial it the fun way, by designing a branded social media graphic in Canva (click here). 01. Foursquare Check out this brand manual for Foursquare that gives detailed rundowns for the rules and guides to each of the design elements a brand needs to be consistent. What better way for a designer to prove how detail-oriented they are than by compiling a detail-dense style guide for their own personal branding. 03.

A brand manual is a really great chance for a brand’s design team to explain the specific choices made for a brand. 04. Bosphorus. Contributed by New Zealand-born graphic designer Mike Collinge. Bosphorus is a business consultancy specialising in customer experience, human resources, IT and small business management with the aim of helping companies become more sustainable, efficient and ultimately profitable. Bosphorus is named after the stretch of water running through the middle of Istanbul dividing Europe from Asia. Roughly translated, it describes an ox fording a river. A bous (bos) is Greek for ox, and poros (phorus) means to ford or to ferry.

The brief was to create an identity that was friendly, approachable, down-to-earth and pragmatic. A brand that was less “suits and ties” and more your local friendly café. The brand toolkit features a reduced colour palette with turquoise as a distinctive primary colour. Front-end Style Guides by Anna Debenham · Fronteers. [APPLAUSE] So the last talk I gave, though, was the first time I'd spoken on the stage with dry ice.

They had a dry ice machine. And this is the first time I've spoken with a bong on the stage, so two firsts. So this talk is about documentation, but please don't all leave. Documentation may not be as exciting as what you've just seen, but it is vital to a project's success. So I'm sure that you've all had this experience, where you launch a site, and it was such hard work, but it was worth it because it looks amazing. It's a work of art, and the client is happy, and you're so proud, and you put it on your portfolio site, and you move on to the next project. Then, a few months later, some new designers and developers, they come in and they make adjustments.

They use styles that don't fit with the content, add huge images that slow the site down, they throw in a bunch of fonts, and it just looks terrible. So you quietly remove the site from your portfolio. But whose fault is this? And I get that.