Happy Release Day! Today we are wrapping up the Getting Started with Responsive Web Design in Drupal series.
We're going to look at a responsive Views-based slideshow plugin based on the Flexslider Javascript library and refactor our Views Slideshow with Flexslider instead. Then, we're going to tackle a variety of "clean-up" tasks. It's all about the details, right? First, we'll update the styles of our search form so that it doesn't break out of its sidebar region. Next, we'll take a critical look at our header and navigation content on a mobile-sized screen and make room for more important content as well as update the styles of our responsive menu provided by a contributed module to better match our site's design. Finally, we'll look at an option for making our content contained in an HTML table more reader-friendly on smaller, but important, devices. We'll also address a problem of up-scaled images and have a bit more fun with media queries.
This week's tutorials:
- Creating Responsive Slideshows in Drupal with FlexSlider (FREE)
- Adapting a Fixed-Width Search Form to Flex with its Container
- Styling a Mobile-Friendly Header and Navigation
- Cleaning up Tables, Up-Scaled Images, and More Fun with Media Queries
Ready to take your skills to the next level? Check out our series on Sass, Learning Sass and Compass. (Not required for this series, but a great skill to have, especially if you want to take your responsive web design skills to the next level!) Also, for a regular dose of front-end development resources, subscribe to the Front End Rapport, curated by Lullabot's front-end developers.
Next week, we'll be shifting gears to the world of PHP, with another series from our wonderful partners at KnpUniversity. Until then, happy coding!
Add new comment