Join Chaz Chumley for an in-depth discussion in this video Importing a Drupal website, part of Drupal: Responsive Design.
In most cases you won't be dealing with a default Drupal Instance. More than likely you already have an existing Drupal site that you're working with. So let's take a look at exactly how easy it is to import a site using the Acquia Dev Desktop, and not just one site, but three different instances that we will be using as a basis for fixed, adaptive, and responsive designs. Let's begin by creating a Folder on our Desktop called Drupal. This'll be where our three Drupal Instances will live while we work through the different stages of Responsive Design.
I am going to right-click and say New Folder and give it a name of Drupal, and then next we actually need to have a Drupal Instance to work with. So, if we open up the exercise files and locate the Start, drupal, and start.sql files. Something that I've done is provide both the free and premium subscribers with access to these files. This way everyone has an even playing field to start with, and we have a basis to build upon as we progress through each chapter in our series on Responsive Design.
Go ahead and copy the Drupal folder over to the Drupal Desktop and paste it in place. Since we're going to be working with three different Instances of Drupal, I want to repeat this process real quick. First, let's go ahead and give this folder name of drupal.fixed and then since I still have in memory that Drupal Instance, I am going to paste it again. The second folder, we'll go ahead and call this drupal.adaptive or adaptive design, we'll be working with. And then I'm going to paste one more time.
Let's go ahead and name third instance, drupal.responsive. Now that I have the three instances created, go ahead and close the folders, and before we actually go ahead and start the import process, it's very important to know that once you've created a folder--especially on the Mac--that you need to make sure that it has Read-Write permissions for all users and the enclosing files. So quickly right-click on the Drupal folder, Click on Get Info, and locate the Sharing & Permissions. You may need to unlock the permissions, we'll do so now, and then change it to Read & Write, and then Apply to enclosed items.
You'll be prompted, yep, we want to go ahead and do that, so click OK. And once those privileges have been applied, go ahead and click the Window and then with the focus back on the Acquia Dev Desktop Control panel, choose Settings. From here, click on the Site's tab and then only Import button. We're going to be repeating this process three different times, so it's very important that we get it right the first time. By clicking on the Browse button for the site path and then locating the Drupal > drupal.fixed instance and double-clicking on it, we can set the Site path.
Next, since we already have a database backup, go ahead and click on the Browse button for the dump file, locate the exercise file's start folder and double-click on start.sql. Let's give the Database a name, in this case drupal_fixed, and then for the Domain name, let's go ahead and repeat this, but instead of an underscore, we'll call this drupal.fixed. This is more in line with URL naming conventions, go ahead and click the Import button, and if prompted for permissions, go ahead and put in your Username, Password and then click OK.
With our first instances imported, we need to repeat this process two more times. I'm going to go ahead and let you take care that now, remembering to name both the URL and the database files appropriately based off the responsive and adaptive instances that we have inside our Drupal folder. Importing out of the way, we now have three different Drupal Instances for us to use to modify. Comparing, as well as add different responsive techniques throughout the chapters. However, as we work along, you may find yourself needing to back up your work.
So let's move on to see how we can easily use the backup and migrate modules inside of Drupal, to back up and restore existing Drupal Instances.
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