Skip to content

Instantly share code, notes, and snippets.

View elisechant's full-sized avatar

Elise Chant elisechant

30 followers · 28 following
View GitHub Profile
@elisechant
elisechant / form--labels_implicit-explicit-association
Last active December 18, 2015 20:59
Form labels - implicit and explicit association
<form action="#">
<fieldset>
<legend>Form title</legend>
<ol>
<li>
<label>Name
<input type="text" /></label><!-- implicit association -->
</li>
<li>
<label>Email</label><!-- explicit association -->
@elisechant
elisechant / application.scss
Last active December 18, 2015 21:39
cascade blueprint
// ------------------------------------------
// modularise
// use doc blocks
// use inline commenting
// minify
// use BEM syntax
// aim to lock down UI layer
// ------------------------------------------
application.scss // manifest file; minified source
@elisechant
elisechant / css-comments.md
Last active December 18, 2015 21:39
  • use markdown syntax in comments - can be parsed for style guide generation

Doc-block

/**
 *  # Short description
 *  ---
 *
 * * Long description (optional)
@elisechant
elisechant / responsive-workflow.md
Last active December 19, 2015 01:09
  1. What is responsive design? 2 choices:
    • responsive design (one client)
      • mobile first - Foundation
      • desktop first
    • adaptive design (multiple clients)
      • phone app - ratchet  
  2. Choose grid
    • Depends on design - should it be element/style agnostic or coupled to HTML (css class based grid)
@elisechant
elisechant / _config.scss
Last active October 9, 2017 15:38
IE handling with SASS, Susy and HTML Conditionals. See https://github.com/bensmithett/style, http://jakearchibald.github.io/sass-ie/ Use a global SASS variable to state IE as Boolean. Serve different stylesheets.
$ie8: false !default;
$ie9: false !default;
$lt-ie9: $ie7 or $ie8;
// Compass cross-browser support configuration
// http://compass-style.org/reference/compass/support/
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: $ie7;
$legacy-support-for-ie8: $ie8;
@elisechant
elisechant / Gemfile
Last active December 19, 2015 03:59
Zurb Foundation 4 - considerations, installation from Gem, initialisation prodedures
source "https://rubygems.org"
#gem "zurb-foundation", :git => "git@github.com:zurb/foundation.git", :branch => '4.2' ||
gem "zurb-foundation", "=4.1.2"
gem "compass"
@elisechant
elisechant / readme.md
Last active December 19, 2015 05:39
Approach to Foundation Rapid Prototyping Workflow - Mobile first

Initialise Development Environment

  1. New Compass Project
    compass create new-project --require "zurb-foundation" --using foundation

  2. Clone Foundation for reference git clone git@me:zurb/foundation.git temp-framework

  3. Add Project Folder to Chrome Dev Tools "Sources" Tab for fast Web Inspector Development.
    Web Inspector > Workspace > Folders

@elisechant
elisechant / example-use.scss
Last active December 19, 2015 17:39
extend Zurb Foundation 4 TopBar to allow slide animation for mobile viewport #foundationzurb
#nav {
@include sliding-nav($nav-item-index:8); // note - set only one SASS parameter by using named variables syntax
.top-bar {
// ..
}
}
@elisechant
elisechant / gist:6255526
Last active December 21, 2015 05:18
Dependency management with CSS import
// import third party CSS
// ignored by sass compiler
@import url("http://yui.yahooapis.com/pure/0.2.1/pure-min.css");
// CSS import with media queries
// ignored by sass compiler
@import url('landscape.css') screen and (orientation:landscape);
@elisechant
elisechant / _sprites.scss
Created August 25, 2013 04:47
Compass Spites
// ---------------- Basic ----------------
@import "compass/utilities/sprites";
$icon-spacing: 1px; // $<folder>-spacing; distance separating each image
$icon-sprite-dimensions: true; // include the dimensions of each sprite
@import "icon/*.png"; // img dir location is defined inside config,rb
@include all-icon-sprites; // all-<folder>-sprites;