25 -27 April, 2014 http://camp2014.drupal.dn.ua
Boost your theming skills
ABOUT ME
•My Name is Artem Shymko
•Drupal Developer & Themer at
•Working with Drupal more than 5 years
Artem cross Shymko
...
ARE YOU ON TOP OF CURRENT TOOLS?
It's enough to start using things properly...
...to boost your skills.
INITIAL QUESTIONS

How do I decrease initial theme implementation?

How do I increase theming speed?

How do I manage t...
PRESENTATION PATH

Situation in theming world

Major issues you met at any theme

Environment and tools to use to make
...
SO WHAT'S THE DEAL?
Few things which I met during presentation
preparation:
2. There's a new theme called Avrora
1. Omega ...
AND WHAT DOES IT MEAN?

We have different experience and do need something to stay on
a same page jumping from theme to t...
INCOMING REQUEST
DELIVERING UTOPIA
THINGS TO KEEP ATTENTION TO
get it done FAST-CHEAP-GREAT:

Maximum code re-use

Using tools which do a job instead of us...
CHOOSING ENVIRONMENT
+
ENVIRONMENT
http://rubyinstaller.org/
recommended for use is Ruby 1.9.3 installer
http://www.mingw.org/wiki/Getting_Starte...
WHAT WE'RE GETTING
MinGW, a contraction of "Minimalist GNU for Windows", is a minimalist
development environment for nativ...
TOOLS
THEMER HAS TO BE CLEVER
LET'S GET SOME PRACTICE: Drush
1. Drupal download
drush dl -d --destination=".." --drupal-project-rename="$(basename `pwd`...
LET'S GET SOME PRACTICE: Drush
1. Drupal download
drush dl -d --destination=".." --drupal-project-rename="$(basename `pwd`...
NOW LET'S GET OUR SUBTHEME
3. Download Omega & Enable Omega
drush dl omega && drush en omega
4. Create sub-theme
drush ome...
BRING THE MAGIC!
RUBY & GEMS!
Compass
Sass
Sass-globbing
Toolkit
Susy
Breakpoint
Guard
…
5. Installing Ruby http://rubyins...
HOW DOES OMEGA DO THIS
6. Go to theme root folder and run
gem list --no-version | xargs gem uninstall -aIx
gem install bun...
COMMON WAY: COMPASS
8. compass watch Compass is an open-source CSS Authoring Framework.
BETTER WAY: GUARD
8. bundle exec guard start -p
Guard is a command line tool to easily handle events on file system modifi...
JUST SOME OF AN AWESOMENESS.1
@include font-face($name, $files [, $weight, $style, $inline-woff])
instead of:
@font-face {...
JUST SOME OF AN AWESOMENESS.2
@include rgba-background(rgba(0,0,0,0.75));
Compiles to:
background: url('/images/rgbapng/00...
JUST SOME OF AN AWESOMENESS.3
@include icon-font($font-stack, [, $speak, $extend])
RECOMMENDED RESOURCES
Drupal Tutorials - The Complete Guide To Omega:
http://www.youtube.com/results?search_query=Drupal+T...
THANK YOU!
Upcoming SlideShare
Loading in …5
×

Boost your theming skills - Artem Shymko

437 views

Published on

Больше количество изменений в сфере темизации конечно же оказывают влияние на то, как происходит теминг сайтов на Drupal.

Less, Sass, Grunt, Compass, LiveReload, множество новых фич и тулз, среди которых уже можно запутаться, но с которыми многие повседневные задачи превращаются в минутное дело.

Я попробую выбрать наиболее интересные инструменты, которыми мы пользуемся в своих проектах. Наглядно показать как быстро и легко поднять SASS или LESS и начать работу имея в рукаве карту с кучей полезностей :)

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

  • Be the first to like this

No Downloads
Views
Total views
437
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Boost your theming skills - Artem Shymko

  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!

×