spartDev

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name

spartDev

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>Team</li>
</ol>

spartDev

/*---------- Declare gulp variables ----------*/

    var gulp        = require('gulp'),
        jshint      = require('gulp-jshint'),
        csslint     = require('gulp-csslint'),
        compass     = require('gulp-compass'),
        connect     = require('gulp-connect'), path = require('path'),
        livereload  = require('gulp-livereload'),
        clean       = require('gulp-clean'),

spartDev

<ul class="tab">
  <li class="tab__item tab__item--current">Tab</li>
  <li class="tab__item">Tab</li>
  <li class="tab__item">Tab</li>
  <li class="tab__item">Tab</li>
</ul>

spartDev

<div class="message message--warning">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>
<div class="message message--success">
  <p>This is a message warning</p>
  <button class="message__button_close">Close</button>
</div>
<div class="message message--info">
  <p>This is a message warning</p>

spartDev

<form class="stars-rating">
  <fieldset>
    <legend>Rate this product</legend>
    <input type="radio" id="star5" class="stars-rating__item-input" name="rating" value="5" />
    <label for="star5"  class="stars-rating__item-label"title="Awesome!">5 stars</label>
    <input type="radio" id="star4" class="stars-rating__item-input" name="rating" value="4" />
    <label for="star4"  class="stars-rating__item-label"title="Nice!">4 stars</label>
    <input type="radio" id="star3" class="stars-rating__item-input" name="rating" value="3" />
    <label for="star3"  class="stars-rating__item-label"title="Bof!">3 stars</label>
    <input type="radio" id="star2"  class="stars-rating__item-input"name="rating" value="2" />

spartDev

[user]
  name = You Name
  email = your.nam@mail.com

[color]
    ui = auto

[alias]

    # View the current working tree status using the short format

spartDev

{
	"auto_indent": true,
	"bold_folder_labels": true,
	"color_scheme": "Packages/Aurora Color Scheme/Aurora.tmTheme",
	"detect_indentation": true,
	"draw_white_space": "all",
	"ensure_newline_at_eof_on_save": true,
	"file_exclude_patterns":
	[
		".DS_Store",

spartDev

<button class="button button-default">Default</button>
<button class="button button-success">Success</button>
<button class="button button-warning">Warning</button>
<button class="button button-info">Info</button>

spartDev

// Configuration globale au projet de JSHint
// =========================================
//
// (Y compris celui intégré à votre EDI/éditeur, normalement)
//
// [Liste complète des options possibles](http://www.jshint.com/docs/options/)

{
  // Options de restriction
  // ----------------------