Advertisement
Complete Websites

Adaptive Blog Theme: Breakpoints

by

At this point in our theme development it's time to look at the adaptive nature of the layout. We're going to examine our breakpoints, tidy up the layout in its various states, deal with the navigation and any images we encounter. Notably, this is the last of the screencasts before we dive into WordPress theming!


Note: When I refer to the word responsive, I often really mean adaptive (sorry, force of habit!) Responsive layouts involve fluid dimensions; ours offers a series of fixed-width layouts for screens wider than 767px, making it technically adaptive.


First Look at the Breakpoints


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

The Last of the Breakpoints


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Adaptive Images


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube
Related Posts
  • Web Design
    CMS
    Tumblr Appearance Options: Boolean OptionsTumblr 23 retina
    In this episode of Tumblr Theming 101 we'll add some Boolean Appearance Options to our theme. This will allow users, through checkboxes, to enable or disable certain features.Read More…
  • Web Design
    CMS
    Tumblr Appearance Options: ImagesTumblr 22 retina
    Moving on with our coverage of Tumblr's Appearance Options, we're now going add an option whereby users will be able to set a background image to the theme.Read More…
  • Web Design
    CMS
    Adding Media Queries to Our Tumblr ThemeTumblr 18 retina
    In this video, we'll be rounding off our responsive CSS by adding some Media Queries. We'll be talking about defensive coding, being sure that we make allowances for various usage scenarios, such as unusually long blog titles.Read More…
  • Web Design
    CMS
    Quick Tip: How to Disable Tumblr's Default Mobile ThemeTumblr 14 retina
    Tumblr blogs automatically use a default mobile layout for smaller screens. In this video we're going to look at disabling this default mobile layout, so that we can fully engage our own responsive theme.Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    The Code Behind a Tumblr ThemeTumblr 2 retina
    In this screencast we'll take a first look at the structure of a Tumblr theme and the Tumblr customize area.Read More…