25 -27 April, 2014 http://camp2014.drupal.dn.ua Boost your theming skills
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
drupal.org/user/[email protected]
skype: artemshymko
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 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?
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:
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
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
INCOMING REQUEST
DELIVERING UTOPIA
THINGS TO KEEP ATTENTION TOget 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
CHOOSING ENVIRONMENT
+
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
WHAT WE'RE GETTINGMinGW, a contraction of "Minimalist GNU for Windows", is a minimalist development environment for native Microsoft Windows applications.
TOOLS
THEMER HAS TO BE CLEVER
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?
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?
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!
BRING THE MAGIC!
RUBY & GEMS!
Compass SassSass-globbingToolkitSusyBreakpointGuard…
5. Installing Ruby http://rubyinstaller.org/downloads/ 1.9.3
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
COMMON WAY: COMPASS8. compass watch Compass is an open-source CSS Authoring Framework.
BETTER WAY: GUARD8. bundle exec guard start -p
Guard is a command line tool to easily handle events on file system modifications.
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....
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);
JUST SOME OF AN AWESOMENESS.3@include icon-font($font-stack, [, $speak, $extend])
RECOMMENDED RESOURCESDrupal 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/
THANK YOU!