This is a very basic rails engine which mounts a couple of routes;

• /wireframes generates an index of everything in app/views/wireframes
• /wireframes/xxx will render page app/views/wireframes/xxx.html.erb in the context of app/views/layouts/application.html.erb
• /compontents will render app/views/components/index.html.erb and is intended to be a very simple styleguide of components in the app.

This is quite old stuff and dates back ot when OO CSS was just getting born and BEM was a twinkle in somebody's eye.

http://www.youtube.com/watch?v=ZpFdyfs03Ug http://oocss.org http://smacss.com http://csslint.net http://www.vanseodesign.com/css/object-oriented-css/ http://www.vanseodesign.com/css/smacss-introduction/ http://www.vanseodesign.com/css/block-element-modifier/ http://www.vanseodesign.com/css/scalable-maintainable/

http://bem.info/method/definitions/

global resets and normalisation

.g_gridName

.g_gridName__xxx

.g_gridName__xxx--yy

global layout details

.c_componentName

.c_componentName__xxx

.c_componentName__xxx--yy

defines a general item that can be reused over different pages. e.g a button, display panel etc

.m_pageName__moduleName

.m_pageName__moduleName--yy

One off designs. Applicable to only this page/partial (eg header / footer )

• defaults.scss (fixed to element names eg A) set base text style for the site per element

• sizes.scss .size-## Small number of font sizes to be dropped in to elements

• styles.scss **.style-**xxxx Any groups of font style (font, colour, weight etc) that are not size

.a-cccc__xxx--yy

.a(-bbbb)__cccc__xxx--yy

the first letter of the sass group

For modules, the page name.

file: /modules/bbbb.scss

the oject name

file: /sass_group/cccc.scss

a child of the object. e.g. if the object is 'list' a child could be 'item'.

<div class="c-form" >
	<form action="submit.php" >
		First name: <input type="text" class="c-form__textBox" >
		<input type="submit" style="c-form__button" >
	</form>
</div>

Modifies the object. so c-button--red would colour the button red. The html would look like:

<button class="c-button c-button--red">

https://gist.github.com/necolas/1309546

https://github.com/csswizardry/inuit.css