Tuesday session notes - Mindbridge

bolivialodgeInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 9 μήνες)

126 εμφανίσεις

DrupalCon Munich,
Tuesday sessions
Ding2tal overvejelser
Måske vi skulle have valgt et adapt framework
som base
Burde være en base og så et design tema
ovenpå
D8 instead of D7
Use Twig.js
Dries, keynote
Need more specialized shops
Performance
Migration
Etc.
Potential business idea for a quick buy out
Dominate the theme layer
Jesper Wøldiche
Code on github
Create the Architecture based on business logic
and the design
Don't
Style by module
Style by page type or block
Style on tags
4 step approach
Analyze, design & spec.
Identify recurring patterns
Elements
Visual
Bring designer on board
Or strategist
Understand the design
Note all patterns
Colors
Size
Typography
Etc. etc.
Streamline
Unify
Combine patterns to into one
Much will be very similar
Rules
Create rules for variations
Create fewer variations
Define
Objects from patterns
Organize
Smacss, a book
A system to structure
A suggested system
Variations
Style
Typography
Structure
Grids
Write it down!
Sketch
CSS
What works for you
Dominate, markup
Use classes
Low specificity
Layer your objects
Template.php
Preprocess
Render arrays
The three you need
Classes_array
Title_attributes_array
Content_attributes_array
Manipulate with
Preprocess
Switch
Field name
Block name
Module
View mode
Region
Path
Maybe combined with conditions
Code on Wøldiche github
Backbone.js in frontend
Today
50/50 division between backed and frontend
Tons of JavaScript
Keeps your data in the fast track
Only in DOM when needed
800 lines of code
Will only provide you with a set of minimalistic
tools
Don't use backbone for small things
Don't use if SEO is important
Don't use if you are in a rush
Master JavaScript
Don't coffee script
Yiddish book center
Example book search
Shotclip
Demo
Evaluating base themes, Emma Jane
Don't add design to base theme
If you need to rip apart and throw away yo are
using the wrong base theme
Three kinds
Adapt
Improve core markup
Zen, mothership etc.
Adopt
Grid frameworks
Pulling something extra to the theme
Ninesixty, blueprint
Annex
Omega, adaptivetheme
Module requirements
Context, panels etc.
Incorporates all the things
Base theme should not design your site
Comparison chart
A base theme should have nothing left to take
away
High perfomance theming
ECSSential
Lazy load CSS
Picturefill
Responsive images
Modernizr
Detect browser features
Conditional load files
D modules
Speedy
Minified JS
Scripts to bottom
Resp_img
Integrates with image styles
D8
Node/1170478
Testing
Webpagetest.org
Run test from various places around the world
In various browsers
Akamai Blaze
Mobile device testing
D user 411999
Chris@fourkitchens.com
Q: how to not load all blocks on mobile
Anchor include pattern
Type of conditional load
Modernizr
Conditional loading
Responsive web design with SASS/Compass
SASS conference, New York next year
What do you need
Mobile first
Fluid grid
Embrace progressive enhancement
Build on standards
Design in a browser
Tools
Compass extension
Moderniz
Breakpoint or respond-to compass extensions
Modern browsers
Live reload
Adobe Shadow + Devices
Vector graphic program
Toolkit
Yepnope
Conditional based asset loader
Hammer.js touch events
And much more
Avoid
Browser plugins
Like flash or silverlight
Single browser prefixes
Problem when you only use one
CSS frameworks
The phrase pixel perfect
Photoshop
For images
Design in browser
Device detection and designing for current
devices
Cheat at CSS, use extensions
First order of business
Import compass
* include box-sizing
Responsive grid
Susy
Ligner meget zen grids
Asymmetric grid
Singularity, grid without limits
Media queries
gem install breakpoint
Default feature: min-width
Breakpoint
Start with small screen and expand till it looks
shit
Time for a breakpoint
Breakpoint-to-ems: true
Convert pixel to ems in media queries
Toolkit/fluid-media
Include scale-elements