Compass, or SASS standalone?
Mobile first (enhancement), desktop first (degradation)?
Semantic HTML or OOCSS?
@includerules, or more divs and class- Question of performance and mainatinability
Browser support? best case >=IE9
- ie8 considerations
- grid support - https://gist.github.com/zurbchris/5068210
- Compass legacy fallback
$legacy-support-for-ie true;[http://compass-style.org/reference/compass/support/] (http://compass-style.org/reference/compass/support/) * { box-sixing: border-box }- dedicated style sheets?
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
- Install architecture
- List and Prioritise Considerations
- Configure application globals
- Configure application modules and components - on / off
- Extend modules or components
-
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, runbundle installif needed
-
_settings.css
- http://foundation.zurb.com/old-docs/f3/sass-settings.php
- https://github.com/zurb/foundation/blob/master/scss/foundation/_variables.scss
- maintain integrity of defaults
$h1-font-size: emCalc(94px) //emCalc(44px) !default;
- http://foundation.zurb.com/old-docs/f3/sass-settings.php
-
Media queries
-
Grid
- Columns number? for Mobile grid, desktop?
- Style agnostic?
- Snap or fluid? (snap: skeleton)
-
UI
-
Zurb online tool http://foundation.zurb.com/download.php#customizeFoundation
-
Overview of UI available http://foundation.zurb.com/docs/components/kitchen-sink.html
-
F3: /* Configure other SASS settings based on your design http://foundation.zurb.com/old-docs/f3/sass-settings.php
-
- enable in
app.scss
.new-class {
@include panel($bg, $padding, $adjust);
}
```
* use ``!default``
* abstract ``vars`` to ``_settings.scss``