Accueil / Drupal Step-by-Step: How We Built Our Training Site, Part 2 [April 9, 2014]

Drupal Step-by-Step: How We Built Our Training Site, Part 2 [April 9, 2014]

Drupal Step-by-Step: How We Built Our Training Site, Part 2 [April 9, 2014]

Want to learn more about Acquia’s products, services, and happenings in the Drupal Community? Visit our site: http://bit.ly/yLaHO5.

This is the second part of a two part tutorial on building a site in Drupal 7. You’ll see a real-life example of Drupal in action. In this webinar, we’ll start to make the site look right with a new theme. The base theme used in this site, Twitter Bootstrap also provides a handy library of components to draw on by using CSS classes.

You will learn about:
• Modules for better styling and CSS
• Using Twitter bootstrap
• Views and Twitter Bootstrap
• The grid system and responsive layouts
• Components available

Category: 
Publish on date: 
mercredi, le 9 avril 2014h
Rating: 
Click to see video transcript


Hannah: Today’s webinar is Drupal Step-by-Step, How We Build Our Training Site Part 2 – last week we had Part 1 and this is the second of the series – with speaker Dave Myburgh, who’s a Senior Engineer here at Acquia, and we also have Heather James on the line who’s the Manager of Learning Services here at Acquia.

David Myburgh: So today is Part 2. Last week we just spoke about how we built our training sites, some of the backend stuff that we did. Today, I’m going to talk about the frontend, theming and how we used Bootstrap to make it look all pretty. I’m a Senior Engineer in Acquia. I’ve been there for two-and-a-half years or so. I’m the lead developer on Acquia.com and a couple of other small sites, including the training site, obviously.

So what are we going to look at today? We’re going to see what is this thing called “Twitter Bootstrap” or just “Bootstrap”? We’re going to look at some of the modules that we used for helping us to style things on the frontend a little bit better, make things look nice; and look a bit more in-depth at how Bootstrap and Views can work together. We’ll look at the grid system that Bootstrap uses and we’ll look also at working with responsive layouts. Finally, we’ll look at some of the components that Bootstrap offers us.

So themers and site builders will benefit the most from this, I guess. If you have some experience in Drupal, well, it’s useful. If you're new to Drupal, you're definitely still going to pick up some new and fun things.

So this is what we started with. This is our old training site in Drupal 6, kind of old-looking. It’s not very modern look and difficult to work with and tweak stuff and modify things. So we ended up with this, much easier to work with for managers, keeps Heather happy, keeps me happy because it’s less coaching stuff that I have to do as well.

So to get the new design, what do we need? We want to just obviously update the old one, make it look more modern. Get a more consistent look across the site. Obviously, make sure it’s cross-browser. And most importantly, any new stuff that the training folks decided what to put on the site to make it easier for them to add new things, but still keep a consistent look and not have me do constant code pushes all the time to update stuff within. From my point of view, I would like to use SASS and Compass for the backend development work. It just makes working with the CSS and the styling side of things a lot easier and simpler for me. It’s something that I’ve been using and improved relatively, short period of time in the last year or two, but definitely it’s very useful stuff and very helpful.

So just a quick look at some of the benefits you can get from using the new system. This is one of our old pages and old aesthetic lining page. We’ve got a bunch of blocks on the right-hand side and those are physical Drupal blocks. So if you want to add a new block there, you’ve got to go add it on the “Add one block” page, edit it, position it correctly, all that kind of stuff.

On the new site, we basically converted that page into a single page with no actual blocks. Everything you see in front of you is all part and parcel of the node itself and it’s simply styled using classes that are provided to us pretty much by CSS. Obviously, you would need the full HTML text format. So it is one thing to consider when you're allowing other people, you may not be privileged to use this to add content to your site.

So what is this thing called “Twitter Bootstrap”? When I first read about it, I was like, “Okay.” People were talking about it all the time. It was kind of an abstract thing to me, but once I’ve been using it, I figured out it basically is a theme. That’s what you’ve – you’ve got to think of it as – you can look at getbootstrap.com for this is where all the information is stored, and it can be used on anything. This Bootstrap itself is not Drupal-specific. It can be used in any project. If you're writing straight HTML, you can just use it straight off. No problem. It was made by Twitter, hence the name “Twitter Bootstrap.” They use it internally, and I mentioned they released it as open source for the rest of the world to enjoy.

Some of its features, well, Bootstrap 3 now is mobile-first and also responsive. It’s cross-browser compatible and works well with IE8 and up. Nobody should be working with IE6 and IE7 anymore, we heard. Bootstrap 3 has a SASS and a LESS version. If you're using preprocessors, you don’t have to use those. You can just use a precompiled code for CSS as well. It comes with lots of very useful CSS and JS – JavaScript - components. It also has excellent documentation and a very big community. A lot of people have been using this framework as a theme. So there’s a lot of information out there on other sites that you can find useful tips and information. Just as a quick overview or a quick look at one little thing that they give you, a simple unordered list, if you just add two classes to the UL name and you have polls you automatically get inline navigation with the most run, a bucket on the active class as this is simply adding a class to existing HTML. So it really makes life for the themer a lot easier.

So how do we get Bootstrap into Drupal? So this wonderful chap Artoym who is here today, created a module or a theme – a base theme for us and we just enabled it on your sites and you are then able to use Bootstrap 3 in one of your sites. You do need to make a sub-theme, and we’ll talk about that in a little bit. There’s also a bunch of companion modules - or modules rather that work with Bootstrap in Drupal that can enhance its functionality, make it easier to use some of the Bootstrap components on your site as well.

So Drupal theme - it requires 1.7. Drupal core is Drupal 7 core. At the moment, I believe, is 1.4. So you do need to install the jQuery update module, or if you want to do it manually, which I don’t recommend, you can install jQuery 1.7 yourself. The problem recently was that Views UI used to break with 1.7. That has been fixed with more recent C tools updates. So that’s working fine now. But if you switched your jQuery to 1.8 or higher, Views UI will again break. So we usually use 1.7 as your jQuery option. JQuery update module allows you to choose different jQuery Views. I believe in version 2.5, which is not out yet, which is the next version, they will have a fix with this in that you can choose what jQuery version to use on your admin site. So your frontend could be 1.8, 1.9. 1.10, but then you just leave the default Drupal jQuery 01.5, whichever version you want as your admin, and that’s the way of Views you want to get. So hopefully, that’ll come out with 2.5. So your CSS preprocessor, the sub-theme of the Bootstrap Drupal theme currently uses LESS by default. I’m not familiar with LESS myself. I learned SASS, so I modified the sub-theme so that it uses SASS.

So what is SASS? LESS is also to kind of explain by this. They’re preprocessors, so you can write fancy CSS and have them compiled into regular CSS. SASS stands for Syntactically Awesome Style Sheets. You don’t want to say that too often too fast. It’s basically CSS with super powers is the way they like to think of themselves. It gives you extra functionality when you're writing CSS and your file is not called “.CSS” anymore; it’s called “.SCSS” or “SASS ECSS.” So one of the bigger things that I find for myself is variables. So like you're writing PHP, you can have a variable and you can assign it something, then you can reuse it later in your code. So the way it works with SASS is - the most obvious example that I can think of is, say, you have your theme based in color, so for us on Acquia, we have this nice blue color, and we can create a variable and we can say “Acquia dollar Acquia blue equals” and our hex code for that color. Then throughout out our SASS file, we’ll use dollar Acquia blue instead of the actual hex code. So then six months down the line, we have all our CSS working nicely. Six months down the line, marketing comes in and say, “Okay, we don’t want this blue anymore. We’re changing our colors to green,” or something. All you have to do is go back to your SASS file, change that one place where you set your variable to the blue hex code. You now set it to the green hex code, recompile your CSS, and everything changes to green, and marketing is happy. And you're happy because you only have to change one line of code. Another useful feature is nested rules. So a nested rule is basically when you have – a good example would be if you're trying to style a linked and an unordered list. You can have the rule on the UL. You can have the rule on the LI, and you can have a style, a rule on the A elements. So a normal CSS when you write it, you want to style your UL, you’d have UL open braces and your style. You’d have another line for ULLI open braces your style, and you’d have a third rule for ULLI A and whatever style you want on that. So it’s three lines; three separate sort of declarations. In SASS, what you can do is you can write just the UL open curly braces your style, and then before you close the braces, you indent, you type in LI, open the curly braces, write the style for that one, and then within that – within those braces, you put the “A,” also indent it. So you get this nice indented look. It makes it a lot easier to read and a lot easier to manage later on. So it’s just those kind of things that understands that, and then when it outputs your CSS in the end, it’ll limit actually automatically output those three individual styles that you’re used to seeing in regular CSS. The other thing that SASS brings to the table is mixins. It took me a while to figure out and understand what mixins were, but basically they’re just functions or scripts, if you want to think of it that way. So for example, if you want to do the rounded backends that you saw on that poll button, that is just a border radius declaration in CSS. But if you're – you may know that each browser has its own prefixer browser prefixed on the border radius. Let’s say, you can have moz-border-radius or webkit-border-radius; so it’s depending on the batch type of things out all the time. You need for – to have one border radius, you need to write four lines of codes. So basically a mixin would be you would have a function, you’d say, at the fourth – or add include border radius and then the number of your border radius and pixels, and then you would just mix them, that would then output the four lines of code that you need for each browser and the final border radius; very useful, very powerful. You can do some crazy stuff with that as one of our frontend guys does some pretty astounding things with this. So SASS needs to be installed locally on your machine where you're developing, let’s say, Ruby gem, just a little module for Ruby, and that gives you access to be able to use SASS and try to understand those kind of things for compilation later on. And it is compiled into a regular CSS file. So from a .SCSS file and with all the kind of codes stuff that you have in there, you’re basically just going to output a regular CSS file. You don’t have to do anything. You just run the compiler and it does it for you.

So let’s have a look at how we set up our sub-theme. So when you come with the base theme, you don’t really want to modify the base theme, because if you need to update it later on, then you're just going to wipe out all the changes you did or you're going to have difficulty implementing your changes back in the theme again. So Bootstrap Drupal theme gives you the option of creating a sub-theme. The default tutorial comes with LESS, which is fine. If you want to use LESS, follow the tutorial. No problem. So the basic concept is you need to download Bootstrap files and in your sub-theme, you create a Bootstrap folder. You add in the JavaScript – you have a folder for JavaScript, a folder for fonts, and a folder for CSS as well. Now, the JavaScript can be – well, let me start from the beginning where there’s the JavaScript thing. Bootstrap offers you six to eight different JavaScript to do functions or components, and you can include one or any of them in your sub-theme, or you can include them all in one already minified, compiled JS file, which is only 29 KB. On our site, we just use the full JS file, because we’re not sure like maybe later on, Heather’s going to decide she wants some new Avanti functionality. If she wanted that and it wasn’t already in there, I’d have to go push some codes to make it happen. So just install the whole thing. It’s only 29 KB. It’s not a huge deal. The fonts are the icon fonts that come with Bootstrap and the CSS file is just one big CSS file for all the Bootstrap CSS – all the styles that you already have available as the components.

So to make it SASS-friendly, we have to import. We use @import bootstrap in our main SCSS file that gives us all the mixins and those kind of things from Bootstrap. If you're going to be using Compass to do the compiling for you, you're going to have those config.rb; it’s a Ruby config file. You need to require Bootstrap SASS in that file as well. If you don’t understand this, don’t worry about it. When you start developing with SASS, you can come back, look at these slides, and you’ll get the hang of it. Each of the Bootstrap JS files, either the full JS file or each one needs to be added to your .info file, so they’d get loaded. The icon fonts are loaded using @font-face in your SCSS files. You can pick one, whichever one you want to use.

So this is kind of the layout that we have for our sub-theme. So we have the Bootstrap folder with the fonts, JS, and CSS folders. We have a separate CSS folder where our compiled CSS ends up into a single file. We have a SASS folder and in the LESS version of this sub-theme SASS, which is your replacement list, we have a folder called “Components,” and in there we create separate SCSS files for whatever kind of setup you want. So for us, we created a separate SCSS file for each sort of content type. So we have one for events, one for courses, one for general stuff, one for the home page, things like that. We will also have a styles.scss file in it and all that file does is import each component, and each component file in the components folder has an underscore in front of it that allows it to be imported only and not used in creating a new separate CSS file for each of those components. All those get compiled into styles SCSS, and then that gets compiled into styles.CSS later on. We have a templates folder for all our template overrides; node TPLs, page TPLs, those kind of things. We have a theme folder for some includes; preprocess include, theme include. We have our regular info file, our Ruby config file, and then also template.php, favicon, logo, screenshot; so those kind of things. So that’s what our sub-theme looks like and it’s more or less the recommended layout. Depending on how you work, you may want to change it a little bit.

So some of the modules we used, just to make things look better on the frontend, not everybody’s Bootstrap-related here. This is just general modules for doing stuff. Field Group - great little module, can be used to group fields on your node form as well as on the node display. Most useful thing in field group for node display is it provides you some elements that are HTML5 elements. So you could add like an aside or section element. Another module, Field Formatter Class, very useful, especially if you want to add specific classes to fields for output, and when you're using Bootstrap, it’s kind of useful to be able to do that, because then you can make your fields automatically have whatever styling you need just by adding that single clause without you having to override fields in the template file or something. Block Class does the same thing. It allows you to add a specific class to a block so it’s customizable. Font Awesome was something we used just to throw in a couple of icons here and there. It’s just – naturally, it’s another icon font and you just add a class to whatever thing you want and you get a nice icon on that. DraggableViews is more an admin useful module. It allows Heather to reorder the courses as she needs them reordered, whether it – most likely it’s not going to be alphabetical, so the view that outputs the thing is not going to be – you can’t just sort on random sorts. It will allow her to play around with that. We use Gmap for our main event page map and on each event node, the maps. Finally, we have Views Bootstrap, which is Bootstrap-specific, obviously, and allows – it gives you new view styles, then output your view in a Bootstrap friendly way using Bootstrap structure and classes.

So just a quick look at Field Formatter Class and Block Class. I’ll talk more about Views Bootstrap in a little bit. So Field Formatter Class on your managed display tab for your content type, you're going to see down at the bottom where it says “Class: pull-right, margin-let, margin-bottom.” Those are classes that we have in our theme and you can just assign to the actual field. For Block Class, when you configure the block, you’ll see another input field there, CSS classes, and you can add whatever classes you need in there. The col-md-6 is a grid class from Bootstrap, and Bootstrap is a 12-column grid, so by using the number six, we are saying this block is off the width of the page. I’ll talk more about the grid in a little bit as well.

So let me just show you live what those things are. So this is our display for events, and you can see your class here. So when you click on figure for the field, you simply just get a single input field and you can put your classes in, in a line separated by spaces. Then that works the same way for blocks. So here’s our nice map. So we’re just looking at what Gmap can output. Each of these little markers is a node and we use the location module to geo-locate an address, and then Gmap reads in the latitude and longitude of each little marker on the page for you; and each of our nodes has the same thing; it has a little map. Gmap is really useful. You can change the style depending on – you can output the size and all that kind of stuff.

So just a quick look at some of those things we do with those frontend things. Let’s go back in here. So some other Bootstrap modules that exist out there, we didn’t use them. Bootstrap Field Group, it allows you to do navigation, and navigation’s kind of set up on the frontend. It creates – the way you need it set up is you need to have a bootstrap field group, which has a class of nav or you choose - it’s a field type, a navigation group icon – item, and then you would have a second field group inside that for each navigation item, and within each of those field groups, you can have your fields. So it kind of duplicates what the Quick Tabs module does and then you can just click each tab and you would then see the content for the fields that were underneath each of those tabs; very useful. We didn’t use it on this particular site. I have used it on other sites; it’s quite nice. Display Suite if you like to use display suite for doing your frontend display. There’s a module that provides you Bootstrap compatible layouts using the Bootstrap grid. Also very useful; I have used it on other projects. There’s, of course, Bootstrap layouts, styles, and tabs for panels module. That’s pretty much the major sort of ones that you're going to be looking at. There’s a bunch more and as usual, searching for stuff on drupal.org is always – always it’s something interesting that’s going to come up.

So let’s look a little bit more in detail at Bootstrap and Views, seeing as most people are going to be using Views on your sites. On this page, this is a track node and each track has a bunch of courses associated with that particular track. So we’re showing - on the right-hand side of the track node, we show an accordion display and that is using the Views Bootstrap module. So you just click on the title and it’ll collapse it and open it as you go along.

So at the moment, we’re using the 3.x-dev version of the Views Bootstrap module. There was some issue with the current stable release. It didn’t work particularly well with the new Bootstrap 3 as far as I recall. There is a newer dev release out and as soon as there’s a proper release past January 31, 2014, it’ll be fine to use that stable release. So what does Views Bootstrap give you? It gives you a bunch of new styles that will basically be Bootstrap components. So Accordion which - just the open and closing of information. The Carousel slide show, kind of what Views slide show does. The Grid, same as the regular Views grid, except it uses Bootstrap classes. Media Object, it’s not video or audio. It’s actually a blog display. So if you have a small icon on the left, then your text for the blog teaser on the right - so a blog listing page or Twitter tweets listing page, that kind of thing. It has special formatting using Bootstrap classes for that. You can now put tabs, tables as well. Bootstrap has a bunch of different designs for tables and it also can do thumbnail layout. These are all Bootstrap-specific layouts. So if you're looking at a View, under format you will see these options listed. Choose the one you need. You can always check on Bootstrap documentation and see what is actually going to output. We’ll go through these in a little bit as well.

So let me just show you the track page. So here’s our track page of content management, and these are the courses - two of the courses in that particular track. So this is what an accordion is. You just open and close this button that’s basically using this one, this view which is Bootstrap accordion. It doesn’t have a lot of settings. The only setting it really has is what’s in the title field, and the title field is whatever is displayed here is the thing that you're going to click on to open and close your accordion. The one thing to note is that title field, make sure you're excluding it from the display. If you don’t, what’s going to happen is when you open this thing, you're going to see the title listed again right here. So you’ll probably know how much you want. What else? So the View – okay. Home page, this is our carousel or Bootstrap provides you. You can see here when you move to the right, you can scroll left or right, and that’s all straight Bootstrap. In fact, this particular carousel on our home page, we did it manually. So it’s actually embedded inside the node rather than using a view. We didn’t want to create a new content type just for a couple of slides. It’s not something that we’re going to be changing that much. All right. So that’s the other advantage is you don’t necessarily have to use Views or anything. You can manually type in all the code that you need and relatively easy to do as well. Okay.

So let’s look at the grids and a bit more about the responsive stuff. Bootstrap grid is a 12-column grid and it provides you with a couple of extra options that I’ve not seen before in other grid systems. On Acquia.com, we actually use Omega 3 and the only thing it has is a grid class with a number. So it’s basically grid 5, we’ll use a five-column display for whatever element, but Bootstrap gives you a few more options where you can specify at what breakpoints you want the element to use that amount of columns or when you want the element to actually be the full width or horizontal field types. So it’s a little confusing at first, but basically if you looked at, for example, col-md, which is for medium devices, we have an example on outside where we have col-md3. So by using three, it’s a quarter of 12, so that means you're going to get four blocks across the page. That’s using a quarter of the page and we actually have a display, we’re going to have four blocks. Then we move down below 992 pixels, it actually drops it down to two, and then obviously on the front, it will become one. So you really – for this kind of getting the grid options correctly sorted out, play around with them a little bit just to see exactly what they’re going to do. It took a little while for me to understand how this concept works, but very handy that you can actually specify the different breakpoints of when things are going to happen. You don’t have to do any coding for this. It’s all done for you by Bootstrap.

Some of the other responsive elements that Bootstrap gives you, responsive tables, very useful. Most tables, when you look at them without doing anything on the font, they kind of stick out to the right, break your display a little bit. Bootstrap gives you a table responsive class that you add to a third wrapper around your table, and essentially what it does is it makes your table scroll within the width of the font. So it doesn’t stick out anymore. You're just able to scroll left and right. It’s quite a nice option. I kind of liked that. A couple of other people have solved responsive tables in other ways. Some people collapse them down into lists. Other divs manages to keep the table in a table look, which I think is probably – for me, I find that the nicest solution. All right. And a bunch of other responsive helper classes. So if you want certain things to appear on bigger screens, but not on the font you get these classes for hidden or visible, and depending on what way you want things to show up or be hidden, you just choose the right class, and then Bootstrap handles the rest; very useful. We use this kind of stuff on Acquia.com. We actually do some stuff, but we had to write our own class, it seems, on Bootstrap. Yes, very useful. The other thing Bootstrap gives you is an image responsive class, which you just add directly onto the image tag, and that will make the image then responsive and resize down when you shrink your screen. Quite often, people will just basically blanket all image tags, all image elements with this kind of class in their own CSS. Their work generally may not use image responsive, but if you want specific image – if you're not doing that and you want specific images to be responsive, this is the class to use.

So a couple of other components that are available – there’s a lot of them. I’m going to go through a few. So some of the CSS stuff, just a bunch of classes that you can add on things. There’s this cool thing called “.lead.” It makes your font a little bit bigger. So it’s like an introduction for the text. Bootstrap does some cool stuff with lists. You can have inline classes to make the thing automatically inline. There’s some stuff for code formatting, headers, those kind of things. Forms are really nicely handled. You have a nice inline option, so that you can get input fields together on the same line. Quite often you want to do that with like first name, last name, those kind of things. Bootstrap makes all that kind of stuff easier to read. It’s really useful for keeping your forms standardized across various browsers. Buttons, super cool stuff, we use a fair but you have options for different colors and you can override those colors in variables in your SASS files. There’s different option - different classes with different sizes of buttons, different states of buttons; so like if it’s active or that kind of stuff. You can also group buttons together, so that if you have three or four buttons grouped together, you just get a vertical divider between the buttons and only the first and last one get the rounded corner. So it looks like a nice button bar. I’m going to demo – oh, I’ll show you what these things look like in a minute. Glyphicons, obviously, is your icon font. Jumbotron is a big announcement kind of block. It’s a particular format of HTML that you need for this to work, along with the class; very nice on the front page if you want to have product announcement, those kind of things. It has panels of the Drupal module, just – it’s like a highlighted header with some text load wrapped with a nice border. We use some of those on our sites as well.

So let’s have a look – so I’m just going to quickly show you panels. This is what I mean by panels. These four blocks are a panel – each of them is a panel, and these are the ones that I was talking about that have the grid class where they use a three-column – we’ll be using up three columns each. So when you shrink down your screen, texts get a little bit narrower as you go down. But when you get down below 991 pixels, it becomes a two-column option. Then eventually when you get down to mobile, it becomes full width.

Let’s have a look at some of the other CSS components. So typography, go over the headings. So it makes the font less big. Tables - you have different options for tables. You can just have plain tables of the vertical lines. You can have striped, bordered. Hover means when you move the mouse over, it gives you a highlight for the entire row, kind of nice if your tables are kind of big and you want to be able to see stuff easily. Forms, very useful, very standardized. This looks really pretty. Buttons, these are the different – the main nav and it’s just a different class depending on what you want to show. Sizes. And then states – so active state, you can – just by adding the class, it changes the format for you. A bunch of helper classes, so you can have backgrounds, those kind of things. All right. There’s a lot of information here. Whenever I’m working with the Bootstrap theme, I pretty much have this page open all the time, just to look at stuff, see what classes I can find, what classes I’m going to use, because usually quite often I’m finding new things like, “Oh, that’s an interesting way of doing something,” or I can also search, Google it, and other people have come up with some pretty interesting ideas about how Bootstrap altogether. So that’s basically the main CSS stuff.

So let’s have a look at some of the JavaScript things that they offer. You’ve already seen the accordion and the carousel. They have the modals option, so that you can pull out content that’s already on your page in a modal. So you click over button, maybe you hit in that content before. You click a button and pops it up nicely for you. It can also pull in the remote URL. It has tooltips which is essentially the same as when you hover over an element that has a title attribute and a choice it takes as in title. Tooltips does a similar thing. It’s a bit more customized. It looks a little nicer. It’s also fast. I find that the regular default tooltips, you’ve got to hover for like a second or two, and then it pops up. The Bootstrap tooltips pop up instantly, which is really nice. Popovers are basically like a callout. You click a button and the little thing pops out the side with a bit more information on what you want, on whatever you’ve clicked on; very useful if you're into those kind of things. Affix is the other one and that gives you like a sticky sidebar nav. I’ll show you those now.

Let’s look at the components. Oh! Yes, this is the button groups thing. Let me show you. So these are three separate buttons, and then when they’re grouped together, it makes it look like a nice button bar. Okay. So some of the JavaScript stuff, so modals, you have a little animations in these buttons. You click it. You get a nice modal. You can have buttons in the modal. You can do all sorts of cool stuff in there. You can see there’s a bunch of other ones: dropdown, tab, all those things. Tooltips, let me show you – where is it? Yes, so like on our event page, your service sticky sidebar, but each of these icons has a tooltip. It’s this little black or dark gray popup. It explains what the icon is. This button has one as well. This gives you a bit more information; very nice, very simple to do as well. Popovers – okay. So that wasn’t very clear on the way I explained it. This is what it looks like. Basically, it’s open and close on click, rather than a hover, gives you a nice formatted title and a bit of some text here. Then affix is a sticky sidebar which I’ve used it. You can see this manual on the right here, it doesn’t change position at all. Affix has a whole bunch of different options and I haven’t used it myself. Our actual sticky sidebar is done differently, but that’s – it’s got some fairly interesting options. So that’s pretty much how - a look at Bootstrap and how we used it. Our entire site is responsive obviously, we try to use the classes as much as possible. That avoids any inline styling. We have no inline styling on this site – on the training site. Heather can then – as I’ve mentioned, she can come in, add some stuff. She did – I can show you the private page again. That’s the old one and the new one. All of this is basically within the node itself and she made this all just by looking at the various classes and seeing what they can do. So it’s a bunch of panels with grid classes. Let me show you here. Let’s see, it’s a little bit slow to look at it. So we’ve got a col-sn-6. So it’ll - and you can collapse down on small on the font. You’ve got your panel headings, panel title; and you do have to follow some HTML structure to get these things to work correctly, but I think it’s a pretty small price to pay to have the nice functionality that Bootstrap offers us. And it really does make my life a lot easier. I haven’t done any CSS pushes since we launched, and Heather’s been able to manage the site all by herself. No problems. So that’s pretty much it. If there’s any questions, I’ll be happy to take them. Thanks for listening.

Heather James: Thank you so much. I’ve sensed other people are probably thinking of questions, Dave. [Laughter] I know I’d add some. I thought it was interesting that after I did a little blog post about this live tutorial you’d be doing, that we had a little controversy internally, and I thought it’d be interesting to talk about that because people may be wondering when it’s appropriate to apply this and when it’s not. [Laughter] So just to give people some context, one of our colleagues sort of didn’t – he’s sort of like, “Oh, no. This is a dangerous technique, because it means people will say, ‘Oh, we can just have unfiltered full HTML in all of our body fields and do all of our layout within our body fields.’” The stories from my experience from the old site, I had only a handful of one-off full pages like that private training page, and I would only be using those blocks on that page. So I was actually putting a lot of overhead on the site, having to go create a blog and then control it’s visibility to get it displayed the way I wanted it to look. So it wasn’t really the right use of that tool either. So when I saw this solution, I thought, “Oh, this is going to save me a lot of time.” So Dave, I wonder if you wanted to sort of say what your response was about when this is not an appropriate technique and not an appropriate theme.

David Myburgh: Definitely. So yes, like I did mention, for some of the elements that you want, some of the components that you want to display, you do need to have the ability to answer full HTML. Those H3’s with a bunch of classes, by default, the Drupal filter system that takes formats filtered HTML would just strip all that stuff out in one word. So you do need full HTML and of course, with full HTML allow – users can then also post in stuff like scripts and do all sorts of crazy stuff. So you’ve got to be very careful about who you're allowing to edit, take things/stuff on your site. If it’s only your admin users that are going to be editing stuff, fine. Give them full HTML; that’s okay as long as they know what they’re doing. If it’s open to regular authenticated users, you're probably looking for a bit of trouble there. It’s not recommended. So allowing the general public to use Bootstrap elements for display is probably not a brilliant idea. This is more for the backend, so admin people and possibly trusted editors, those kind of things. Really, what I would like is – sorry. What I would like to see is – I just thought of this today, actually, when this discussion started - is some way that we could allow classes to be added into filtered HTML. I haven’t looked to see if there’s a module. There probably is a module that does that already. But yes, that would be an ideal solution. So if you can add a class without having to add – without the ability to add full HTML, which would include scripts and unpleasant things like that.
Heather James: Yes, definitely. I think that one of the – I sort of had a further conversation with another colleague about this and we discussed the particular client situations we see – unfortunately seen a few times where on the content type, they’d have multiple body fields and they’d have one body field that would allow their site builders to do something like you’ve shown, that they could have multiple columns and unfortunately, using things like table base layouts where they’re migrating old HTML content over, and then they’d add a second body field for their mobile site. So they’d actually be using a mobile redirect and they would have to select and show a different body field that would be mobile friendly. So this solution is quite different, because when I set in those panels, I can also specify not only that it’s – how many, I suppose…
David Myburgh: Columns? Columns, yes.
Heather James: …columns, yes, in the grid. Excuse me. [Laughter] But I can also specify how it should behave when the page gets resized, because it is responsive out of the box. So it’s quite different from even what some of our problematic client situations are. So I hope with that, people got their curiosity piqued to try this out. I wonder if there are any questions, Hannah, from the audience?
Hannah: Yes, the first question is “Where can I find documentation defining the classes available?”
David Myburgh: Okay. So that’s all on getbootstrap.com. Let me show you. So this site – yes, let’s go to the top here; pretty long. So if you go to getbootstrap.com, you're going to find everything there. They’ve got the CSS stuff, the component stuff, and the JavaScript stuff. So it’s all here. Like I said, every time I’m working with Bootstrap, I pretty much always have this open. It’s a great reference tool; documentation is very good.
Hannah: Okay, if anybody has any additional questions, please ask them now. [Pause] All right. That’s it for questions. Dave, thank you so much for the great presentation, and thank you so much…
David Myburgh: Welcome.
Hannah: …Heather, for joining us as well. Again, Crosstalk recording will be posted to our website in the next 24 hours. Dave and Heather, would you like to end with anything?
Heather James: No, I just wanted to add that we have a couple of webinars coming up. If you are interested, there’s actually one specifically on mapping and that’s with some Drupal like me folks. So if you saw the map that we have on our site, you may be curious about how to integrate maps in yours and that might be useful for people.
David Myburgh: Yes.
Hannah: Okay. Great. Thanks so much, everyone. Have a great afternoon.
David Myburgh: Yes. Thanks.
Heather James: Bye
David Myburgh: Bye.
- End of Recording –