kristoferjoseph

<div class="topcoat-button-bar">
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">One</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Two</button>
  </div>
  <div class="topcoat-button-bar__item">
    <button class="topcoat-button">Three</button>
  </div>

kristoferjoseph

<div class="ButtonGroup">
  <div class="ButtonGroup-item">
    <button class="Button">One</button>
  </div>
  <div class="ButtonGroup-item">
    <button class="Button">Two</button>
  </div>
  <div class="ButtonGroup-item">
    <button class="Button">Three</button>
  </div>

kristoferjoseph

<div class="button-bar">
  <div class="button-bar__item">
    <button class="button">One</button>
  </div>
  <div class="button-bar__item">
    <button class="button">Two</button>
  </div>
  <div class="button-bar__item">
    <button class="button">Three</button>
  </div>

kristoferjoseph

/* Somtimes you don't control the order fo concatination for multiple files */
/* <button class="button button--burly">Burly?</button> */

.button--burly {
    background-color: BurlyWood !important;
}

/* Some thousand lines later */

.button {

kristoferjoseph

header > p {
    /* Styles for all <p> in a <header> */
}

/* Wait, you have to style a <p> differently based on context!? */

section > header > p {
    /* Styles for all <p> in a header, in a section */
    /* Because you never need to style it differently right!? */
}

kristoferjoseph

.button {
    background-color: Aqua;
}

/* Some thousand lines later */

.button {
    background-color: BurlyWood;
}

kristoferjoseph

/* normal flexbox */
.flexbox .flex-container {
        display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
}
.flexbox .flex-container.vertical {
	display: -webkit-flex;
	display: -moz-flex;

kristoferjoseph

" Vim color file - Kal_El
" @dam <3's you
set background=dark
if version > 580
	hi clear
	if exists("syntax_on")
		syntax reset
	endif
endif

kristoferjoseph

/*global module:false*/
module.exports = function(grunt) {

    grunt.initConfig({
        autoprefixer: {
            compile: {
                expand: true,
                cwd: 'css',
                src: ['*.css', '!*.min.css'],
                dest: 'css',

kristoferjoseph

     topdoc: {
            options: {
               source: 'css',
               destination: "demo",
               template: "node_modules/topdoc-theme/",
               templateData: {
                     "title": "Topcoat",
                     "subtitle": "CSS for clean and fast web apps",
                     "homeURL": "http://topcoat.io",
               },