Your SlideShare is downloading. ×
Boost your theming skills - Artem Shymko
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Boost your theming skills - Artem Shymko

187
views

Published on

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

Больше количество изменений в сфере темизации конечно же оказывают влияние на то, как происходит теминг сайтов на 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
187
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×