h5bp/h5bp-ui — Issue #3: Restructure project, use Sass
Author: necolas
Created: 2011-11-20 11:10:59+00:00
State: open

I've been thinking - and spoke to Addy about this previously - that we should just go "toolkit" with this.

The idea of providing reusable structural "templates" is still sound, I think, but we can layer a simple "theme" upon them so that: a) the project is usable immediately, even for beginners; b) we provide an example way of how you can sit a "theme" on top of the structure. So the scope is still narrower than Bootstrap and our focus is primarily upon providing really solid component "templates" that any type of button/icon/dropdown/accordion etc can be built upon.

So Sass sounds like the right tool for this. We can abstract out any repeated code, abstract out the template parts, etc. Compile it all to CSS and give instructions on how to do that or which apps will do it in the background.

Proposed structure:

```
/scss
accordion.scss
base.scss
buttons.scss (inc. button-group)
forms.scss
dropdown.scss
icons.scss (work in , as , with hidden text content) - sprite- or font-based?
media-object.scss
media-grid.scss
mixins.scss
modal.js
normalize.scss
style.scss
tables.scss
tabs.scss
variables.scss
/css
style.css
style.min.css
/js
async-script-loading.js
jquery.accordion.js
jquery.dropdown.js
jquery.modal.js
jquery.tabs.js

.gitattributes
.gitignore
README.md
styleguide.html
```

All the HTML of the components can live within `styleguide.html` which acts as a test file too.