Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Drupal 8 theme with new-fangled awesomeness

1,293 views

Published on

About a year ago, I started feeling overwhelmed with all the changes to front-end development. I understood HTML and CSS, responsive design made sense, but then everybody started grunting and gulping, and frankly I got a little scared. Wasn't Bower the arch-enemy of Mario and Luigi?

Combine that with all the changes to Drupal 8, and it's pretty easy to feel overwhelmed. Everybody else knows what all these new things are, right? I'm the only one in the dark?

What made me most nervous was not even knowing what all these terms mean. Once I had a basic grasp of a concept, it felt a lot less intimidating.

So what I'd like to share with you is a Drupal 8 base theme I'm developing that uses some of these new techniques. I'm not going to explain to you the details of how to implement every single new technique out there, but will try to explain what some of these new tools are without making too many assumptions of what you might know. I will walk you through the structure of a Drupal 8 theme that makes use of new front end techniques, so you can see what does what and get some ideas of what you'd like to learn next.

My goal with this theme is to make use of Brad Frost's atomic design principles: essentially component based design. I'm setting up this theme to integrate with Pattern Lab, a prototyping tool that we'll also set up to work as a living style guide. Styles are managed with Sass and synced with Pattern Lab using Grunt, a task manager. The theme makes use of a number of great Sass tools like Breakpoint and the Susy grid framework. We'll also take a look at the Twig templates new to Drupal 8, as well as some of the other theme files specific to Drupal 8.

I hope that I'll learn from you too. If we have time during Q and A, you can share some modern techniques you'd like to see in a new Drupal theme. There's a good chance I'll be working on the theme during sprints, so if you'd like to help pitch in, I'd be glad for the assistance. This theme will be featured in my upcoming book: Drupal 8 Responsive Web Design.

My goal is for us all to leave the session feeling that while we may have to learn, we have a handle on what front end techniques look interesting and useful to investigate further.

When my session finishes, my goal is for attendees to leave the room more familiar with the files they are likely to see in a Drupal 8 theme, and what each of them does. Similarly, attendees should have a greater familiar with the some of the newer techniques and tools they might encounter in a Drupal 8 base theme.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building a Drupal 8 theme with new-fangled awesomeness

  1. 1. B u i l d i n g a D r u p a l 8 T h e m e w i t h n e w - fa n gl e d a w e s o m e n e s s
  2. 2. M a rc D r u m m o n d ( & I z z y ) @ M a rc D r u m m o n d m d r u m m o n d I R C & d r u p a l . o rgm a rc d r u m m o n d . c o m
  3. 3. P a c k t P u b l i s h i n g I’m writing a book! Drupal 8 Responsive Web Design P h o t o b y J a l a l H a m e e d B h a t t i , F l i c k r
  4. 4. S u r p r i s e ! T h e re a re n e w t h i n g s i n D r u p a l 8 ( a n d f ro n t - e n d i n g e n e r a l ) P h o t o b y M i c h e l l e Tr i b e , F l i c k r
  5. 5. – M e . ( A n d e v e r y o n e e l s e ) “I get totally overwhelmed by all the new things. 
 I feel like I know nothing.” P h o t o b y A n d ré s Þ ó r, F l i c k r
  6. 6. A re a n y o f t h e s e t h i n g s u n f a m i l i a r ? • i n f o . y m l • G i t • C o m p o s e r • D r u s h • Tw i g • H a n d l e b a r s • M u s t a c h e • We b c o m p o n e n t s • H A M L • l i b r a r i e s . y m l • A s s e t i c • c o n f i g . r b • B o o t s t r a p • F o u n d a t i o n • We b S t a r t e r K i t • Z e n G r i d s • S i n g u l a r i t y • S u s y • re q u i re . j s • C o ff e e S c r i p t • A M D • C o m m o n J S • B a c k b o n e • U n d e r s c o re . j s • E m b e r • A n g u l a r • R u b y • R V M • B u n d l e r • G e m f i l e • G e m f i l e . l o c k • B o w e r • b o w e r. j s o n • N o d e • n p m • p a c k a g e . j s o n • C o m p o s e r • c o m p o s e r. j s o n • A c q u i a D e v D e s k t o p • M A M P • H o m e b re w • Va g r a n t • D o c k e r • C h e f • P u p p e t • Ye o m a n • G r u n t • G r u n t f i l e . j s • G u l p • G u l p f i l e . j s • L i n t • c s s l i n t • j s h i n t • e s l i n t • u g l i f y j s • A u t o p re f i x e r • i m a g e o p t i m • G r u n t i c o n • S t y l e P ro t o t y p e s • P a t t e r n L a b • K S S • T D D • B D D • B e h a t • C a s p e r. j s • B ro w s e r S t a c k • Wr a i t h • P a g e re s • S e l e n i u m • P h a n t o m J S • S l i m e r J S • J e n k i n s • Tr a v i s C I I t ’s o k .
  7. 7. L e t ’s s t a r t w i t h t h e m e s . S o w h a t i s a t h e m e ? P h o t o b y B o a - F r a n c , F l i c k r
  8. 8. I s t h a t yo u r f i n a l a n s w e r ? Yo u r t h e m e • H T M L • C S S • J S • M e d i a ( i m a g e s ) P h o t o b y D a v e M a l k o ff , F l i c k r
  9. 9. – D r u p a l t h e m e f i l e s “All your YML and PHP belongs to us.”
  10. 10. T h e m e f i l e s T h e m e I ’ m w o r k i n g o n : A t o m i c a t o m i c . i n f o . y m l a t o m i c . l i b r a r i e s . y m l a t o m i c . t h e m e b o w e r. j s o n c o n f i g i n s t a l l a t o m i c . s e t t i n g s . y m l s c h e m a a t o m i c . s c h e m a . y m l c o n f i g . r b c s s g r u n t f i l e . j s i m a g e s j s p a c k a g e . j s o n s a s s t e m p l a t e s h t m l . h t m l . t w i g t h e m e - s e t t i n g s . p h p !
  11. 11. T H E M E . i n f o . y m l T h e m e i n f o r m a t i o n a n d s e t t i n g s P h o t o b y C h r i s t i a n O s t ro s k y, F l i c k r
  12. 12. T H E M E . i n f o . y m l T h e m e i n f o r m a t i o n a n d s e t t i n g s n a m e : ' A t o m i c ' t y p e : t h e m e e n g i n e : t w i g d e s c r i p t i o n : ' B a s e t h e m e b a s e d o n a t o m i c d e s i g n p r i n c i p l e s . ' c o re : 8 . x s t y l e s h e e t s : a l l : - c s s / s t y l e s . c s s re g i o n s : c o n t e n t : C o n t e n t h e l p : H e l p p a g e _ t o p : ' P a g e t o p ' p a g e _ b o t t o m : ' P a g e b o t t o m ' s i d e b a r _ f i r s t : ' F i r s t s i d e b a r ' s i d e b a r _ s e c o n d : ' S e c o n d s i d e b a r ’ f o o t e r : ‘ f o o t e r ’ s e t t i n g s : a t o m i c _ t y p e k i t _ i d : ' 0 ' a t o m i c _ t y p e k i t _ a d v a n c e d : f a l s e
  13. 13. T H E M E . i n f o . y m l T h e m e i n f o r m a t i o n a n d s e t t i n g s n a m e : ' A t o m i c ' t y p e : t h e m e e n g i n e : t w i g d e s c r i p t i o n : ' B a s e t h e m e b a s e d o n a t o m i c d e s i g n p r i n c i p l e s . ' c o re : 8 . x re g i o n s : c o n t e n t : C o n t e n t h e l p : H e l p p a g e _ t o p : ' P a g e t o p ' p a g e _ b o t t o m : ' P a g e b o t t o m ' s i d e b a r _ f i r s t : ' F i r s t s i d e b a r ' s i d e b a r _ s e c o n d : ' S e c o n d s i d e b a r ’ f o o t e r : ‘ f o o t e r ’ b re a k p o i n t s : n a r ro w : n a m e : n a r ro w l a b e l : n a r ro w m e d i a Q u e r y : ' ( m i n - w i d t h : 5 6 0 p x ) ' w e i g h t : 1 m u l t i p l i e r s : 1 x : 1 x 2 x : 2 x w i d e : n a m e : w i d e l a b e l : w i d e m e d i a Q u e r y : ' ( m i n - w i d t h : 8 5 1 p x ) ' w e i g h t : 2 m u l t i p l i e r s : 1 x : 1 x 2 x : 2 x
  14. 14. t h e m e - s e t t i n g s . p h p T h e m e s e t t i n g s P h o t o b y C h a r l e s R o ff e y, F l i c k r
  15. 15. t h e m e - s e t t i n g s . p h p T h e m e s e t t i n g s < ? p h p / * * * I m p l e m e n t s h o o k _ f o r m _ s y s t e m _ t h e m e _ s e t t i n g s _ a l t e r ( ) f u n c t i o n . * * @ p a r a m $ f o r m * N e s t e d a r r a y o f f o r m e l e m e n t s t h a t c o m p r i s e t h e f o r m . * @ p a r a m $ f o r m _ s t a t e * A k e y e d a r r a y c o n t a i n i n g t h e c u r re n t s t a t e o f t h e f o r m . * / f u n c t i o n a t o m i c _ f o r m _ s y s t e m _ t h e m e _ s e t t i n g s _ a l t e r ( & $ f o r m , $ f o r m _ s t a t e ) { ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / M i s c e l a n e o u s / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ! $ f o r m [ ' t y p o g r a p h y ' ] = a r r a y ( ' # t y p e ' = > ' f i e l d s e t ' , ' # t i t l e ' = > t ( ' Ty p o g r a p h y ' ) , ' # d e s c r i p t i o n ' = > t ( ' Ty p o g r a p h y s e t t i n g s f o r y o u r t h e m e . ' ) , ' # c o l l a p s i b l e ' = > FA L S E , ' # c o l l a p s e d ' = > FA L S E ) ;
  16. 16. t h e m e - s e t t i n g s . p h p T h e m e s e t t i n g s ! $ f o r m [ ' t y p o g r a p h y ' ] [ ' a t o m i c _ t y p e k i t _ i d ' ] = a r r a y ( ' # t y p e ' = > ' t e x t f i e l d ' , ' # t i t l e ' = > t ( ' Ty p e k i t K i t I D ' ) , ' # d e f a u l t _ v a l u e ' = > t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ i d ' ) , ' # s i z e ' = > 7 , ' # m a x l e n g t h ' = > 7 , ' # d e s c r i p t i o n ' = > t ( ' I f y o u a re u s i n g < a h re f = " ! l i n k " t a rg e t = " _ b l a n k " > Ty p e k i t < / a > t o s e r v e w e b f o n t s , p u t y o u r Ty p e k i t K i t I D h e re . ' , a r r a y ( ' ! l i n k ' = > ' h t t p s : / / t y p e k i t . c o m / ' ) ) , ) ; ! $ f o r m [ ' t y p o g r a p h y ' ] [ ' a t o m i c _ t y p e k i t _ a d v a n c e d ' ] = a r r a y ( ' # t y p e ' = > ' b o o l e a n ' , ' # t i t l e ' = > t ( ' A d v a n c e d Ty p e k i t E m b e d ' ) , ' # d e f a u l t _ v a l u e ' = > t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ a d v a n c e d ' ) , ' # d e s c r i p t i o n ' = > t ( ' T h i s t u r n s o n t h e < a h re f = " ! l i n k " t a rg e t = " _ b l a n k " > a d v a n c e d Ty p e k i t e m b e d < / a > . ' , a r r a y ( ' ! l i n k ' = > ' h t t p : / / h e l p . t y p e k i t . c o m / c u s t o m e r / p o r t a l / a r t i c l e s / 6 4 9 3 3 6 - e m b e d - c o d e ' ) ) , ) ; ! }
  17. 17. T H E M E . s e t t i n g s . y m l S e t t i n g s f i l e s P h o t o b y C h r i s t i a n O s t ro s k y, F l i c k r
  18. 18. T H E M E . s e t t i n g s . y m l S e t t i n g s f i l e s a t o m i c _ t y p e k i t _ i d : ' 0 ' a t o m i c _ t y p e k i t _ a d v a n c e d : f a l s e
  19. 19. T H E M E . s c h e m a . y m l S e t t i n g s c h e m a f i l e s P h o t o b y P e t e r L e e , F l i c k r
  20. 20. T H E M E . s c h e m a . y m l S e t t i n g s c h e m a f i l e s # S c h e m a f o r t h e c o n f i g u r a t i o n f i l e s o f t h e A t o m i c t h e m e . ! a t o m i c . s e t t i n g s : t y p e : t h e m e _ s e t t i n g s l a b e l : ' A t o m i c s e t t i n g s ' m a p p i n g : a t o m i c _ t y p e k i t _ i d : t y p e : s t r i n g l a b e l : ' Ty p e k i t I D ' a t o m i c _ t y p e k i t _ a d v a n c e d : t y p e : b o o l e a n l a b e l : ' U s e Ty p e k i t a d v a n c e d e m b e d '
  21. 21. o t h e r. s t u ff . y m l T h e m e c o n f i g d e f a u l t s P h o t o b y J u s t i n d e l a O r n e l l a s , F l i c k r
  22. 22. o t h e r. s t u ff . y m l T h e m e c o n f i g d e f a u l t s i d : t h e m e . b a r t i k . b a r t i k n a m e : b a r t i k l a b e l : B a r t i k b re a k p o i n t _ i d s : - t h e m e . b a r t i k . m o b i l e - t h e m e . b a r t i k . n a r ro w - t h e m e . b a r t i k . w i d e s o u rc e : b a r t i k s o u rc e Ty p e : t h e m e s t a t u s : t r u e l a n g c o d e : e n
  23. 23. H o w d o D r u p a l 8 t h e m e s w o r k w i t h … ? • H T M L • C S S • J a v a S c r i p t L e t ’s l o o k a t …
  24. 24. H T M L Tu r n i n g d a t a i n t o m a r k u p P h o t o b y A d r i a n , F l i c k r
  25. 25. T H E M E . t h e m e T h e m e f u n c t i o n s & p re p ro c e s s P h o t o b y S u n o v a S u r f b o a rd s , F l i c k r
  26. 26. T H E M E . t h e m e T h e m e f u n c t i o n s & p re p ro c e s s < ? p h p ! / * * * I m p l e m e n t s h o o k _ p re p ro c e s s _ h t m l ( ) * / ! ! f u n c t i o n a t o m i c _ p re p ro c e s s _ h t m l ( & $ v a r s ) { ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / A d d i n Ty p e K i t C o d e . / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / i f ( t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ i d ' ) ) { $ v a r s [ ' k i t _ i d ' ] = t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ i d ' ) ; } }
  27. 27. T E M P L AT E . h t m l . t w i g Tw i g : Te m p l a t e s t h a t m a k e s e n s e P h o t o b y S c o t t M o o re , F l i c k r
  28. 28. Tw i g : Te m p l a t e s t h a t m a k e s e n s e < ! D O C T Y P E h t m l > < h t m l { { h t m l _ a t t r i b u t e s } } > < h e a d > { { p a g e . h e a d } } < t i t l e > { { h e a d _ t i t l e } } < / t i t l e > { { p a g e . s t y l e s } } { { p a g e . s c r i p t s } } < / h e a d > < b o d y { { a t t r i b u t e s } } > < a h re f = " # m a i n - c o n t e n t " c l a s s = " v i s u a l l y - h i d d e n f o c u s a b l e s k i p - l i n k " > { { ' S k i p t o m a i n c o n t e n t ' | t } } < / a > { { p a g e _ t o p } } { { p a g e . c o n t e n t } } { { p a g e _ b o t t o m } } { { p a g e . s c r i p t s ( ' f o o t e r ' ) } } < / b o d y > h t m l . h t m l . t w i g
  29. 29. Tw i g : Te m p l a t e s t h a t m a k e s e n s e < ! D O C T Y P E h t m l > < h t m l { { h t m l _ a t t r i b u t e s } } > < h e a d > { % i f k i t _ i d % } { % i f k i t _ a d v a n c e d % } < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > ( f u n c t i o n ( d ) { v a r c o n f i g = { k i t I d : ' { { k i t _ i d } } ' , s c r i p t T i m e o u t : 3 0 0 0 } , h = d . d o c u m e n t E l e m e n t , t = s e t T i m e o u t ( f u n c t i o n ( ) { h . c l a s s N a m e = h . c l a s s N a m e . re p l a c e ( / b w f - l o a d i n g b / g , " " ) + " w f - i n a c t i v e " ; } , c o n f i g . s c r i p t T i m e o u t ) , t k = d . c re a t e E l e m e n t ( " s c r i p t " ) , f = f a l s e , s = d . g e t E l e m e n t s B y Ta g N a m e ( " s c r i p t " ) [ 0 ] , a ; h . c l a s s N a m e + = " w f - l o a d i n g " ; t k . s rc = ' / / u s e . t y p e k i t . n e t / ' + c o n f i g . k i t I d + ' . j s ' ; t k . a s y n c = t r u e ; t k . o n l o a d = t k . o n re a d y s t a t e c h a n g e = f u n c t i o n ( ) { a = t h i s . re a d y S t a t e ; i f ( f | | a & & a ! = " c o m p l e t e " & & a ! = " l o a d e d " ) re t u r n ; f = t r u e ; c l e a r T i m e o u t ( t ) ; t r y { Ty p e k i t . l o a d ( c o n f i g ) } c a t c h ( e ) { } } ; s . p a re n t N o d e . i n s e r t B e f o re ( t k , s ) } ) ( d o c u m e n t ) ; < / s c r i p t > { % e l s e % } < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s rc = " / / u s e . t y p e k i t . n e t / { { k i t _ i d } } . j s " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > t r y { Ty p e k i t . l o a d ( ) ; } c a t c h ( e ) { } < / s c r i p t > { % e n d i f % } { % e n d i f % }
  30. 30. Tw i g : Te m p l a t e s t h a t m a k e s e n s e n o d e . h t m l . t w i g < a r t i c l e { { a t t r i b u t e s } } > ! { { t i t l e _ p re f i x } } { % i f n o t p a g e % } < h 2 { { t i t l e _ a t t r i b u t e s } } > < a h re f = " { { u r l } } " re l = " b o o k m a r k " > { { l a b e l } } < / a > < / h 2 > { % e n d i f % } { { t i t l e _ s u ff i x } } ! < / a r t i c l e >
  31. 31. Tw i g : Te m p l a t e s t h a t m a k e s e n s e n o d e . h t m l . t w i g { % s e t a d d _ c l a s s e s = [ ' n o d e ' , ' n o d e - - t y p e - ' ~ n o d e . b u n d l e , n o d e . p ro m o t e d ? ' n o d e - - p ro m o t e d ' , n o d e . s t i c k y ? ' n o d e - - s t i c k y ' , n o t n o d e . p u b l i s h e d ? ' n o d e - - u n p u b l i s h e d ' , ' n o d e - - v i e w - m o d e - ' ~ v i e w _ m o d e , p re v i e w ? ' n o d e — p re v i e w ' ] % } ! < a r t i c l e { { a t t r i b u t e s . a d d C l a s s ( a d d _ c l a s s e s ) } } > { { t i t l e _ p re f i x } } { % i f n o t p a g e % } < h 2 { { t i t l e _ a t t r i b u t e s } } > < a h re f = " { { u r l } } " re l = " b o o k m a r k " > { { l a b e l } } < / a > < / h 2 > { % e n d i f % } { { t i t l e _ s u ff i x } } ! < / a r t i c l e >
  32. 32. O t h e r t e m p l a t i n g t o o l s • H a n d l e b a r s • M u s t a c h e • We b c o m p o n e n t s • H A M L P s s t …
  33. 33. C S S / J S a s s e t s M a n a g i n g s t y l e s h e e t s a n d s c r i p t s P h o t o b y R i c y m a r P h o t o g r a p h y, F l i c k r
  34. 34. T H E M E . l i b r a r i e s . y m l M a n a g i n g d e p e n d e n c i e s f o r C S S a n d J S P h o t o b y S a m a n t h a M a r x , F l i c k r
  35. 35. a t o m i c . l i b r a r i e s . y m l M a n a g i n g d e p e n d e n c i e s f o r C S S a n d J S b a s e : v e r s i o n : V E R S I O N c s s : t h e m e : c s s / s t y l e s . c s s : { } c s s / p r i n t . c s s : { m e d i a : p r i n t } m a i n t e n a n c e _ p a g e : v e r s i o n : V E R S I O N c s s : t h e m e : c s s / m a i n t e n a n c e - p a g e . c s s : { } d e p e n d e n c i e s : - s y s t e m / m a i n t e n a n c e
  36. 36. A s s e t i c To o l f o r m a n a g i n g C S S a n d J S P h o t o b y M o r k i R o , F l i c k r
  37. 37. J a v a S c r i p t a l l t h e t h i n g s N o t j u s t j Q u e r y a n y m o re
  38. 38. J S t o o l s • M o d e r n i z r • U n d e r s c o re • C o ff e e S c r i p t
  39. 39. F u n w i t h J S f r a m e w o r k s • B a c k b o n e • E m b e r • A n g u l a r ( M VC f o r Ja v a s c r i p t )
  40. 40. J S m o d u l e l o a d e r s • A M D • C o m m o n J S J S s c r i p t l o a d e r s • re q u i re . j s • c u r l . j s
  41. 41. C S S f o r f u n a n d p ro f i t S a s s , C o m p a s s a n d m o re P h o t o b y I s m a e l C e l i s , F l i c k r
  42. 42. c o n f i g . r b C o m p a s s c o n f i g u r a t i o n P h o t o b y S u n o v a S u r f b o a rd s , F l i c k r
  43. 43. c o n f i g . r b C o m p a s s c o n f i g u r a t i o n # R e q u i re a n y a d d i t i o n a l c o m p a s s p l u g i n s h e re . re q u i re ' c o m p a s s / i m p o r t - o n c e / a c t i v a t e ' re q u i re ' c o m p a s s - n o r m a l i z e ' re q u i re ' t o o l k i t ' re q u i re ' b re a k p o i n t ' re q u i re ' s u s y ' re q u i re ' m o d u l a r- s c a l e ' re q u i re ' c o l o r- s c h e m e r ' re q u i re ' s a s s y - b u t t o n s ' ! # D e f a u l t t o d e v e l o p m e n t i f e n v i ro n m e n t i s n o t s e t . s a v e d = e n v i ro n m e n t i f ( e n v i ro n m e n t . n i l ? ) e n v i ro n m e n t = : d e v e l o p m e n t e l s e e n v i ro n m e n t = s a v e d e n d ! # I n d e v e l o p m e n t , t u r n o n t h e F i re S a s s - c o m p a t i b l e d e b u g _ i n f o b y d e f a u l t . f i re s a s s = ( e n v i ro n m e n t = = : d e v e l o p m e n t ) ? t r u e : f a l s e !
  44. 44. c o n f i g . r b C o m p a s s c o n f i g u r a t i o n # L o c a t i o n o f t h e t h e m e ' s re s o u rc e s . c s s _ d i r = " c s s " s a s s _ d i r = " s a s s " i m a g e s _ d i r = " i m a g e s " j a v a s c r i p t s _ d i r = " j s " ! o u t p u t _ s t y l e = ( e n v i ro n m e n t = = : d e v e l o p m e n t ) ? : e x p a n d e d : : c o m p re s s e d re l a t i v e _ a s s e t s = t r u e ! # C o n d i t i o n a l l y e n a b l e l i n e c o m m e n t s w h e n i n d e v e l o p m e n t m o d e . l i n e _ c o m m e n t s = ( e n v i ro n m e n t = = : d e v e l o p m e n t ) ? t r u e : f a l s e s a s s _ o p t i o n s = ( e n v i ro n m e n t = = : d e v e l o p m e n t & & f i re s a s s = = t r u e ) ? { : d e b u g _ i n f o = > t r u e } : { }
  45. 45. C S S A rc h i t e c t u re • O O C S S • B E M • S M A C S S
  46. 46. C S S A rc h i t e c t u re / * * * P ro g re s s B a r c o m p o n e n t * / . p ro g re s s { } . p ro g re s s _ _ t r a c k { } . p ro g re s s _ _ b a r { } . p ro g re s s _ _ d e s c r i p t i o n { } . p ro g re s s _ _ c a n c e l { } . p ro g re s s _ _ c a n c e l : f o c u s , . p ro g re s s _ _ c a n c e l : h o v e r { } / * * * P ro g re s s B a r s m a l l v a r i a n t * / . p ro g re s s - - s m a l l . p ro g re s s _ _ t r a c k { } . p ro g re s s - - s m a l l . p ro g re s s _ _ b a r { } . p ro g re s s - - s m a l l . p ro g re s s _ _ c a n c e l { }
  47. 47. C S S F r a m e w o r k s • B o o t s t r a p • F o u n d a t i o n • G u m b y • We b S t a r t e r K i t
  48. 48. G r i d F r a m e w o r k s • Z e n G r i d s • S u s y • S i n g u l a r i t y N e w C S S l a y o u t t o o l s • F l e x b o x • R e g i o n s • G r i d s
  49. 49. S a s s y G e m s • B re a k p o i n t • To o l k i t • M o d u l a r S c a l e • C o l o r S c h e m e r • S a s s y b u t t o n s
  50. 50. L e t ’s t a l k t o o l s B u t w a i t , t h e re ’s m o re ! P h o t o b y O Z i n O H , F l i c k r
  51. 51. To o l s y o u p ro b a b l y w a n t t o u s e • C o m m a n d l i n e • G i t • C o m p o s e r • D r u s h ( I t ’s n o t a l l t h a t s c a r y. R e a l l y. )
  52. 52. L e a n o n m e … M a n a g i n g d e p e n d e n c i e s a n d p a c k a g e s P h o t o b y M a r i n , F l i c k r
  53. 53. C o m p o s e r • c o m p o s e r. j s o n P H P
  54. 54. { " n a m e " : " d r u p a l / d r u p a l " , " d e s c r i p t i o n " : " D r u p a l i s a n o p e n s o u rc e c o n t e n t m a n a g e m e n t p l a t f o r m p o w e r i n g m i l l i o n s o f w e b s i t e s a n d a p p l i c a t i o n s . " , " t y p e " : " d r u p a l - c o re " , " l i c e n s e " : " G P L - 2 . 0 + " , " re q u i re " : { " p h p " : " > = 5 . 4 . 2 " , " s d b o y e r / g l i p h " : " 0 . 1 . * " , " s y m f o n y / c l a s s - l o a d e r " : " 2 . 4 . * " , " s y m f o n y / c s s - s e l e c t o r " : " 2 . 4 . * " , " s y m f o n y / d e p e n d e n c y - i n j e c t i o n " : " 2 . 4 . * " , " s y m f o n y / e v e n t - d i s p a t c h e r " : " 2 . 4 . * " , " s y m f o n y / h t t p - f o u n d a t i o n " : " 2 . 4 . * " , " s y m f o n y / h t t p - k e r n e l " : " 2 . 4 . * " , " s y m f o n y / ro u t i n g " : " 2 . 4 . * " , " s y m f o n y / s e r i a l i z e r " : " 2 . 4 . * " , " s y m f o n y / v a l i d a t o r " : " 2 . 4 . * " , " s y m f o n y / y a m l " : " d e v - m a s t e r # e 4 9 a 4 7 d 6 0 3 4 8 6 6 5 2 6 1 f 6 e 2 7 9 b a 3 8 3 2 4 1 d e b 7 3 c a b " , " t w i g / t w i g " : " 1 . 1 5 . * " , " d o c t r i n e / c o m m o n " : " d e v - c o m p o s e r. j s o n
  55. 55. m a s t e r # a 4 5 d 1 1 0 f 7 1 c 3 2 3 e 2 9 f 4 1 e b 0 6 9 6 f a 2 3 0 e 3 f a 1 b 1 b 5 " , " d o c t r i n e / a n n o t a t i o n s " : " d e v - m a s t e r # 4 6 3 d 9 2 6 a 8 d c c 4 9 2 7 1 c b 7 d b 5 a 0 8 3 6 4 a 7 0 e d 6 e 3 c d 3 " , " g u z z l e h t t p / g u z z l e " : " 4 . 1 . * " , " k r i s w a l l s m i t h / a s s e t i c " : " 1 . 1 . * @ a l p h a " , " s y m f o n y - c m f / ro u t i n g " : " 1 . 1 . * @ a l p h a " , " e a s y rd f / e a s y rd f " : " 0 . 8 . * " , " p h p u n i t / p h p u n i t " : " 4 . 1 . * " , " p h p u n i t / p h p u n i t - m o c k - o b j e c t s " : " d e v - m a s t e r # e 6 0 b b 9 2 9 c 5 0 a e 4 2 3 7 a a f 6 8 0 a 4 f 6 7 7 3 f 4 e e 1 7 f 0 a 2 " , " z e n d f r a m e w o r k / z e n d - f e e d " : " 2 . 2 . * " } , " a u t o l o a d " : { " p s r- 4 " : { " D r u p a l C o re " : " c o re / l i b / D r u p a l / C o re " , " D r u p a l C o m p o n e n t " : " c o re / l i b / D r u p a l / C o m p o n e n t " , " D r u p a l D r i v e r " : " d r i v e r s / l i b / D r u p a l / D r i v e r " } , " f i l e s " : [ " c o re / l i b / D r u p a l . p h p " ] } , c o m p o s e r. j s o n
  56. 56. B o w e r • b o w e r. j s o n F ro n t - e n d
  57. 57. { " n a m e " : " a t o m i c " , " v e r s i o n " : " 0 . 0 . 0 " , " i g n o re " : [ " * * / . * " , " n o d e _ m o d u l e s " , " b o w e r _ c o m p o n e n t s " ] , " d e p e n d e n c i e s " : { " e q . j s " : " ~ 1 . 4 . 1 " , " f o r m a l i z e " : " g i t : / / g i t h u b . c o m / n a t h a n s m i t h / f o r m a l i z e " } } b o w e r. j s o n
  58. 58. n p m • p a c k a g e . j s o n N o d e
  59. 59. { " n a m e " : " d e p o t " , " v e r s i o n " : " 0 . 0 . 0 " , " d e p e n d e n c i e s " : { } , " d e v D e p e n d e n c i e s " : { " c o m p a s s - o p t i o n s " : " ^ 0 . 1 . 1 " , " g r u n t " : " ~ 0 . 4 . 0 " , " g r u n t - c o n t r i b - w a t c h " : " ~ 0 . 4 . 3 " , " g r u n t - c o n t r i b - c o m p a s s " : " ~ 0 . 2 . 0 " , " g r u n t - c o n t r i b - j s h i n t " : " ^ 0 . 1 0 . 0 " , " g r u n t - c o n t r i b - u g l i f y " : " ~ 0 . 2 . 0 " , " g r u n t - c o n t r i b - i m a g e m i n " : " ~ 0 . 1 . 4 " , " g r u n t - p a r a l l e l " : " ~ 0 . 1 . 0 " , " g r u n t - s v g m i n " : " ~ 0 . 1 . 0 " , " g r u n t - c o n t r i b - c o p y " : " ~ 0 . 4 . 1 " , " g r u n t - s h e l l " : " ^ 0 . 7 . 0 " } p a c k a g e . j s o n
  60. 60. R u b y e n v i ro n m e n t • R V M • r b e n v B u n d l e r : R u b y g e m s • G e m f i l e • G e m f i l e . l o c k R u b y
  61. 61. s o u rc e ' h t t p : / / r u b y g e m s . o rg ' ! g e m ' s a s s ' , ' ~ > 3 . 3 . 0 ' g e m ' b re a k p o i n t ' , ' ~ > 2 . 4 . 0 ' g e m ' s u s y ' , ' ~ > 2 . 1 . 2 ' g e m ' t o o l k i t ' , ' ~ > 2 . 5 . 0 ' g e m ' m o d u l a r- s c a l e ' , ' ~ > 2 . 0 . 4 ' g e m ' c o l o r- s c h e m e r ' , ' ~ > 0 . 2 . 8 ' g e m ' c o m p a s s ' , ' ~ > 1 . 0 . 0 . a l p h a . 1 7 ' g e m ' c o m p a s s - n o r m a l i z e ' , ' ~ > 1 . 5 ' g e m ' s a s s y - b u t t o n s ' , ' ~ > 0 . 2 . 6 ' G e m f i l e
  62. 62. D e v e n v i ro n m e n t t o o l s S e t t i n g u p a l o c a l s e r v e r, m a n a g e l a n g u a g e s , e t c . P h o t o b y G re y l o c h , F l i c k r
  63. 63. D e v e n v i ro n m e n t t o o l s • M A M P / WA M P / L A M P / X A M P P • A c q u i a D e v D e s k t o p • H o m e b re w • Va g r a n t a n d D o c k e r • C h e f a n d P u p p e t
  64. 64. Ye o m a n S c a ff o l d i n g t o o l t o b u i l d f i l e s f o r t h e m e s o r m o d u l e s P h o t o b y To m F r a n c i s , F l i c k r
  65. 65. Ta s k r u n n e r s M u l t i p l e c o m m a n d l i n e t a s k s w i t h o n e c o m m a n d P h o t o b y K y l e S t e e d , F l i c k r
  66. 66. G r u n t • g r u n t f i l e . j s G u l p • g u l p f i l e . j s Ta s k r u n n e r s N o d e - b a s e d : n p m i n s t a l l
  67. 67. F u n w i t h t a s k s W h a t ’s a t a s k r u n n e r w i t h o u t t a s k s ? P h o t o b y D a n C o u l t e r, F l i c k r
  68. 68. L i n t s • c s s l i n t • j s l i n t • e s l i n t M i n i f i e r s • u g l i f y j s A u t o p re f i x e r
  69. 69. I m a g e t o o l s • i m a g e o p t i m • g r u n t i c o n O t h e r t a s k s • s h e l l • c o n t r i b - c o p y
  70. 70. ' u s e s t r i c t ' ; ! v a r g u l p = re q u i re ( ' g u l p ' ) ; v a r j s h i n t = re q u i re ( ' g u l p - j s h i n t ' ) ; v a r s t y l i s h = re q u i re ( ' j s h i n t - s t y l i s h ' ) ; v a r p a t h s = re q u i re ( ' c o m p a s s - o p t i o n s ' ) . p a t h s ( ) ; v a r b ro w s e r S y n c = re q u i re ( ' b ro w s e r- s y n c ' ) ; v a r s h e l l = re q u i re ( ' g u l p - s h e l l ' ) ; ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / B e g i n G u l p Ta s k s / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' l i n t ' , f u n c t i o n ( ) { re t u r n g u l p . s rc ( [ p a t h s . j s + ' / * * / * . j s ' , ' ! ' + p a t h s . j s + ' / * * / * . j s ' ] ) . p i p e ( j s h i n t ( ) ) . p i p e ( j s h i n t . re p o r t e r ( s t y l i s h ) ) } ) ; ! g u l p f i l e . j s
  71. 71. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / C o m p a s s Ta s k / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' c o m p a s s ' , f u n c t i o n ( ) { re t u r n g u l p . s rc ( p a t h s . s a s s + ' / * * / * ' ) . p i p e ( s h e l l ( [ ' b u n d l e e x e c c o m p a s s w a t c h - - t i m e ' ] ) ) ; } ) ; ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / Wa t c h / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' w a t c h ' , f u n c t i o n ( ) { g u l p . w a t c h ( p a t h s . j s + ' / * * / * . j s ' , [ ' l i n t ' ] ) ; } ) ; ! g u l p f i l e . j s
  72. 72. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / B ro w s e r S y n c Ta s k / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' b ro w s e r S y n c ' , f u n c t i o n ( ) { b ro w s e r S y n c . i n i t ( [ p a t h s . c s s + ' / * * / * . c s s ' , p a t h s . j s + ' / * * / * . j s ' , p a t h s . i m g + ' / * * / * ' , p a t h s . f o n t s + ' / * * / * ' , p a t h s . h t m l + ' / * * / * . h t m l ' , ] ) ; } ) ; ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / S e r v e r Ta s k s / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' s e r v e r ' , [ ' w a t c h ' , ' c o m p a s s ' , ' b ro w s e r S y n c ' ] ) ; g u l p . t a s k ( ' s e r v e ' , [ ' s e r v e r ' ] ) ; g u l p f i l e . j s
  73. 73. P ro t o t y p i n g t o o l s B u i l d i n g i n t h e b ro w s e r w i t h c o m p o n e n t - b a s e d d e s i g n P i x e l p e r f e c t i o n i s t h e e n e m y o f t h e g o o d . P h o t o b y E n i g m a B a d g e r, F l i c k r
  74. 74. S t y l e g u i d e g e n e r a t o r s • S t y l e P ro t o t y p e s • P a t t e r n L a b • K S S S t a t i c p ro t o t y p e s • S t y l e t i l e s • E l e m e n t c o l l a g e s • V i s u a l i n v e n t o r i e s
  75. 75. Te s t i n g & D e p l o y m e n t To o l s f o r m a k i n g s u re y o u r s i t e w o r k s b e f o re d e p l o y i n g c h a n g e s P h o t o b y P a s c a l , F l i c k r
  76. 76. C ro s s - b ro w s e r t e s t i n g • B ro w s e r S t a c k S c re e n s h o t t o o l s • Wr a i t h • P a g e re s H e a d l e s s b ro w s e r s • P h a n t o m J S • S l i m e r J S
  77. 77. B D D • B e h a t • C a s p e r J S A u t o m a t e d re g re s s i o n t e s t i n g • S e l e n i u m C o n t i n u o u s i n t e g r a t i o n • J e n k i n s • Tr a v i s C I
  78. 78. W h y d o y o u v e x m e s o ? A re y o u i n s a n e ? A m I i n s a n e ? A re w e i n s a n e ? P h o t o b y R o b e r t M c G o l d r i c k , F l i c k r
  79. 79. W h y s o c o m p l i c a t e d ? • C o l l a b o r a t i o n • C o n s i s t e n c y • C a p a b i l i t i e s • A u t o m a t e m u n d a n e t a s k s • F i n d e r ro r s , i m p ro v e p e r f o r m a n c e p r i o r t o d e p l o y m e n t
  80. 80. C o p i n g w i t h m a d n e s s I ’ m s c a re d . H o l d m e .
  81. 81. Yo u d o n ’t h a v e t o d o a l l o f t h i s . • O k t o j u s t u s e H T M L , C S S a n d J S . • Tr y o n e n e w t h i n g w i t h a p ro j e c t . • N e x t p ro j e c t ? Tr y a n o t h e r n e w t h i n g . • O r d o n ’t .
  82. 82. P h o t o b y E r i k M e l d r u m , F l i c k r
  83. 83. P h o t o b y L a u r a , F l i c k r
  84. 84. P h o t o b y A m b u r n E v e re t t , F l i c k r
  85. 85. M a rc D r u m m o n d ( & I z z y ) @ M a rc D r u m m o n d m d r u m m o n d I R C & d r u p a l . o rgm a rc d r u m m o n d . c o m

×