w i t h n e w - fa n g l e d a w e s o m e n e s s M a rc D r u m - - PowerPoint PPT Presentation

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 g l 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 rg

m 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

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 )

– 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.”

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 ?

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 )

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

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

s e t t i n g s : a t o m i c _ t y p e k i t _ i d : ' 0 '

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

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

• $ 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 / ' ) ) , ) ;

• }

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

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

# @ t o d o T h e re i s n o U I y e t f o r c o n f i g u r i n g t h i s , b u t t h e s e t t i n g i s i n c l u d e d # h e re , b e c a u s e C o n f i g I m p o r t U I Te s t re q u i re s a n o n - e m p t y b a r t i k . s e t t i n g s . y m l # f i l e : h t t p s : / / d r u p a l . o rg / n o d e / 2 2 3 5 9 0 1 . s h o r t c u t _ m o d u l e _ l i n k : 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

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 B a r t i k t h e m e .

• b a r t i k . 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 : ' B a r t i k s e t t i n g s ' m a p p i n g : # @ t o d o M o d u l e - s p e c i f i c s e t t i n g s s h o u l d b e d e f i n e d b y t h e m o d u l e : # h t t p s : / / d r u p a l . o rg / n o d e / 2 2 3 5 9 0 1 . s h o r t c u t _ m o d u l e _ l i n k : t y p e : b o o l e a n l a b e l : ' S h o r t c u t m o d u l e l i n k '

• 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

• 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

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

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 a g e _ a l t e r ( ) * / / / f u n c t i o n a t o m i c _ p a g e _ a l t e r ( & p a g e ) {

• f u n c t i o n a t o m i c _ p a g e _ a l t e r ( & $ p a g e ) {
• / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

/ / 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 ' ) ) { $ 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 ' ) ; $ k i t _ u r l = " / / u s e . t y p e k i t . n e t / " . $ k i t _ i d . " . j s " ; $ k i t _ t r y _ c a t c h = " t r y { Ty p e k i t . l o a d ( ) ; } c a t c h ( e ) { } " ; / / $ k i t = a r r a y ( ) ; $ p a g e [ ' # a t t a c h e d ' ] [ ' j s ' ] [ ] = a r r a y ( ' t y p e ' = > ' e x t e r n a l ' , ' d a t a ' = > $ k i t _ u r l , ' e v e r y _ p a g e ' = > T R U E ) ; $ p a g e [ ' # a t t a c h e d ' ] [ ' j s ' ] [ ] = a r r a y ( ' t y p e ' = > ' i n l i n e ' , ' d a t a ' = > $ k i t _ t r y _ c a t c h , ' e v e r y _ p a g e ' = > T R U E ) ; / / d r u p a l _ re n d e r ( $ k i t ) ; } }

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

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

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

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

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

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

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 / l a y o u t . c s s : { } c s s / s t y l e . c s s : { } c s s / c o l o r 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

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

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

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

• # 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 "

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

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

C o m p o s e r

• c o m p o s e r. j s o n

P H P

B o w e r

• b o w e r. j s o n

F ro n t - e n d

n p m

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

N o d e

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

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 .

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

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

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 ?

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

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 .

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

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 ?

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 .

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 rg

m a rc d r u m m o n d . c o m