Skip to content

Instantly share code, notes, and snippets.

@elisechant
Last active December 19, 2015 03:59
Show Gist options
  • Select an option

  • Save elisechant/5893854 to your computer and use it in GitHub Desktop.

Select an option

Save elisechant/5893854 to your computer and use it in GitHub Desktop.
Zurb Foundation 4 - considerations, installation from Gem, initialisation prodedures

Considerations

Compass, or SASS standalone?

Mobile first (enhancement), desktop first (degradation)?

Semantic HTML or OOCSS?

  • @include rules, or more divs and class
  • Question of performance and mainatinability

Browser support? best case >=IE9

Device support?

Use of Modernizr
.touch .your-element {}

Extensibility

Code seperation?

Foundation JavaScripts? http://foundation.zurb.com/docs/javascript.html

SASS Mixins? http://foundation.zurb.com/old-docs/f3/sass-mixins.php

Compass Mixins?

Upgrade, maintainence plan?

  • code seperation?
  • common file app? settings?

Development: enable source maps? Canary development? Chrome Web Inspector

##Procedure

  1. Install architecture
  2. List and Prioritise Considerations
  3. Configure application globals
  4. Configure application modules and components - on / off
  5. Extend modules or components

1. Install Architecture

  • Environment init http://foundation.zurb.com/docs/sass.html

  • head tag - Modernizr, shims, conditional tags, stylesheets, scripts

  • foot - scripts, Zepto || jquery, $(document).foundation();

  • configure stylesheet cascade, @import handling

  • configure javascripts load prioritisation

  • configure images directories, content, layout, sprite

  • configure config.rb

  • configure Gemfile, run bundle install if needed

2. List and Prioritize Considerations

3. Configure application globals

4. Modules and components

  • enable in app.scss

5. Extend modules or components

.new-class {
	@include panel($bg, $padding, $adjust);
}
```

* use ``!default``
* abstract ``vars`` to ``_settings.scss``
# Require any additional compass plugins here.
# http://zslabs.com/articles/versioned-dependencies-with-compass
gem 'zurb-foundation', '=4.1.2'
require 'zurb-foundation'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "styles"
sass_dir = "styles/sass"
images_dir = "image"
javascripts_dir = "scripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = true
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass styles/sass scss && rm -rf sass && mv scss sass
# Development
line_comments = true
output_style = :expanded
sass_options = {:debug_info => true}
# Production
# output_style = :compressed
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"
# 1. configure config.rb to require Gem "zurb-foundation"
# 2. configure Gemfile to specify Gem version depencies
# Install any missing dependencies, execute from same dir as location of Gemfile, gives context to that directory
$ bundle install
# Force use of differnt versions across different projects
$ bundle exec compass compile
# 1. install from Gem
$ compass create new-project --require "zurb-foundation" --using foundation
# 2. configure config.rb
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment