Boost your theming skills - Artem Shymko

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/432492

[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 SASS4. 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 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

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.

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?

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 watchCompass 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 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....


@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);


@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+OmegaRubygems from Team SASS:https://github.com/Team-Sass/

Compass:http://compass-style.org/

THANK YOU!

Boost your theming skills - Artem Shymko

Internet

Transcript of Boost your theming skills - Artem Shymko