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.
Additional resources
How to Give a Hug
FreeIn this video Joe Shindelar goes over some important information about giving hugs. He walks through the various facets of hugs, giving some demonstrations throughout on:
- Defining a hug
- Types of hugs
- Cautions
- Technique
As Joe admonishes in the video, don't forget to practice your hugging after watching the video. Practice makes perfect!
What Is jQuery?
FreejQuery makes using Javascript easy. A description of the basic jQuery library, and a brief history of why jQuery exists and how it can be used to simplify development of Javascript for your site.
In this lesson we take a look at an extremely useful tool for communicating with the Drupal community (and many other Open Source communities as well). We will find out what IRC is, why you would want to use it, how to get connected, and some basic guidelines and tips for talking with people on IRC. We'll also explain what the IRC bot, Druplicon, is and how you can use it.
Additional resources
In this first step of the Learn Drupal Ladder we will install Drupal on our computer. This follows the instructions to Install Drupal locally on learndrupal.org. We start by getting and installing the Dev Desktop, which is an all-in-one web server which comes with Drupal 7. We then install our own Drupal 8 site in Dev Desktop.
If you do not wish to use Dev Desktop as your local web server, we have videos for three other web servers, based on operating system:
- Installing WampServer (for Windows)
- Installing MAMP web server (for Mac)
- Installing a web server on Ubuntu
Additional resources
More information on Development Environments
Use the jQuery plugin system to extend the set of methods available in jQuery beyond those provided by the core jQuery library. See where to find jQuery plugins, and examine a number of the available plugins and when to use them and what to use them for. See how to make use of plugins in your custom jQuery code. Finally, learn how to write your own plugins to extend the basic jQuery functionality.
A brief summary of the material covered in the Introduction to jQuery video series
If you're reading this message, you use Open Source software. The last fifteen years has seen the meteoric rise of tools like Linux, Apache, Firefox, WordPress, Drupal and more; simplyusing Open Source is old hat. When it comes to building your company's web strategy around open source tools, though, the decisions can be fuzzier. The best-known arguments for Open Source are often ideological rather than pragmatic, and fail to account for the different needs of different projects and businesses.
In this Do it with Drupal session, Jeff Eaton will explain the no-nonsense pros and cons of Open Source, covering the big wins as well as the tradeoffs and common pain points. Whether your business is testing the Open Source water, betting the farm on community-maintained software, or open-sourcing its own creations, you'll learn how to avoid common pitfalls and set yourself up for success.
In this lesson we show how everyone can help with the Drupal.org documentation. We take a quick look at some of the links and information that is available to everyone with a Drupal.org account, and then we dive in to make our first edit to an existing page. We run into Drupal.org's spam protection, so we also walk through getting ourselves on the no spam list for the site. After we complete our edit, we then see how to add our own new handbook page, by creating documentation for a contributed module, which doesn't have a page yet. We finish up by creating an issue in the module's issue queue, to get a link to our new page added to the module's project page. You'll see us use the Drupal.org issue queue in this video. For more detailed information about that, see our Getting Started in the Issue Queue video.
In this lesson, we take a tour of the *.drupal.org websites, as there is a lot more than just the main Drupal.org site. After our tour, we'll walk through getting an account, and see how that gives us access to all of the Drupal.org web properties. We'll play with our Dashboard, and join a group on groups.drupal.org, to become more active in the community — the best way to learn and get help. You'll see us use the Drupal.org issue queue in this video. For more detailed information about that, see our Getting Started in the Issue Queue video.
Search on Drupal.org
FreeIn this lesson we take a look at the basics of searching on Drupal.org using the main search form. We talk about the various facets we can use to filter search results, how module and theme search results are a little different, and how to find a user. Drupal.org search can help you narrow in on what you are looking for if you know what the various search are used for. You'll see us take a glimpse at the Drupal.org issue queue in this video. For more detailed information about using the queues, see our Getting Started in the Issue Queue video.
Overview the Firebug extension for Firefox and how it can be used to aid in the development of Javascript. Real time development and debugging of Javascript.
Learn about using jQuery to apply animation and effects to DOM elements. Show and hide things on the page using the fade, slide, and hide/show methods. Chain multiple effects together to create animations. And use the jQuery .animate() function to preform more complex animations.
Learn how to respond to the actions that a user performs on a page using jQuery events. Attach event handlers to DOM elements and respond to mouse events like click and hover, and keyboard events such as someone pressing or releasing a key. Finally learn about responding to special events that only occur on form elements. This chapter gives a description of each of the available jQuery events and how or when they are triggered. Check out http://quirksmode.org/js/keys.html for more information on compatibility for assigning keyboard events across multiple browsers.
Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.
Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content
Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.
(function($){ $(document).ready(function(){ $('#sidebar .block .content').hide(); $('#sidebar .block h3').css('cursor', 'pointer').click(function(){ $(this).parent().children('.content').slideToggle(); }); }); })(jQuery);
Use jQuery to manipulate DOM elements including adding and removing classes to an HTML element, changing the content of an element, wrap a set of elements with a new element, adding new elements to the page using prepend and append methods and the related prependTo and appendTo methods. Use jQuery to manipulate properties height, width, and position of any DOM element. Finally learn how to use jQuery to completely remove selected DOM elements from the page.
Traverse the DOM tree using jQuery to find the children, parents, and other nearby elements of any selected element on the page. Learn how to select an element up the page and reliably locate it's siblings by traversing up the DOM to a parent element and then back down using find. Use additional jQuery methods to filter a list of DOM elements down using find to apply an additional selector to the list, not to filter out elements that do not match a set of criteria and more.