How to use most effective solution to increase theming development and quality. Using sass and compass, guard and other ruby gems.

1. 25 -27 April, 2014 http://camp2014.drupal.dn.ua
Boost your theming skills

2. ABOUT ME
•My Name is Artem Shymko
•Drupal Developer & Themer at
•Working with Drupal more than 5 years
Artem cross Shymko
drupal.org/user/432492
itwebcross@gmail.com
skype: artemshymko

3. ARE YOU ON TOP OF CURRENT TOOLS?

4. It's enough to start using things properly...
...to boost your skills.

5. INITIAL QUESTIONS

How do I decrease initial theme implementation?

How do I increase theming speed?

How do I manage theme developing between developers?

How do I make my theme or theme parts reusable?

How do I keep my skills on top of nowadays technologies?

6. PRESENTATION PATH

Situation in theming world

Major issues you met at any theme

Environment and tools to use to make
your life better

Summary
This won't be easy:

7. SO WHAT'S THE DEAL?
Few things which I met during presentation
preparation:
2. There's a new theme called Avrora
1. Omega 4 about to use SMACSS
3. SASS GLOBING does make directive
@import "library/**/*" work in SASS
4. LiveReload works in Windows now

8. AND WHAT DOES IT MEAN?

We have different experience and do need something to stay on
a same page jumping from theme to theme

We do use technologies which differs and some approaches are
better ;)

There's no easy way to cover everything. It's only possible to
choose or build approach which will work for your company

9. INCOMING REQUEST

10. DELIVERING UTOPIA

11. THINGS TO KEEP ATTENTION TO
get it done FAST-CHEAP-GREAT:

Maximum code re-use

Using tools which do a job instead of us

Bring best approaches to safely share theme developing
between developers

Use safe solutions to cover cross-browser, responsiveness
requirements

12. CHOOSING ENVIRONMENT
+

13. ENVIRONMENT
http://rubyinstaller.org/
recommended for use is Ruby 1.9.3 installer
http://www.mingw.org/wiki/Getting_Started
http://www.drush.org/drush_windows_installer
Recommended for Drupal:
uses msysgit

14. WHAT WE'RE GETTING
MinGW, a contraction of "Minimalist GNU for Windows", is a minimalist
development environment for native Microsoft Windows applications.

15. TOOLS

16. THEMER HAS TO BE CLEVER

17. LET'S GET SOME PRACTICE: Drush
1. Drupal download
drush dl -d --destination=".." --drupal-project-rename="$(basename `pwd`)"
2. Site install
drush site-install standard --db-url=mysql://root:@localhost/omega --site-name=Skills
How many themers does use drush here?

18. LET'S GET SOME PRACTICE: Drush
1. Drupal download
drush dl -d --destination=".." --drupal-project-rename="$(basename `pwd`)"
2. Site install
drush site-install standard --db-url=mysql://root:@localhost/omega --site-name=Skills
How many themers does use drush here?

19. NOW LET'S GET OUR SUBTHEME
3. Download Omega & Enable Omega
drush dl omega && drush en omega
4. Create sub-theme
drush omega-wizard
YEAH, Omega it is!

20. BRING THE MAGIC!
RUBY & GEMS!
Compass
Sass
Sass-globbing
Toolkit
Susy
Breakpoint
Guard
…
5. Installing Ruby http://rubyinstaller.org/downloads/ 1.9.3

21. HOW DOES OMEGA DO THIS
6. Go to theme root folder and run
gem list --no-version | xargs gem uninstall -aIx
gem install bundler *
bundle install

22. COMMON WAY: COMPASS
8. compass watch Compass is an open-source CSS Authoring Framework.

23. BETTER WAY: GUARD
8. bundle exec guard start -p
Guard is a command line tool to easily handle events on file system modifications.

24. JUST SOME OF AN AWESOMENESS.1
@include font-face($name, $files [, $weight, $style, $inline-woff])
instead of:
@font-face {
font-family: 'TeXGyreHerosCnRegular';
src: url('../font/texgyreheroscn-regular-webfont.eot');
src: url('../font/texgyreheroscn-regular-webfont.eot?
#iefix') format('embedded-opentype'),
url('../font/texgyreheroscn-regular-webfont.woff')
format('woff'), url('../font/texgyreheroscn-regul....

25. JUST SOME OF AN AWESOMENESS.2
@include rgba-background(rgba(0,0,0,0.75));
Compiles to:
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

26. JUST SOME OF AN AWESOMENESS.3
@include icon-font($font-stack, [, $speak, $extend])

27. RECOMMENDED RESOURCES
Drupal Tutorials - The Complete Guide To Omega:
http://www.youtube.com/results?search_query=Drupal+Tutorials+-
+The+Complete+Guide+To+Omega
Rubygems from Team SASS:
https://github.com/Team-Sass/
Compass:
http://compass-style.org/

28. THANK YOU!