Shopping Cart

Inspired Guides FAQs

Reasons to use Inspired Guides

Inspired Guides are perfect for agencies, independent graphic, and web designers who create style guides for clients. Buy a set of Inspired Guide template designs for only £169 and sell them after customising for hundreds more. They’re also great for technical people who want great looking style guides that easily integrate into popular frameworks without spending hours or days developing them.

Satisfaction guaranteed: Can you get your money back?

We want you to be happy about choosing Inspired Guides, so every purchase comes with our guarantee. If you’re not 100% happy with the templates, just let us know, and we’ll refund your money. You can even keep the files! You really have nothing to lose.

For designers

Brand guidelines: Can you add notes?

Yes, you can either include a description of how to use your colours, logo and typefaces in a page so that it’s always visible, or you can use the hidden ‘design notes’ field to bring up a full page modal when someone presses.

Inspired Guides design notes
A design notes full page modal becomes visible when someone presses.

Colours: How easy are they to customise?

You don’t need to be an experienced front-end developer to change colours to match your design. Simply add your own primary, supporting, accent, base, and other colours to one config.json file and all your pages and stylesheets will be automatically updated with those values.

Inspired Guides colour properties
Add your own primary, supporting, accent, base, and other colours to one config.json file.

We’ve developed Inspired Guides using CSS Custom Properties (variables) so that you need only change colour values in one place, making customising colours quick and simple.

Inspired Guides CSS Custom Properties (variables)
CSS Custom Properties (variables) are supported by modern versions of popular browsers.

Icons, images, and logos: How do you add your own?

We’ve included placeholder icons, images, and logos but it’s easy to change them to your own in either bitmap or SVG formats. Our placeholder SVGs are embedded into each page, but you can create a new folder for these assets and link to them from there.

Typefaces: How do you change them?

Inspired Guides come connected to popular Google Fonts, but are easily configured to include any Typekit or self-hosted fonts. Either embed Typekit’s code in your index.html page or import your Google or self-hosted fonts.

Inspired Guides font variables
Add your font families, stack and weights in one place.

We’ve developed Inspired Guides using CSS Custom Properties (variables) so that you need only change font values in one place, making customising them quick and simple.

For developers

CSS: How are stylesheets structured?

We’ve separated styles for common elements and components into their own discreet ‘partials’ and then imported them into the inspired.css file that’s linked to from the style guide. You can add your own partials for new components.

Inspired Guides CSS partials
Partials contain styles for common elements and components

Each stylesheet has been thoughtfully developed with consistent ordering of properties and we’ve used popular class properties and the BEM syntax where appropriate.

CSS: How are Inspired Guides styles separated from production code?

To maintain separation between production styles and those for the Inspired Guides’ cover page, contents and layout, we’ve prefixed those styles with _ig- and further isolated them in an _ig.css file.

Frameworks: Can you add components from Bootstrap and Foundation?

Inspired Guides are framework agnostic but we’ve included some from Bootstrap and you can easily integrate others from Bootstrap, Foundation, or any framework. For layout, we’ve included an even ratio, twelve column grid, simplified to six columns that’s similar to Bootstrap and you can easily replace that grid with one from another framework if you prefer.

Can you add code snippets?

When it’s necessary to show code, we’ve included ‘design notes’ that can include either HTML or CSS/Sass code. These notes are hidden by default and then shown in a full page modal when someone presses to reveal them. The HTML and CSS sections also have a ‘copy to clipboard’ function that makes it easy to use their contents.

HTML and CSS code includes a native Javascript copy to clipboard function.

Hosting: Where can you host Inspired Guides?

We developed Inspired Guides with HTML, CSS and a small amount of native Javascript so that they can be hosted anywhere and on any platform. They use the Grapnel JavaScript router to pull content from external HTML pages into the main index.html file and so much be run from a web server. They can’t be run using the file:// protocol.

Pages: How do you add new templates?

We’ve included many, if not all, the pages that most people will need in their style guides, but it’s easy to add more if you need them. Create a new HTML page without<html>,<head>, or<body>elements and save it into the Pages folder. Then link to your new page from the table of contents in index.html. Our manual explains in more detail how to format links and add page numbers (if required) and titles.<body><head><html>

Inspired Guides CSS Custom Properties (variables)
Each design contains pages for common elements and components.

Processors: Can you use LESS or Sass?

While we to make Inspired Guides independent of any processor, we understand that many people use either pre-processors like Less and Sass or CSS post processors. In fact, we developed the Inspired Guides stylesheets using Sass and we’ve included those original files in your download package.

Inspired Guides were developed with Sass
We’ve included Sass files in your download package.

Technologies: What progressive CSS properties have we used?

We’ve used up-to-the-minute techniques and technologies including; CSS Blend Modes, CSS Calc, CSS Custom Properties, Flexible Box layouts, Scalable Vector Graphics, and Vh and vh units. These are compatible with the latest versions of popular web browsers.

CSS Custom Properties (variables) provide many of the benefits of a CSS preprocessor without the hassle of installing one and make changing styles quick and simple. Custom properties are supported in Chrome, Firefox, Microsoft Edge, Opera, and Safari.

Inspired Guides CSS Custom Properties
CSS Custom Properties (variables) make developing style guides more efficient.

Tools: Do you need special tooling?

We didn’t want Node.js, npm or other complicated technical solutions to get in the way of making a style guide, so you won’t need them.

Inspired Guides use Mustache though, to populate HTML pages and stylesheets with content. Don’t worry about using Mustache, It’s simple and there’s nothing for you to install as it’s included with Inspired Guides.

If you’ve any more questions, we’d be happy to answer them, just get in touch.