Boost your theming skills

234 views

Published on

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

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
234
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Boost your theming skills

  1. 1. 25 -27 April, 2014 http://camp2014.drupal.dn.ua Boost your theming skills
  2. 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. 3. ARE YOU ON TOP OF CURRENT TOOLS?
  4. 4. It's enough to start using things properly... ...to boost your skills.
  5. 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. 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. 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. 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. 9. INCOMING REQUEST
  10. 10. DELIVERING UTOPIA
  11. 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. 12. CHOOSING ENVIRONMENT +
  13. 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. 14. WHAT WE'RE GETTING MinGW, a contraction of "Minimalist GNU for Windows", is a minimalist development environment for native Microsoft Windows applications.
  15. 15. TOOLS
  16. 16. THEMER HAS TO BE CLEVER
  17. 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. 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. 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. 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. 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. 22. COMMON WAY: COMPASS 8. compass watch Compass is an open-source CSS Authoring Framework.
  23. 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. 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. 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. 26. JUST SOME OF AN AWESOMENESS.3 @include icon-font($font-stack, [, $speak, $extend])
  27. 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. 28. THANK YOU!

×