20 More New Drupal 8 and Front End Development Videos
What the "Core (Experimental)" section is for and how Inline Form Errors works New!
(This one's FREE!)
In Drupal 8 there is a new group of experimental modules that are being worked into Drupal core but still have known bugs or an unstable API. Here we talk about these modules and what one of the experimental modules is for.
The fact that the Migrate module ships with Drupal 8 is a huge win for those who might be looking to upgrade their Drupal 6 and Drupal 7 sites. In this video we explain what both the Migrate and Migrate Drupal modules are for and hopefully get you excited enough to give them a shot. Later on in this series we'll be demonstrating how these work in detail.
Formerly contributed modules, the Datetime, Link and Telephone modules supply HTML5 native fields that also get some robust server-side validation right in Drupal 8 core.
Here we explain briefly what the "Web Services" group of modules is for and why you might still end up using the contributed Services module if you need to build a robust API for your project.
For the most part, the "Site information" and "Cron" configuration pages are the same, but in this video we work through the minor changes.
Earlier in this series we created a "slide" component to house some CSS that didn't belong anywhere else. Now that we've created the "slideshow" component, it's looking like the slide CSS actually belongs in there. In this video we merge two components - something that you will likely find yourself doing again.
Here we summarize the styles that we'll need to get a nice circular image.
In this video we start the process of coding the circular author images that we'll use in our "snippet" component. We also explain the accessibility implications of using a background image for an author image and how we'll address problems with it later in this series.
Here we build on the previous video and add some rounded corners, a border and a nice drop shadow to our author image.
For completeness sake, we add our second snippet image and move the whole HTML chunk to the component where it will live out it's HTML-y life. Is this starting to feel like a real web site yet?
Our mockup doesn't move, but we can tell a lot about the implied functionality in our slideshows just by doing a bit of detective work. In this video we review the mockup and figure out what our requirements are going to be for our slideshows and what makes each slider unique.
How to install Flexslider and add a working example New!
(This one's FREE!)
In this video we use Bower to download Flexslider and then get a simple example working in our template. Along the way, we run into an issue with Bower's search functionality not working, and find a workaround using the name of the Github project and the command line.
The example that we copied over worked great, and here we re-connect the slider with our own content.
After we attach Flexslider to our slideshow, we are able to see it working, but the navigation for the slideshow is in a totally unrelated place on the page. Here we start a drill-down to figure out what's going on.
How the relative, absolute, static and fixed CSS "position" values work for element layout New!
(This one's FREE!)
As we alluded to in the previous video, the problem with our Flexslider navigation not being positioned properly had to do with the default value of the CSS "position" attribute on our elements. In this video we explore what is often a confounding but absolutely critical CSS property for layout, and how the different values work in relation to one another.
In this video we take a stab at getting the content in our slideshow to visually match the mockup. The first order of business is adding some padding to the left, and for very good reasons we try adding the padding to the slides instead of the slideshow container. By doing this, we witness first hand the difficulty in modifying the CSS of third-party libraries, and move on to another possible solution.
Here we manage to find a solution to our left padding issue by adding the styles to the slideshow container instead of the individual elements. By doing this we lose some flexibility, but it works and that's all we need right now.
Having set the left padding, the next style to add to our slideshow is the width of the content. Here we do just that.
We've had to vertically align numerous elements so far in this series, and in this video we discuss the how the possibilities we're familiar with might help us with the current task of vertically aligning our slides.