necolas

#!/bin/sh

PROG=$0
RSYNC="/usr/bin/rsync"
SRC="/"
DST="/Volumes/Backup/"

# rsync options
# -v increase verbosity
# -a turns on archive mode (recursive copy + retain attributes)

necolas

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

necolas

SUIT: Smart User Interface Toolkit

Principles:

• Allow for easy and flexible theming of a robust core.
• Core contains primarily structural SCSS.
• Core contains JS libs and common JS plugins.
• Themes contain primarily non-structural SCSS.
• Themes contain custom JS plugins.
• Compiled, concatenated, and minified CSS and JS is stored in each theme.

necolas

# Workflow from https://github.com/necolas/dotfiles

# Add the new submodule
git submodule add git://example.com/remote/path/to/repo.git vim/bundle/one-submodule
# Initialize the submodule
git submodule init
# Clone the submodule
git submodule update
# Stage the changes
git add vim/bundle/one-submodule

necolas

# Filename-based cache busting
# taken from https://github.com/h5bp/html5-boilerplate/

# This rewrites file names of the form `name.123456.js` to `name.js`
# so that the browser doesn't use the cached version when you have
# updated (but not manually renamed) the file.

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On

necolas

// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.

// Calculate the greatest common factor of two integers
@function gcf($a, $b) {
    @if $b == 0 {
        @return $a;
    }

necolas

• Avoid reprocessing the same block in different HTML files.
• Throw warning when processing a different block to an existing destination file. Hashing will avoid collisions, but introduce confusion.
• Add file versioning for inline media and CSS images.
• Avoid need for 'usemin' task - get the replacement element pattern from the first/last HTML element in actual block being replaced. Added benefit of preserving other attributes that may exist (e.g. title, media).

Acknowledgements: This is an adaption of some of Mickael Daniel's work on h5bp/node-build-script

necolas

/**
 * CSS modules required for this module to render correctly.
 * Correct order for entire app is resolved by script.
 */

@require "normalize.css";
@require "vendor/button.css";

/**
 * CSS component

necolas

/**
 * Input CSS
 * No custom syntax. Just write "future" CSS without vendor prefixed properties or values.
 * Use a subset of CSS variables (not dynamic or scoped).
 * Specify a level of browser support: IE 8+, etc.
 * Tool takes browser support and specific declarations to generate vendor-specific variants.
 * This source code is just CSS and works in any browser with adequate support.
 * One day, perhaps you'll have no need to preprocess this code.
 */

necolas

General idea

• Create isolated, predictable, configurable UI components.

• Change the way that eng-design team operates by creating a workflow and audit trail that is based on reviewing modules.

• UI component's code and appearance are reviewed at the same time, with the same scope.

• Automatically be aware of changes to modules that depend on the one you are changing. Encourage decomposition of UI where appropriate.