A base for creating a styleguide of elements that may appear in a website
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
css/sass
data
fnt/base-icon-font
img
js
kss
.gitignore
.htaccess
Gruntfile.js
README.textile
package.json
style.css

README.textile

Styleguide

Demo

This is a base for creating a styleguide of elements that may appear in a website. Some elements and styles are inspired by Twitter Bootstrap. Many of them have been cleaned, namespaced, and made more modular.

Much of the structure is inspired by BEM, OOCSS, and SMACSS methodologies.

Purpose

The purpose of this styleguide is to create a visual library of elements for new projects. Doing this allows you to see and interact with site elements before working on the actual project. Elements can be tested in different environments which will make your project faster to develop, and more robust. This assists a device-agnostic approach to responsive development.

Features

This styleguide contains many elements you may not require in a project – be sure to remove any styles / scripts that are not required for your projects.

Some of the main features:

  1. built with Sass – with some useful utilities
    1. styles, utilities, and variable have all been separated
  2. indexed styles for fast reference and better organisation
  3. based on H5BP and normalize.css
  4. contains WordPress default styles for editor generated classes, and the WordPress gallery
  5. responsive navigation pattern
  6. button styles consistent for anchors, labels, button tags, and submit tags
  7. dynamically nestable responsive grid – inspired by GridPak
  8. icon font
  9. a whole lot more!

Delete what you don’t need, and enjoy!

Usage

Do not include the index.html for this styleguide in your production code – this file is a reference for the project, and does not belong with a live site. Additionally, you should move all project assets to the location from which you will be developing the project to prevent duplication of your assets. The following would make for a good workflow:

  1. move all project assets to your project folders:
    1. img/
    2. css/
    3. fnt/
    4. style.css
  2. create symlinks in your styleguide folder for all the moved folders and files
  3. do it

License

MIT: http://larrybotha.mit-license.org/