Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| v:2.0:templates:primer [2017/04/14 22:55] – [Introduction to Templating] marija | v:2.0:templates:primer [2017/04/26 07:02] (current) – external edit 127.0.0.1 |
|---|
| To help make the base FoxyCart theme easily modifiable, we've adopted the [[http://bem.info/method/definitions/|BEM methodology]] for element naming. BEM stands for Block, Element, Modifier and it introduces a funky identifier scheme that we've tried to apply consistently in our templates. | To help make the base FoxyCart theme easily modifiable, we've adopted the [[http://bem.info/method/definitions/|BEM methodology]] for element naming. BEM stands for Block, Element, Modifier and it introduces a funky identifier scheme that we've tried to apply consistently in our templates. |
| |
| [[http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/|This article]] will give you an extensive background on the BEM philosophy we used. Basically, Blocks are defined as distinct elements of a template, Elements are the individual HTML elements that make up the Block, and modifiers are variations of the Elements. They are represented like so: | [[http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/|This article]] will give you an extensive background on the BEM philosophy we used. Basically, Blocks are defined as distinct elements of a template, Elements are the individual HTML elements that make up the Block, and Modifiers are variations of the Elements. They are represented like so: |
| <code>block--element__modifier</code> | <code>block--element__modifier</code> |
| And they can be strung together: | And they can be strung together: |
