Upgrade to Pro — share decks privately, control downloads, hide ads and more …

rwd-css

 rwd-css

Tips and tricks for beginners using CSS and the mobble WordPress plugin for Responsive Web development

christine rondeau

July 26, 2014
Tweet

More Decks by christine rondeau

Other Decks in Education

Transcript

  1. CSS Method Hide/Reveal content at certain breakpoints Example - Underscores.me

    < b u t t o n c l a s s = " m e n u - t o g g l e " > M e n u < / b u t t o n > . m e n u - t o g g l e { d i s p l a y : n o n e ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 6 0 0 p x ) { . m e n u - t o g g l e { d i s p l a y : b l o c k ; } }
  2. Handy Tutorial To learn more on how to use javascript

    at different screen size, check out Paul Underwood's tutorial: Checking Media Queries With Javascript
  3. This method can be applied to anything . h i

    d e - o n - l a r g e { d i s p l a y : n o n e ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 6 0 0 p x ) { . h i d e - o n - s m a l l { d i s p l a y : n o n e ; } . h i d e - o n - l a r g e { d i s p l a y : b l o c k ; } }
  4. CSS pros & cons Pro Super simple Can be applied

    to as many breakpoints as you want Cons HTML content is still there
  5. Plugin Method Mobble provides conditional functions for detecting a variety

    of mobile devices and tablets. It is developed using Mobile_Detect which is also used by numerous others plaftorms. Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.
  6. How to Use Mobble? Use Conditionals < p h p

    i f ( i s _ m o b i l e ( ) ) { d o s o m e t h i n g } e l s e i f ( i s _ t a b l e t ) { d o s o m e t h i n g s l i g h t l y d i f f e r e n t } e l s e { d o s o m e t h i n g t o t a l l y d i f f e r e n t } ? >
  7. Example - Emotive BC < p h p i f

    ( i s _ m o b i l e ( ) ) { g e t _ t e m p l a t e _ p a r t ( ' c a r o u s e l - m o b i l e ' ) ; } e l s e { g e t _ t e m p l a t e _ p a r t ( ' c a r o u s e l ' ) ; } ? > Carousel mobile displays smaller images than the other one.
  8. Example 2 - Mendoza & Pangan < p h p

    i f ( i s _ m o b i l e ( ) ) { g e t _ t e m p l a t e _ p a r t ( ' h e a d e r - m o b i l e ' ) ; } e l s e { g e t _ t e m p l a t e _ p a r t ( ' h e a d e r ' ) ; } ? > The navigation is displayed above the logo on the mobile phones but appears below the content on desktops and tablets.
  9. Mobble pros & cons Pro Super simple You can target

    specific platform (eg: is_android, is_ios(), is_blackberry(), etc... ) It's free and well maintained Cons It relies on the browser user-agent string which is not perfect Needs to be tested on the platform