Using Adapt.js with Drupal
- Next steps
Viewers: in countries Watching now:
In this course, Chaz Chumley takes you through the process of transitioning a Drupal website to a responsive model that automatically tailors and sizes content for a wide range of displays, from desktops to mobile devices.
The course starts with setting up the Drupal environment in Acquia and defines some basic principles of responsive design before moving on to creating a new Drupal theme with fluid layouts, fluid media, and responsive tables and forms. Chaz also covers writing media queries, which allow you to create different style sheets for each device type.
The course wraps up with a look at Respond.js and content-aware image sizing in Drupal—responsive design tools that can optimize your project for maximum performance.
- What is responsive design?
- Understanding fixed-width vs. fluid layouts
- Working with fluid margins and padding
- Writing a media query
- Creating responsive menus and forms
- Adding min- and max-width support with Respond.js
Using Adapt.js with Drupal
Let's begin resizing the page so that we can see the different breakpoints being reached and the different design changes taking effect. As I begin to resize a page, we go from browser to tablet to even mobile, always they are taking effect based off the different breakpoints being reached, and a substitution of the style sheet for that particular breakpoint. So how do we utilize this technique with Drupal? Your first thought might be to search for a module to integrate Adapt.js into your Drupal 7 website, and while I would tend to agree with you that in most cases the module approach is best, we don't have that option this time.
Once I have this in my library, I need go ahead and call this from Drupal, let's close this window and then open up over Editor and then locate the drupal.adaptive/sites/all/themes/responsive folder. Once inside the responsive folder, I want to make reference to that Adapt.js library. so let's go ahead and click on the responsive.info file, and one thing to note here is that we want to make sure we call this after any script that's calling this Adapt.js library. So, I am simply going to copy the last scripts lines, paste it in, and then change the custom.js to be calling the library adapt.js files.
So, now I have the library in place, I have a reference to inside my .info file, the next thing I need to do is I need to actually set this up so that the configuration settings call the correct style sheets when this is fired. We can do that by looking at the custom.js file next. Go ahead and save that .info file and then browse back over to assets/js/custom.js. Another thing to note is we do not want place this inside of the (document) .ready (function(). So, I am just using a variable that needs to be accessible to the script at all times, we want place this on the outside of our (document) .ready (function().
Go ahead and hit Enter a couple of times to create some space, and then we are going to go ahead and first make a comment. This will be our Adapt.js Settings, that way if we come back here, we know exactly what this particular script is calling. Then next what you do is create a variable, this variable is for the ADAPT_CONFIG, inside the ADAPT_CONFIG, there are three different settings that I would like to call. The first is the Path, the path is going to be where is the CSS folder that contains the style sheets I want to use, let's enter that now.
That would be the sites/all/themes, the name of the theme, in this case Since I'm entering multiple settings, I need to make sure I have a comma after here, and then go ahead and enter our second setting. The second setting is dynamic, meaning that when the page is called, and as the page resizes, I want this to continuously fire. So, in this case dynamic is true. We'll add another comma so that we can add our last setting.
This last setting is the range, the range is when one particular pixel Breakpoint is reached, what style sheet would get called. Since there were three different Breakpoints that we are interested in, mobile, tablet and browser, we need to go and enter that range. Let's go ahead and add some square brackets, since this is going to having multiple ranges inside of here, and then the first range is going to be from 0px to 760px, and this is going to call our mobile.css file, I will place a comma, and then put in my second range.
My second range is going to be from 760px, all the way up to 980px and for this I want the tablet.css style sheet to be called. Our last and final range is going to be from 980px to 1280px and for this I just want the standard grid that we already have in place to be called, so this will be for our browsers. Now that I have the configuration in place, let's go ahead and save this, and then our third and final step that we need to do is we need to actually create the mobile and tablet style sheets.
So, if we actually open our css folder and right-click on it and say New Text Document, I want to go ahead and create a mobile.css file, as well as, I want create a tablet.css file. Inside the mobile.css file I want to create something that is visually different so that I can actually see this being fired off once we reach that Breakpoint. The most common element on the pages is the header, so let's look at just changing the background color. So, let's go ahead and target the header, and we are going to change the background-color:, and we are going to change this to be #98C4DA, this will give us kind of a bluish tint.
I am going to go ahead and copy this, make sure I save this file and then go over to my tablet and paste this in and just change the value of my background-color: So, for our tablet, I want to be kind of a grayish color, so in this case, 757575, save this. Now with all the steps completed, let's go ahead and browse back over to our Instance of Drupal, and then one thing to keep in mind is since we made a change the .info file, we want to make sure that we flush the Drupal cache.
In order to do that we need to be logged in. Go ahead and log in by going to /user, and then putting in the User credentials of lowercase admin, same for the Password, and then logging in. From here let's go ahead and flush the Drupal cache, go back to our Home page and then begin to resize the browser, there is our great color, so we reached the tablet, as I continue, we get to our blue color, so we reached on mobile. So, you can see the adapt.js script is being fired off. Sticking with our fixed-width approach, we'll now take a look at using adapt.js to apply different styling for our design based on the Breakpoints we identified.
Having such a tool available to help us and applying the different styling and in turn making our design more responsive for our end users is a great way to integrate the Adapt.js script into Drupal. While taking an Adaptive approach to Responsive Design may work for you, it may not work for everyone. Keeping that in mind, let's move on creating a fluid theme that will allow for a more flexible approach.
There are currently no FAQs about Responsive Design with Drupal.