Building a Drupal 8 theme with new-fangled awesomeness

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

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

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

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

– 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

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 .

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

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

– D r u p a l t h e m e f i l e s
“All your YML and PHP belongs to us.”

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
!

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

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

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

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

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

!
$ 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 ' ) ) ,
) ;
!
}

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

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

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

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 '

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

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

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 …

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

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

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 ' ) ;
}
}

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

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

< ! 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 % }

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 >

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 >

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 …

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

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

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

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

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

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

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 )

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

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

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

c o n f i g . r b
# 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
!

c o n f i g . r b
# 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 } : { }

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

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 { }

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

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

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

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

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

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

C o m p o s e r
• c o m p o s e r. j s o n
P H P

{
" 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

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

B o w e r
• b o w e r. j s o n
F ro n t - e n d

{
" 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

n p m
• p a c k a g e . j s o n
N o d e

{
" 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

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

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

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

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

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

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

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

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

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

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

' 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

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ / 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 ' ] ) ;
} ) ;
!

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ / 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 ' ] ) ;

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

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

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

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

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

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

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

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 .

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 .

P h o t o b y E r i k M e l d r u m , F l i c k r

P h o t o b y L a u r a , F l i c k r

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

Building a Drupal 8 theme with new-fangled awesomeness

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Building a Drupal 8 theme with new-fangled awesomeness