November 2015


Hey folks!

I won't bore you with a extensive exposition this week, but just wanted to give you a heads up that this week we're doing something we've never done before: Releasing new videos in 2 collections at once! Super fun. Also, I wanted to make sure to get a solid batch out for the holidays just in case some of you have some extra time on your hands for learning, so this is a pretty big weekly release.

Enjoy!




Comparing Drupal 7 and Drupal 8's installation process New!
(This one's FREE!)

Screenshot for Comparing Drupal 7 and Drupal 8's installation process

There have been several improvements to Drupal's installation process in 8, including selecting a language as the first step, a responsive design for even mobile installations, more straightforward branding and more. Here we compare Drupal 7 and Drupal 8's installation processes side-by-side, step-by-step.

Making minor adjustments to the interface to more accurately compare Drupal 7 and 8 New!
(This one's FREE!)

Screenshot for Making minor adjustments to the interface to more accurately compare Drupal 7 and 8

Here we make a couple of administrative interface adjustments so we can see that on the surface, Drupal 7 and Drupal 8 look an awful lot alike.

Demonstrating Drupal 8's responsive home page New!
(This one's FREE!)

Screenshot for Demonstrating Drupal 8's responsive home page

In this video we walk through the various breakpoints in Drupal 8's responsive design and see what changes in the interface as the browser window gets smaller.

Comparing Drupal 8's responsive administrative toolbar with Drupal 7 New!
(This one's FREE!)

Screenshot for Comparing Drupal 8's responsive administrative toolbar with Drupal 7

Here we look at the much-improved administrative toolbar in Drupal 8, including how it functions at different browser sizes, how it's behavior has been improved from Drupal 7 and how to get it out of the way on smaller browser window sizes.

Reviewing Drupal 8's changes to Bartik's default color scheme and logo New!
(This one's FREE!)

Screenshot for Reviewing Drupal 8's changes to Bartik's default color scheme and logo

The only real visual change to the default Bartik theme in Drupal 8 is the header gradient color and logo color. Here we explain why these were adjusted.

A review of the Drupal 8 home page blocks and views New!
(This one's FREE!)

Screenshot for A review of the Drupal 8 home page blocks and views

In Drupal 8, nearly everything you see is a block, including the header branding and the primary and secondary menus! This means that we can do a lot more to adjust the layout of a site without needing to create a custom theme and learning how to work with template. So cool.

Reviewing IE support changes and CSS and JavaScript aggregation settings in Drupal 8 New!
(This one's FREE!)

Screenshot for Reviewing IE support changes and CSS and JavaScript aggregation settings in Drupal 8

In Drupal 8, support for Internet Explorer (IE) 6 and 7 have been discontinued, and there is only limited support for IE 8. Also, JS and CSS aggregation is now on by default.

Comparing theme settings in Drupal 7 and Drupal 8 New!
(This one's FREE!)

Screenshot for Comparing theme settings in Drupal 7 and Drupal 8

In this video we compare the global theme and Bartik theme settings between Drupal 7 and 8. There's only a few differences, but they can throw you for a loop if you're not familiar with them.

Comparing Drupal 7 and Drupal 8's included themes New!
(This one's FREE!)

Screenshot for Comparing Drupal 7 and Drupal 8's included themes

Drupal 8's base theme structure is quite a bit different than Drupal 7's. Drupal 8 provides two base themes - Classy and Stable - both of which are intended to be extended by additional themes. Bartik is now a sub-theme of Classy, and Stable is basically a copy of Drupal core's base templates and CSS that won't change in future updates to Drupal 8. If that's confusing at all, we walk you through what this means and why the new structure is so useful for front end developers.

Reviewing changes to the "Seven" theme in Drupal 8 and why the overlay was removed New!
(This one's FREE!)

Screenshot for Reviewing changes to the \

The "Seven" theme is Drupal's administration theme, and there have been some major improvements to it in Drupal 8. In this video we explore the updates as well as why the overlay mechanic is no longer employed in 8.

How SASS "placeholders" can be useful for sharing CSS between elements New!

Screenshot for How SASS \

In this video we demonstrate how to use a SASS "placeholder" to pull CSS into multiple elements in an efficient way that doesn't leave any unused styles behind. You'll find placeholders incredibly useful as you progress as a front end developer.

Adding another text input for an email address New!

Screenshot for Adding another text input for an email address

Here we add another text element to match our HTML form to our mockup.

Making the margin between our form elements consistent New!

Screenshot for Making the margin between our form elements consistent

As we've added inputs to our form, we've gotten the styles of the individual elements to look pretty good, but the spacing between them has been atrocious. In this video we wrangle our elements to give them a consistent spacing and heave a heavy sigh of relief.

Options for sharing common styles between our selectize input and our other inputs New!

Screenshot for Options for sharing common styles between our selectize input and our other inputs

We've already use a SASS placeholder to share styles between the different elements in our form, but the selectize.js component throws us for a bit of a loop. The same styles that apply to each of the other inputs would get split between two different elements in the selectize.js version. In this video we discuss ways that we can approach the process of still sharing our styles between all the inputs.

Creating a naming convention for placeholder SASS rules New!

Screenshot for Creating a naming convention for placeholder SASS rules

In the previous video we added another placeholder class, and whenever you have two of something, it's time to start thinking about standards. Here we consider whether naming our placeholder classes should be any different than other classes, and come up with a convention we can use from here on out.

How a radio button input is structured and why not to use the "id" attribute for styling New!

Screenshot for How a radio button input is structured and why not to use the \

In this video we review the complete structure of a radio button and how to connect multiple radios to each other. We also take a few seconds o explain why the "id" attribute is problematic for targeting with CSS.

How to set up HTML scaffolding for a radio button group New!

Screenshot for How to set up HTML scaffolding for a radio button group

Now that we know how a radio button group is structured, we're all set up to build one! Here we do that, building some scaffolding for the radio buttons in our contact form.

A quick overview of how we will approach styling our radio buttons New!

Screenshot for A quick overview of how we will approach styling our radio buttons

Our radio buttons are functional, but there's still a long way to go before they look anything like our mockup. In this video we explain the basic strategy we'll be using to style them before we dive in.

How to customize a radio group, part 1 - adding a font icon to replace the radio New!

Screenshot for How to customize a radio group, part 1 - adding a font icon to replace the radio

Here we begin the process of stylizing our radio buttons by adding a font icon to the radio label. This icon will be the one that becomes visible whenever the radio button is clicked. How will we ensure that the icon is only displayed when the radio button is checked? Watch on for the solution!

How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label New!

Screenshot for How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label

So far we've used some pretty basic selectors, but to be able to select a label element that is next to a checked radio input, we need to pull out all the stops. In this video we demonstrate how to use three different kinds of selectors - the attribute selector, the "checked" modifier, and the adjacent sibling selector - in order to get what we need. It may sound complicated, but it's also pretty fun to see the power of the right selector.

Upgrading to Drupal 8 Video Series Cover

I'm super excited to release the first videos in a new series aimed at making the transition to Drupal 8 a rapid, enjoyable experience. In this series, we will cover:

  • A walkthrough through nearly every interface change between Drupal 7 and Drupal 8, super useful for site builders and administrators
  • How to migrate data
  • How to upgrade a theme
  • How to update custom modules

In these first videos, I'll introduce you to the series and then give a whirlwind tour of the major improvements that come with Drupal 8.

Start watching "Upgrading to Drupal 8"



A special offer for Drupal 8 Release Parties and Meetups

If your community is organizing a Drupal 8 Release Party or you plan on discussing Drupal 8 at your next meetup, I'd like to offer some FREE month-long memberships to raffle away to attendees. Just respond to this email with the 1) location of the meetup and 2) how many people you plan on attending.

At the party, consider playing the Whirlwind tour of Drupal 8's user experience improvements video. It's only 6 minutes long, it's fun and it covers many of the major user-facing improvements to Drupal 8.

Enjoy the upcoming Drupal 8 release. It's been a long time coming, and it's genuinely awesome.

 


Greetings, Friends!

This week we're releasing 20 videos, many of which tackle the troublesome task of styling select inputs. In some browsers, select input can look almost tolerable, but across browsers there are a ton of inconsistancies and they're just not easy to fix with simple CSS.

In these videos we start with vanilla CSS to tackle the problem, and then eventually dive into some JavaScript-based options that give us a more consistent interface and more options. Along the way we cover other interesting topics, like using pure CSS to create a an arrow, why to not use aggregated and minified JavaScript when developing yout template and more.

Enjoy!

How to add a name attribute to form inputs to identify form data New!

Screenshot for How to add a name attribute to form inputs to identify form data

In our previous videos we added a couple of inputs to our form, but neglected the one property required for our inputs to pass on a value when the form is submitted. Here we fix that.

How to style a textarea input with CSS New!

Screenshot for How to style a textarea input with CSS

The default textarea HTML element leaves a lot to be desired aesthetically. In this video we begin the process of bringing our actual textarea in line with the imagined textarea from our mockup.

How to use the "placeholder" attribute to add instructions inside a form element New!
(This one's FREE!)

Screenshot for How to use the \

Our textarea is looking pretty good, but we need a way to add default instructional text inside the element that goes away as soon as the user starts to enter their own data. Here we accomplish that goal using the "placeholder" CSS property.

How to create the HTML structure for a select input New!

Screenshot for How to create the HTML structure for a select input

Having knocked out our textarea input, it's time to move on. In this video we look at how a select input is structured and build out some basic select box scaffolding in our template.

How to style a select input and address padding issues with height and the "text-indent" property New!

Screenshot for How to style a select input and address padding issues with height and the \

Now that our HTML structure is in place, it's time to embark on the finicky task of getting our select input looking the way we want it to. Here we run into a problem with our select box not respecting padding, and come up with some workarounds.

How we'll approach changing the text color and icon in our select box New!

Screenshot for How we'll approach changing the text color and icon in our select box

While we're not going to change the icon in our select box just yet, we do address the difference between the default icon and the one in our mockup, as well as work through some experiments in changing the text color to match as well.

Overview of 4 options for styling select inputs consistently across all browsers New!

Screenshot for Overview of 4 options for styling select inputs consistently across all browsers

In our previous videos we did what we could to style our select input with straight-up CSS. But we'll find as we take a tour of browsers across Windows and Mac that our CSS does not render the same way in each one. So, we discuss some other options including forgetting about styling select boxes altogether, using alternative inputs like radio buttons, or using a third party library to get the job done.

Overview of 3rd party libraries for replacing select box inputs with more easily style elements New!

Screenshot for Overview of 3rd party libraries for replacing select box inputs with more easily style elements

To style our select box we've decided that it makes sense to use a third party library. In this video we mention a few options and where you can find out more information about each one.

How to download selectize.js with Bower and set up an example New!

Screenshot for How to download selectize.js with Bower and set up an example

After deciding on using the "selectize.js" library, we use the Bower package manager to get it downloaded and grab an example from the selectize.js documentation to get us started.

Why we're not using aggregated and minified versions of JavaScript and CSS New!
(This one's FREE!)

Screenshot for Why we're not using aggregated and minified versions of JavaScript and CSS

The selectize.js library comes with a few different versions of the library, including a version that bundles most of the dependencies into one file, and another that minifies it down into a much smaller package. Even though each of these has their advantages, we're going to opt for using separate, un-minified files, and in this video we explain why.

How to find and include dependencies for a 3rd party JavaScript library New!

Screenshot for How to find and include dependencies for a 3rd party JavaScript library

When we download a JavaScript library with Bower, it will typically also download any dependancies at the same time. This is great, but sometimes it still takes a little detective work to figure out just what files we're supposed to include. Here we dive into the dependencies and grab what we need to get our example working.

How to check for JavaScript errors in Chrome New!
(This one's FREE!)

Screenshot for How to check for JavaScript errors in Chrome

The first time we run our selectize.js example, it doesn't work. When we're dealing with JavaScript the browser console can usually give us some good ideas about what's going wrong. In this video we demonstrate how Chrome alerts us to errors and how we can find out more about them.

How to style a selectize.js input New!

Screenshot for How to style a selectize.js input

After we verify that our selectize.js input looks pretty consistent across a number of different browsers, we dive into the process of getting it to look like the input we have in our mockup.

Reviewing our selectize.js input in various browsers and operating systems New!

Screenshot for Reviewing our selectize.js input in various browsers and operating systems

As we take a tour of various browsers to see how our selectize.js input is holding up, we find that we're good to go except for a little snag in Internet Explorer 9.

What a JavaScript polyfill is and why we might want to use one New!
(This one's FREE!)

Screenshot for What a JavaScript polyfill is and why we might want to use one

In order to tackle our next issue, we'll need to use JavaScript to simulate what more modern browsers are doing with vanilla CSS. Soon we'll be using a JavaScript polyfill to solve a CSS support issue, so we take a minute to explain what a polyfill actually is.

Finding and installing a polyfill to add placeholders for Internet Explorer 9 New!

Screenshot for Finding and installing a polyfill to add placeholders for Internet Explorer 9

Whenever we find the support of browsers lacking for CSS or HTML, we can often do a Google search for a description of our issue plus the word "polyfill" to turn up some answers. In this video we find a solution to our placeholder issue in IE9.

How to create an arrow with pure CSS using transparent borders New!

Screenshot for How to create an arrow with pure CSS using transparent borders

As we evaluate how extensively we want to modify the default CSS of selectize.js, we dig a little deeper to see how it manages to create a nice looking triangle from pure CSS. You may find this technique handy in the future.

Refining the style of the text in our select input New!

Screenshot for Refining the style of the text in our select input

Our select input is looking good, but there's a couple tweaks we need to get it even closer to the mockup. In this video we get that squared away.

How to style a text input with CSS New!

Screenshot for How to style a text input with CSS

After tackling textareas, select inputs and submit buttons, styling a text input is going to be a breeze. Here we get our text input CSS squared away.

Considering our options for sharing styles between different form inputs New!

Screenshot for Considering our options for sharing styles between different form inputs

Now that we have a variety of inputs in our forms, it's clear that there are some common styles between them all, some sharing more than others. In this video we muse on the relationships between the different styles and what our options are.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.