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 d r u m m o n d @ M a rc 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

I’m writing a book! Drupal 8 Responsive Web Design P a c k t P u b l i s h i n g 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

“I get totally overwhelmed by all the new things. 
 I feel like I know nothing.” – M e . ( A n d e v e r y o n e e l s e ) 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 A M D Va g r a n t B D D • • • • G i t C o m m o n J S D o c k e r B e h a t • • • • C o m p o s e r B a c k b o n e C h e f C a s p e r. j s • • • • D r u s h U n d e r s c o re . j s P u p p e t B ro w s e r S t a c k • • • • Tw i g E m b e r Ye o m a n Wr a i t h • • • • H a n d l e b a r s A n g u l a r G r u n t P a g e re s • • • • M u s t a c h e R u b y G r u n t f i l e . j s S e l e n i u m • • • • We b R V M G u l p P h a n t o m J S • • • • c o m p o n e n t s B u n d l e r G u l p f i l e . j s S l i m e r J S • • • H A M L G e m f i l e L i n t J e n k i n s • • • • l i b r a r i e s . y m l G e m f i l e . l o c k c s s l i n t Tr a v i s C I • • • • A s s e t i c B o w e r j s h i n t • • • c o n f i g . r b b o w e r. j s o n e s l i n t • • • B o o t s t r a p N o d e u g l i f y j s • • • F o u n d a t i o n n p m A u t o p re f i x e r • • • We b S t a r t e r p a c k a g e . j s o n i m a g e o p t i m • • • K i t C o m p o s e r G r u n t i c o n • • Z e n G r i d s c o m p o s e r. j s o n S t y l e • • • A c q u i a D e v S i n g u l a r i t y P ro t o t y p e s • • D e s k t o p S u s y P a t t e r n L a b • • M A M P re q u i re . j s K S S • • • I t ’s o k . H o m e b re w C o ff e e S c r i p t T D D • • •

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

Yo u r 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 ? • 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

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

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 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 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 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 t h e m e - s e t t i n g s . p h p 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

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 < ? 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 / ' ) ) , ) ; � }

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

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 # @ 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

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 P h o t o b y P e t e r L e e , F l i c k r

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 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 m e c o n f i g d e f a u l t s o t h e r. s t u ff . y m l 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

T h e m e c o n f i g d e f a u l t s o t h e r. s t u ff . y m l 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

L e t ’s l o o k a t … 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

Tu r n i n g d a t a i n t o m a r k u p H T M L P h o t o b y A d r i a n , F l i c k r

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

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 P h o t o b y S c o t t M o o re , F l i c k r