DRUPAL THEMING TIPS AND TRICKS

What should i use?

Zen

• Sass/Compass
• Mobile-first grid design
• HTML5
• Respond.js
• Zen Grids, 960.gs

Should I use OMEGA 3 or 4?

• Omega 3 if you want to create layout in backend
• Omega 3 if you like 960.gs
• Omega 4 if you like SASS
• Omega 4 will work in Drupal 8

MY CHOICE IS NEW THEME FROM SCRATCH

How Can i start?

• Manually
• Use yeoman generator - "Generator-drupaltheme" or other available
• Or create your own generator

What's Yeoman? (yeoman.io)

• yo scaffolds out a new application, writing your configuration
• Grunt and Gulp are two popular build systems
• Bower and npm are two popular package Managers

gruntjs.com

• Compiling (SASS/LESS/STYLUS ....)
• Linting (JS/CoffeeScript)
• Uglyfying (JS/CSS...)
• Optimization (Images, SVG)
• Live reloading

Bower.IO

• html5shiv
• Grids
• Normalize
• Sliders

Preprocess Grids better than Twitter Bootstrap and other frameworks

My suggestion in susy grid

Use ICON FONTS

• http://fontello.com/
• http://icomoon.io/

USe SVG

• http://css-tricks.com/icon-fonts-vs-svg/
• http://css-tricks.com/using-svg/

GENERATE SPRITES

unitless Line-height

Golden Ratio Typography

http://caniuse.com/

Chrome devtools

• https://developer.chrome.com/devtools/docs/css-preprocessors
• http://www.html5rocks.com/en/tutorials/developertools/mobile/

Contact info

• bunulu@gmail.com
• skype: bafxyz