Front-end structure

README.md

#Front-end structure

A set of rules to organise big front-end code. This experiment in extreme abstraction would allow for encapsulation of your front-end modules. It could be the base for development of a set of common front-end patterns.

##Block structure

All HTML, CSS and JS should be contained within the blocks directory.

/public/blocks/block_name/...

Block HTML. If individual elements are complex then split into seperate file.

/public/blocks/block_name/html/...
/public/blocks/block_name/html/block-name.mustache
/public/blocks/block_name/html/block-name__element-name.mustache

Core styling of block. This should only define base layout styling and not skin styles or animation.

/public/blocks/block_name/css/...
/public/blocks/block_name/css/_config.scss
/public/blocks/block_name/css/_block-name.scss
/public/blocks/block_name/css/_block-name__element-name.scss
/public/blocks/block_name/css/_block-name--modifier-name.scss

Block specific JavaScript.

/public/blocks/block_name/js/...
/public/blocks/block_name/js/descriptive_action_name.js

##Theme structure

A theme provides styling to core HTML elements and applies skin styles and animation to blocks.

/public/themes/theme_name/...
/public/themes/theme_name/css/lib/_reset.scss
/public/themes/theme_name/css/_config.scss
/public/themes/theme_name/css/_elements.scss
/public/themes/theme_name/blocks/block_name/css/_config.scss
/public/themes/theme_name/blocks/block_name/css/_block-name.scss
/public/themes/theme_name/blocks/block_name/css/_block-name__element-name.scss
/public/themes/theme_name/blocks/block_name/css/_block-name--modifier-name.scss

##Media structure

Media that isn't block or theme specific.

/public/media/...
/public/media/img/avatar.jpg
/public/media/vector/logo.svg

Block specific media.

/public/blocks/block_name/media/...
/public/blocks/block_name/media/src/placeholder.eps
/public/blocks/block_name/media/vector/placeholder.svg

Theme specific media.

/public/themes/theme_name/media/...
/public/themes/theme_name/media/src/icons.eps
/public/themes/theme_name/media/font/font_name.woff

block-name.mustache

<section class="block-name">

  <h2 class="block-name__title">
    {{title}}
  </h2>
  
  <ul class="block-name__list">
    {{#items}}
      <li class="block-name__list__item">
      
        <h3 class="block-name__list__item__title">
          {{title}}
        </h3>
        
        <img src="{{src}}"
             alt="{{alt}}"
             width="{{width}}"
             height="{{height}}" 
             class="block-name__list__item__image" />
          
        <div class="block-name__list__item__description">
          {{description}}
        </div>
          
      </li>
    {{/items}}
  </ul>
  
</section>

styles.scss

// Example Sass usage

// Basic setup
@include "public/themes/theme_name/css/lib/_reset.scss";
@include "public/themes/theme_name/css/_config.scss";
@include "public/themes/theme_name/css/_elements.scss";

// Add a block

// Block config
@include "/public/blocks/block_name/css/_config.scss";
// Overide config settings if required
@include "/public/themes/theme_name/blocks/block_name/css/_config.scss"; 
// Block core styling
@include "/public/blocks/block_name/css/_block-name.scss";
@include "/public/blocks/block_name/css/_block-name__element-name.scss";
@include "/public/blocks/block_name/css/_block-name--modifier-name.scss";
// Apply skin and animation to block
@include "/public/themes/theme_name/blocks/block_name/css/_block-name.scss";
@include "/public/themes/theme_name/blocks/block_name/css/_block-name__element-name.scss";
@include "/public/themes/theme_name/blocks/block_name/css/_block-name--modifier-name.scss";