Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using Adapt.js with Drupal

From: Responsive Design with Drupal

Video: Using Adapt.js with Drupal

We started with a fixed-width layout design for the browser but quickly realized that everyone doesn't use a browser solely for viewing our design and that different Breakpoints exist that we need to take into consideration. So, now we decide to make a tablet version of our site and a mobile version of our site, and I have created three different style sheets based on these breakpoints. But how do I tell the browser which style sheet to use? One such way is by using a JavaScript file known as Adapt.js. Adapt.js will help us to determine the device that we are using and apply a style sheet accordingly.

Using Adapt.js with Drupal

We started with a fixed-width layout design for the browser but quickly realized that everyone doesn't use a browser solely for viewing our design and that different Breakpoints exist that we need to take into consideration. So, now we decide to make a tablet version of our site and a mobile version of our site, and I have created three different style sheets based on these breakpoints. But how do I tell the browser which style sheet to use? One such way is by using a JavaScript file known as Adapt.js. Adapt.js will help us to determine the device that we are using and apply a style sheet accordingly.

Let's take a look at Adapt.js, how to use it, and best practices to integrate it with Drupal. In my browser I have adapt.960.gs open. The Adapt.js file is just a JavaScript file that will help us determine which CSS files to load when the browser renders a page. This is going to allow for us for designing fixed-width layouts based on certain Breakpoints, and then displaying those layouts accordingly. As you can see, Adapt.js has some already predetermined Breakpoints, ranging from mobile, all he way up to large monitors or possibly even browsers being displayed on televisions.

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.

So, let's take a look at ways to integrate any JavaScript file into your Drupal theming arsenal. Let's go ahead and start by clicking on the Download button, so we can download the Adapt.js file to use with our Drupal Instance. Next, let's go ahead and open up the Downloads folder, and extract the file. Now that it has been extracted, we need to open up the assets js folder, and I want to copy the adapt.js script over to my Drupal Instance. Let's go ahead and choose Desktop/Drupal/ drupal.adaptive and then locate our sites folder, and I'm looking for the theme, in this case the responsive theme, and inside of here I have an assets JavaScript folder and I want to place inside of the library.

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.

Show transcript

This video is part of

Image for Responsive Design with Drupal
Responsive Design with Drupal

35 video lessons · 6830 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 3m 19s
    1. Welcome
      51s
    2. Using the exercise files
      1m 25s
    3. Exploring the finished project
      1m 3s
  2. 16m 30s
    1. Installing Acquia Dev Desktop
      3m 37s
    2. Importing a Drupal website
      4m 7s
    3. Restoring database snapshots with the Backup and Migrate module
      3m 13s
    4. Understanding the Devel module
      5m 33s
  3. 5m 48s
    1. What is responsive design?
      3m 32s
    2. Understanding adaptive design
      2m 16s
  4. 15m 33s
    1. Discovering fixed-width layouts
      3m 47s
    2. Understanding breakpoints
      3m 33s
    3. Using Adapt.js with Drupal
      8m 13s
  5. 27m 21s
    1. Discovering fluid layouts
      3m 43s
    2. Exploring fluid widths
      8m 34s
    3. Working with fluid margins and padding
      7m 41s
    4. Making text fluid
      7m 23s
  6. 16m 37s
    1. Discovering fluid images
      3m 5s
    2. Exploring fluid image techniques
      5m 6s
    3. Working with fluid media techniques
      8m 26s
  7. 21m 36s
    1. Introduction to media queries
      3m 2s
    2. Writing our first media query
      6m 10s
    3. Creating a style sheet for each breakpoint
      3m 53s
    4. Understanding media query best practices
      8m 31s
  8. 8m 14s
    1. Introduction to responsive menus
      2m 32s
    2. Creating a responsive menu
      3m 5s
    3. Integrating responsive menus into Drupal
      2m 37s
  9. 14m 52s
    1. Introduction to responsive tables
      1m 25s
    2. Creating responsive tables
      7m 30s
    3. Integrating responsive tables into Drupal
      5m 57s
  10. 21m 6s
    1. Introduction to responsive forms
      3m 9s
    2. Creating responsive forms
      8m 30s
    3. Integrating responsive forms into Drupal
      9m 27s
  11. 6m 38s
    1. Adding min-width and max-width support with Respond.js
      2m 35s
    2. Exploring context-aware image sizing
      4m 3s
  12. 1m 11s
    1. Next steps
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Responsive Design with Drupal.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.