boost your theming skills - artem shymko
DESCRIPTION
Больше количество изменений в сфере темизации конечно же оказывают влияние на то, как происходит теминг сайтов на Drupal. Less, Sass, Grunt, Compass, LiveReload, множество новых фич и тулз, среди которых уже можно запутаться, но с которыми многие повседневные задачи превращаются в минутное дело. Я попробую выбрать наиболее интересные инструменты, которыми мы пользуемся в своих проектах. Наглядно показать как быстро и легко поднять SASS или LESS и начать работу имея в рукаве карту с кучей полезностей :)TRANSCRIPT
![Page 1: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/1.jpg)
25 -27 April, 2014
http://camp2014.drupal.dn.ua
Boost your theming skills
![Page 2: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/2.jpg)
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
skype: artemshymko
![Page 3: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/3.jpg)
ARE YOU ON TOP OF CURRENT TOOLS?
![Page 4: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/4.jpg)
It's enough to start using things properly...
...to boost your skills.
![Page 5: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/5.jpg)
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?
![Page 6: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/6.jpg)
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:
![Page 7: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/7.jpg)
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 SASS4. LiveReload works in Windows now
![Page 8: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/8.jpg)
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
![Page 9: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/9.jpg)
INCOMING REQUEST
![Page 10: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/10.jpg)
DELIVERING UTOPIA
![Page 11: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/11.jpg)
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
![Page 12: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/12.jpg)
CHOOSING ENVIRONMENT
+
![Page 13: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/13.jpg)
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
![Page 14: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/14.jpg)
WHAT WE'RE GETTINGMinGW, a contraction of "Minimalist GNU for
Windows", is a minimalist development environment for native Microsoft Windows
applications.
![Page 15: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/15.jpg)
TOOLS
![Page 16: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/16.jpg)
THEMER HAS TO BE CLEVER
![Page 17: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/17.jpg)
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?
![Page 18: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/18.jpg)
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?
![Page 19: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/19.jpg)
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!
![Page 20: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/20.jpg)
BRING THE MAGIC!
RUBY & GEMS!
Compass SassSass-globbingToolkitSusyBreakpointGuard…
5. Installing Ruby http://rubyinstaller.org/downloads/ 1.9.3
![Page 21: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/21.jpg)
HOW DOES OMEGA DO THIS
6. Go to theme root folder and run
gem list --no-version | xargs gem uninstall -aIxgem install bundler *
bundle install
![Page 22: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/22.jpg)
COMMON WAY: COMPASS8. compass watchCompass is an open-source CSS Authoring Framework.
![Page 23: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/23.jpg)
BETTER WAY: GUARD
8. bundle exec guard start -p
Guard is a command line tool to easily handle events on file system modifications.
![Page 24: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/24.jpg)
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....
![Page 25: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/25.jpg)
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);
![Page 26: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/26.jpg)
JUST SOME OF AN AWESOMENESS.3
@include icon-font($font-stack, [, $speak, $extend])
![Page 27: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/27.jpg)
RECOMMENDED RESOURCESDrupal Tutorials - The Complete Guide To Omega:http://www.youtube.com/results?search_query=Drupal+Tutorials+-+The+Complete+Guide+To+OmegaRubygems from Team SASS:https://github.com/Team-Sass/
Compass:http://compass-style.org/
![Page 28: Boost your theming skills - Artem Shymko](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bcdf9b4c9058f6c8b4923/html5/thumbnails/28.jpg)
THANK YOU!