Setting up Git
FreeThe video will walk you through getting your code setup with Acquia Cloud. This lesson covers:
- Adding your SSH public key to the Cloud dashboard.
- Performing a Git checkout with TortoiseGit to clone your repository.
- Adding new files to your repository.
- Pushing new (and changed) files to Acquia Cloud.
If you don't use Windows and TortoiseGit, or if you want a better overview of Git itself, we have an entire series on Git, which will show you how to install Git and use it from the command line, including doing a git clone command. Once you get things set up with Git, you can refer back to this video to see where you get the Acquia-specific Git information you need.
This is Step-1 of the Free Tier on-boarding process for Acquia Cloud.
After setting up Git, you may proceed in two directions: You can either Install Drupal Distro or if you already have an existing site, you can go ahead and import your site.
You can install one of several Drupal distributions from within the Cloud Network dashboard. Installing Drupal in this manner will remove a previously installed distribution. Assuming you want to create a new installation of Drupal, complete the following steps:
- On your Acquia Cloud dashboard, navigate to "Workflow".
- On the Dev server tab, mouse over the gear icon, and select "Install Drupal".
- From the list of supported distributions, select the one most appropriate for your needs. This tutorial uses Acquia Drupal 7.
- Enable the checkbox which reminds you your installation will overwrite everything in your Dev environment.
Once your site has been created, you may visit it by clicking on the link "visit" in the Dev environment tab. From here you will be able to complete the installation and log into your new site.
This is Step-2 of the Free Tier on-boarding process for Acquia Cloud.
If you already have a Drupal Web site, you can import it to Acquia Cloud using the following steps:
- Create a drush archive of your existing site, using the command: $ drush archive-dump
- Copy the archive to your local computer so that it can be uploaded via a Web interface.
- In the Acquia Cloud dashboard, navigate to the "Workflow" tab.
- Hover over the gear icon and click on "Import an existing site" from the list of options. A pop-up window will open.
- Click the link "Upload a Drush site archive".
- Click "Choose file" and select the archive you made previously from your local computer.
- Enable the checkbox to say you understand this will replace anything currently installed on your dev environment.
- Click "Import".
Note: This will only work for archives that are smaller than 500MB. If your site is larger than this, you will need to refer to Acquia Cloud's documentation.
This is Step-3 of the Free Tier on-boarding process for Acquia Cloud.
To be able to use Search and Insight, you will need to connect your site to the Acquia Network. The video will walk you through this process and help you get connected to the network easily.
- Install the Drupal Connector module if you did not use one of the Acquia distributions to install your site.
- From within your site, click on the link asking you to connect your site to the Acquia Network. It should appear as a nag screen on every page.
- Enter the email address and password you use to login to the Acquia Network.
- Click Next.
Your site should now be connected to the Acquia Network.
This is Step-4 of the Free Tier on-boarding process for Acquia Cloud.
This lesson describes how to drag-and-drop to deploy code and content using the Acquia Cloud UI.
- Navigate to the Acquia Cloud dashboard, and select the "Workflow" link.
- From the Dev column, click and drag the box labelled "Code", and place it onto the Stage column. A pop-up window will appear.
- Enter a commit message.
Repeat steps 2 and 3 for the "Files" and "DB" boxes in the Dev column.
You may drag-and-drop these boxes (Code, Files, DB) in either direction: from Dev to Stage; or from Stage to Dev. If you would like to deploy your code to a live server, you will need to upgrade from the Acquia Free account. You can do this by clicking the link "Upgrade now" from the "Prod" column.
This is Step-5 of the Free Tier on-boarding process for Acquia Cloud.
This overview will introduce you to Acquia's open cloud platform and this series of lessons that will show you how to best use it. If you do not already have a free Acquia Network account, you may obtain one from Acquia.
Learning Sass and Compass
CourseIn this series, we're going to be covering CSS preprocessors. Mainly we're going to be covering Sass, along with a related library, called Compass. While not used only on Drupal sites, it's a good thing to have in your arsenal of skills, especially if you do front-end design work.
To wrap everything up, we're going to show you how to extend beyond what we've covered in just the Sass and Compass basics, with other libraries that you can use with Sass.
Sass is in a class of tools called CSS preprocessors. CSS preprocessors have been around for a while now, but they've really started to gain in popularity in the last several years. In this lesson we'll find out what a CSS preprocessor is, what the benefits of using one are, and which ones are popular today.
Additional resources
When working with your CSS you will often have instances where something should include all of the styling associated with a class, in addition to a few extras that are specific to just that item. In regular CSS you would normally put the general class on the item, and add a more specific class with the additional styling. With the Sass @extend directive, you can have the more specific class inherit the styling of another class, so that you can just use the specific class in your HTML, keeping you HTML markup nice and concise.
Functions are another form super-variable, as it were, where you do a bunch of work that is assigned to something you can print out. But in this case you aren't injecting a bunch of CSS, instead you are just printing out a nice, final value. For many things you will want to do with functions, someone else has probably already written it. Sass comes with a lot of predefined functions for you to use, and there are libraries, like Compass, which provide many more. We'll take a look at some of the functions that Sass provides for us and see a function in action, along with our mixin, side by side, to really see the difference between them.
Additional resources
A mixin is a term used for a feature of preprocesors which acts a lot like a super-variable. You can write up larger chunks of CSS and assign them to a mixin name, then when you "include" that mixin, it will inject all of that CSS into the location. This is great for setting up common ways of displaying things, or handling common problems, and then just reusing that same method throughout. You can also add arguments to your mixin so that you can tweak the output according to your use case. This takes the reusable concept of variables up a notch.
One of the big advantages to using Sass is being able to reuse code. The simplest form of this is using variables. Variables in Sass work just like they do in other scripting languages. You simply assign a value to a variable name and then you can use that variable name anywhere you like. This is super helpful for doing things like defining the hex value for the color "blue" and then you can use the name "blue" wherever you want to use that hex value. This makes it easy to update that value in one place instead of having to find every instance of it and update all of them.
Additional resources
Sass' nesting feature makes it easy to organize your CSS in a way that makes it clear which selectors are related and generally provides a cleaner, clearer stylesheet. In this lesson we'll look at nesting, how to use it, and talk about making sure you don't nest unnecessarily.
Sass has a neat way of managing comments, where you can choose to either compile the comments, or not, from your scss. We're going to take a quick look at the two comment styles, and see how they appear (or don't) in our finished, compiled CSS.
We've looked at how easy it is to set Sass and Compass up from the command line, but for folks who prefer a nice GUI application, there are a few options available. Scout is a free Sass/Compass application that works cross-platform. In this lesson, we'll get Scout set up and see how it works to watch our projects.
Notes on Installing Scout:
- On OSX, If you double-click the .dmg and you get an error message saying you can't open this because it's from an unrecognized developer, control-click on the .dmg and select "Open" from the menu, then select "Open" from the dialogue box to open the .dmg installer.
- After installing Scout, OSX may again prevent you from opening it (depending on your security preferences) when it auto-opens it after installation. Navigate to where you installed it (i.e. "Applications"), control-click on the Scout icon, select open from the menu, and select "Open" from the dialogue box once again.
- If you get an error about Java, "No Java runtime present, requesting install," see the Scout GitHub issue queue for a solution.
Additional resources
Now that we have Ruby and Sass ready to go and working, let's also get our handy dandy mixin library, Compass, installed as well. We'll be using the command line in this lesson, but it's super simple to get this installed, and then we'll create a project to make sure everything is firing correctly. We'll look at a GUI tool to do this in another lesson.
Additional resources
In order to get started with Sass, we're going to need to install it. There is really only one major prerequisite for using Sass, and that's that you will need to have Ruby installed. Ruby is a very popular language, which Sass is written in. Ruby is easy to install, and once you have it installed, you won't need to really work with Ruby directly. Some systems come with Ruby already installed, like OS X, but if you don't have Ruby installed it only takes a few minutes. In this lesson we will be installing Sass and Ruby on Windows, because Windows does not have Ruby installed for us already. Once we have Ruby installed, we'll use the command line to quickly install Sass, which is the same on all systems. Then we'll do a quick test to make sure it is working properly. There are apps that you can use to do all of this for you using a GUI, but we want to start with the fundamental pieces, and we'll cover the GUI applications in another lesson.
Additional resources
In this lesson we're going to review a lot of the special terms that are used in Sass. Different categories of features you can use with Sass have their own names, and are used in specific ways in the Sass world. We're also going to take a look at scss versus sass, and get a feel for how Sass code looks before and after compilation.
Whenever people speak about Sass, they normally also mention Compass in the same breath. It isn't always clear what the difference between these tools are. Compass is a library that adds lots of new features to your standard Sass setup. In this lesson, we'll discuss why you want to use Compass, then take a look at the Compass documentation and the main features that it provides for you.