Looking Forward to Bootstrap 4
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Alternative Title |
| |
Title of Series | ||
Number of Parts | 133 | |
Author | ||
License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
Identifiers | 10.5446/48849 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
|
NDC London 201655 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Software developerCloud computingPhysical systemThumbnailPlastikkarteComputer iconShared memoryRight angleBootstrap aggregatingGoodness of fitPoint (geometry)Strategy gameProjective planeFunctional (mathematics)MultiplicationExtension (kinesiology)BitMathematicsQuicksortThumbnailPhysical systemDifferent (Kate Ryan album)Computer iconModule (mathematics)Multiplication signSinc functionCASE <Informatik>Alpha (investment)Computer fontSoftware frameworkWeb browserCodeGroup actionScalabilityLibrary (computing)CuboidRevision controlGame theoryScripting languageProcess (computing)UsabilityControl flowAreaDependent and independent variablesWebsitePlastikkarteSoftware developerComputer animation
05:52
Software developerSocial classMobile appOrder (biology)QuicksortPhysical systemBit rateTablet computerTouchscreenPoint (geometry)Electronic visual displayMathematicsControl flowSystem callComputer animation
06:53
Software developerData centerSoftware frameworkCross-site scriptingWeb browserGroup actionSheaf (mathematics)Mobile appFront and back endsBootstrap aggregatingApplication service providerAlpha (investment)WebsiteWeb pageBitPower (physics)Computer animationSource code
07:50
Software developerBootstrap aggregatingNormal (geometry)TwitterAlpha (investment)BitBranch (computer science)InternetworkingMobile appRevision controlConnected spaceWebsitePRINCE2Axiom of choiceOcean currentPoint (geometry)NumberMultiplication signHand fanComputer animation
09:58
Software developerTwitterDependent and independent variablesWebsiteQuicksortContent (media)MathematicsHand fanFluid staticsWeb pageProcess (computing)Computer animation
10:38
Software developerProjective planeBootstrap aggregatingBooby trapDependent and independent variablesQuicksortWebsiteSource codeComputer animation
11:16
Software developerCodeQuicksortNormal (geometry)Bootstrap aggregatingSinc functionPhysical systemDifferent (Kate Ryan album)FluidFile formatNumberSocial classSheaf (mathematics)Source codeComputer animation
12:10
Software developerMenu (computing)Sheaf (mathematics)Bootstrap aggregatingSocial classFile formatClique-widthTouchscreenStandard deviationDependent and independent variablesPhysical systemInformationWeb pageRow (database)Attribute grammarMathematicsPlastikkartePoint (geometry)Connectivity (graph theory)Control flowComputer animation
13:31
PlastikkarteEuclidean vectorComponent-based software engineeringPlastikkarteQuicksortConnectivity (graph theory)EmailComputer fontSheaf (mathematics)Matching (graph theory)MathematicsSlide ruleControl flowMixed realityMultiplication signProjective planeMereologyComputer animationLecture/Conference
14:47
Software developerSheaf (mathematics)Division (mathematics)Web pageComputer animation
15:25
Software developerFluidSimulationSheaf (mathematics)QuicksortPlastikkarteWeb pageDivision (mathematics)Computer fontBlock (periodic table)Computer animation
16:14
Software developerMereologyBlock (periodic table)PlastikkarteQuicksortDegree (graph theory)Physical systemGraph coloringMathematicsComputer animation
17:02
Software developerPoint (geometry)NumberSocial classPlastikkarteFile formatEmailQuicksortForm (programming)Computer animationLecture/Conference
18:02
Software developerData centerMaxima and minimaQuicksortSheaf (mathematics)EmailCASE <Informatik>Medical imagingGroup actionSlide ruleFluidMathematicsThumbnailComputer animation
19:00
Software developerLie groupData centerDivision (mathematics)Medical imagingFluidDependent and independent variablesSinc functionMathematicsWebsiteMultiplication signBootstrap aggregatingLevel (video gaming)Menu (computing)QuicksortCartesian coordinate systemComputer iconComa BerenicesRight angleGoodness of fitWeb pageComputer animationLecture/Conference
20:57
Software developerData centerStandard deviationPattern languageGraph coloringSocial classMultiplication signNavigationInverse elementWave packetSource codeComputer animation
21:41
Software developerGraph coloringRule of inferenceSource codeComputer animation
22:26
Software developerMixed realityNumbering schemeGraph coloringQuicksortElectronic mailing listWebsiteExecution unitMenu (computing)Web browserCuboidProjective planeNetwork topologyCASE <Informatik>Connected spaceMathematicsSocial classNavigationWeb pageInternetworkingNumberDependent and independent variablesSheaf (mathematics)MereologyElectronic visual displayComputer fontComputer iconBootstrap aggregatingComputer animation
25:23
Software developerDivision (mathematics)Form (programming)GUI widgetGreatest elementGame controllerQuicksortAdditionWeb browserPoint (geometry)WebsiteForm (programming)Computing platformTwitterSet (mathematics)Pattern languageCuboidRoboticsRight angleExtension (kinesiology)Type theoryClient (computing)Computer fileGraphical user interfaceComputer animationLecture/Conference
27:02
Software developerGame controlleroutputForm (programming)Social classGroup actionMathematicsType theoryElectronic mailing listComputing platformCuboidSource codeComputer animation
27:51
Software developerStandard deviationCuboidQuicksortData structureCovering spaceForm (programming)Price indexSelectivity (electronic)MereologyFormal languageLocal ringSocial classSingle-precision floating-point formatMultiplicationComputer animation
29:44
MathematicsEuclidean vectorConnectivity (graph theory)Figurate numberMappingQuicksortArithmetic progressionDependent and independent variablesMathematicsComputer iconMedical imagingComputer fontVector spaceComputer animation
30:30
Software developerLibrary (computing)Projective planeComputer iconRevision controlMoment (mathematics)SubsetCASE <Informatik>Bootstrap aggregatingComputer animation
31:29
Software developerComputer iconSocial classMultiplication signType theoryCASE <Informatik>Computer animation
32:17
Software developerFigurate numberSheaf (mathematics)QuicksortBlock (periodic table)Formal languageReflection (mathematics)Clique-widthLine (geometry)Medical imagingComputer animation
33:00
Software developerMaxima and minimaFigurate numberMedical imagingQuicksortRight angleClique-widthComputer animation
33:38
Software developerArithmetic progressionElement (mathematics)Attribute grammarMaxima and minimaGame controllerType theoryCASE <Informatik>BitSocial classDefault (computer science)Line (geometry)QuicksortBootstrap aggregatingGraph coloringComputer animation
34:26
Software developerMultiplication signCombinational logicElectronic mailing listPoint (geometry)Social classComputer fileNumberMathematicsRight angleProcess (computing)Scripting languageComputer animation
36:18
Software developerPoint (geometry)CASE <Informatik>Extension (kinesiology)Bootstrap aggregatingRewritingCovering spaceWeb pageProjective planeBitSoftware testingGoodness of fitBootingSubsetAlpha (investment)QuicksortDifferent (Kate Ryan album)Multiplication sign1 (number)Combinational logicService (economics)Web-DesignerWebsiteWeb browserCloud computingPhysical systemOpen sourceComputer fontWordScripting languageRepetitionSet (mathematics)Revision controlGame controllerCuboidCore dumpGroup actionSource codeService-oriented architectureDemo (music)State of matterRight angleComputer animationSource code
41:53
Software developerBootstrap aggregatingWebdesignComputer fileWeb browserQuicksortWeb-DesignerCovering spaceWeb 2.0Software frameworkSubsetProcess (computing)Drop (liquid)Formal languageMultiplication signCore dumpWebsiteFitness functionNumberProjective planeEmailFile formatEnterprise architectureConsistencyPrototypePoint (geometry)CuboidBitRight angleRow (database)Dependent and independent variablesGroup actionMetropolitan area networkWeb pageSoftware developerMultilaterationSource code
47:19
Software developerBootstrap aggregatingSource codeComputer animation
Transcript: English(auto-generated)
00:06
Those of you brought extra cupcakes, can we share? No, no, okay, that's worth a shot. My name is Sean Wildermuth, can you hear me okay in the back? Great, and we're gonna talk about Bootstrap 4.
00:21
How many of you already use Bootstrap in some project or another? How many of you used Bootstrap 2 and had to convert to 3? And you're still using Bootstrap, that's very impressive. When I pitched this talk about Bootstrap 4,
00:42
I really thought by now it would be in at least beta. But we're gonna be talking and using alpha code in this version, because that's the only version that's out there right now. And so my suggestion is if you ever decide to do a user group talk or a conference talk,
01:01
never show alpha code. So we're gonna be a little risky today, we're gonna see what we can show you and kinda get you ready for what's coming in Bootstrap 4. We're gonna, I'm not gonna talk about the agenda. I don't know why I always have that slide. The good news is that Bootstrap 4
01:22
is pretty evolutionary, not revolutionary. Between Bootstrap 2 and 3, there were huge breaking changes that were made. There are still breaking changes between 3 and 4, but they're pretty small at this point. Going from 2 to 3 was really a re-skinning of most apps. There wasn't a good strategy
01:41
for going from one to the other. In Bootstrap 4, they've really attempted to solve some common problems. And a lot of them were internal. They did a lot of rewriting of the development, they moved from less to SaaS, they did a whole rewrite of their JavaScript framework while maintaining as much compatibility as they could,
02:02
because they were trying to get some more performance out of what they were doing and make it a little easier for people to write themes based on Bootstrap. So a little bit more extendability and those sorts of things. They wanted to support AMD. So as projects were starting to use more and more
02:23
asynchronous module loading, that they could do that through the couple of different methods of using AMD. Wanted to opt into Flexbox support, since Flexbox is still pretty edge case for browsers. They knew that they weren't going to be able
02:41
to support Flexbox in every case, but there are ways to opt into it so that you can get that better layout strategy. There's an improved grid system. We're gonna see that in action. Good news if you're feeling a little nervous about this improved grid system.
03:03
They haven't renamed anything. The grid system actually continues to be the same grid system you're using, just it's adding some functionality there. They've replaced wells and thumbnails with something called a card system. So instead of having these multiple different sorts of ideas, like wells and thumbnails,
03:22
and they have this extendable sort of container idea that's gonna be useful in scenarios, and we'll see that as well. This is the one that bites some people, and that is they're dropping the glyph icon support. Now, the reason they're doing this is glyph icons is gonna continue to exist,
03:42
and has always existed outside of Bootstrap. You can opt into it. It's just not prepackaged with Bootstrap. And of course, most people have moved to other icons like Font Awesome. That gives you a bit better scalability with some icons. So they didn't wanna have that hard tie to an icon library, make it a little easier out of the box
04:01
to decide what you wanna do as far as icons. And they've dropped support for IE8. So if you're still using IE8, you can still stick with Bootstrap 3, but 4 is no longer gonna support it. This may change a little since Microsoft doesn't support 8, 9, or 10 anymore
04:20
as of 48 hours ago, or whatever the exact time was. And so you're gonna see some libraries start to drop support for some of the older IEs. If you're still using IE5, 5, let's have a talk after the session, and we'll have an intervention,
04:41
and see what we can do to help you. So this is the question I get at the end of the talk every time. Well, when is it gonna be ready? When is it released? And the answer I've gotten is that, right? For some reason, the Bootstrap team
05:02
thinks it's a gaming company because they're using the same strategy for release dates. It's a pretty actively worked on project. If you look at GitHub and you see check-ins, they really are working hard on getting it released as soon as possible, but we're still in an alpha. And I had actually pitched to Pluralsight
05:22
to do the Pluralsight Bootstrap 4 course, ooh, and I told them I would have it done by the end of the year. Luckily, I didn't tell them what year, right? So as soon as it's done, I'll be able to do the course and we'll go about our business.
05:41
So one of the first changes you're gonna see is Bootstrap 3 only supports four breakpoints, four responsive design. And that was pretty common at the time that you had sort of extra small for, for really phones, small for smaller tablets,
06:02
medium for sort of desktop or large tablets, and then large so-called retina displays, right? Well, things have gotten out of hand with 4K and 8K screens, and so they've added this extra large breakpoint as well. And these, they're supported in the same way.
06:22
In fact, there are some new classes for doing things like small and lower and medium and higher or large and higher, and so you don't have to be populating 34 class names in order to get these breakpoints as much as you used to. But none of these names change,
06:42
so you should still be good with mostly not changing your app unless you need to opt into these larger screen sizes. So let's talk about the grid system. Now, I'm using an ASP.NET 5 app to do this, but it doesn't matter what you're using, it doesn't matter what backend technology you use
07:02
because all of what we're talking about is really front side. If you want to opt into using Bootstrap 4, there's a whole section, let me actually fire up a browser real quick.
07:24
There's a whole website called v4-alpha-get-bootstrap.com, and this is the new documentation page that, if you've used Bootstrap before, you've probably looked at before, but this is all based on the latest bits.
07:42
So if you want to get them, if you want to download Bootstrap directly and use it, I'm gonna use Bower to get it, just because that's a little bit more comfortable for me, but all I'm gonna do is include Bootstrap, and of course, there's actually a Bootstrap package
08:03
out there that says it's alpha. I did this talk three months or so ago, two months ago, I don't remember exactly when it was, and they screwed up their Bower package, and the Bower package for alpha four was returning three, and so we had a very interesting session that day,
08:23
so we're not gonna make that mistake again. I'm gonna actually point this at the GitHub repository, so we're always getting the latest version of the app. I'm gonna use my cheat sheet, because if you guys can remember Git paths, you're younger than I am.
08:44
So it's simply the GitHub and then the Twitter Bootstrap member, and then it's Bootstrap, and this is the normal Bootstrap site, the normal Bootstrap repository,
09:01
but we're gonna ask for a specific version, which is v4-dev. This is a branch they have that has the active current bits. The only difficulty in using this is if they broke the build last night, we're gonna have a fun, fun time, but hopefully they haven't.
09:22
So let's see how good my internet connection is with it restoring the package. Maybe if I go clockwise, it'll speed up. Really, just make sure I didn't get anything wrong.
09:42
Twitter Bootstrap, give it one more try. Otherwise, I'll pull out my after that actually has all this pre-installed, and we can talk about it. While we're doing this, let me show you what we're gonna start from.
10:01
Are there any vegans in the room? I tried to warn people on Twitter about this. The website we're gonna change has some very meat-centric content. I'm a big fan of bacon. Anyone like bacon? So we have some bacon lovers and some liars.
10:20
That's nice. So we can see that this is a pretty ugly site. This doesn't have any sort of responsiveness to it. It's a sort of static web page that I've created to try to make it look bad, and I've done a pretty good job of making it look bad.
10:41
And it looks like we still don't have it. Okay, let me pull out the other project. This is why you do it right.
11:01
And this is where we wanna get to. We wanna get to a site that's more relatable as using GitHub, GitHub, using Bootstrap. Let me close these real quick. And we can see that it's giving us that same sort of Bootstrap experience with handling responsive designs a little better.
11:23
And I'm gonna go ahead and show this code. Normally I'd write this code, but since GitHub or Bower isn't being friendly to me today, let's look at some of the code as far as the grids. Let's talk about the grids first.
11:41
Really all the grid system is doing that's any different is depending on your container. So the container we're using here is the simple container, and this is the non-fluid layout that we had in Bootstrap. But there's more support for mixing fluid and non-fluid
12:02
than there was in Bootstrap 3. You're gonna use things like the columns. How many of you have never used Bootstrap? Couple of you. So really all we're doing is we're creating these sections and then we're using classes that define how many columns to use. Now Bootstrap uses a 12-column format.
12:21
So a column of nine means it's gonna take 75% of the width of whatever that container is. Three would take 25%. And normally that's how you would do these layouts. And the MD in here says that this is the layout I wanna use pretty much on a standard-sized screen. You'll notice that when we go to a more responsive size
12:43
that these collapse down because the responsiveness is to stack these once the screen size becomes small enough. Now we're still using three and nine there, and then suddenly we're gonna go to stack. That information didn't disappear. It just moved further down the page.
13:01
Does that make sense to everybody? And for the most part, if you're using the grid system pretty well, you're using rows that contain the column attributes or the grid system, it's simply gonna continue to work. You may want to change things by using the new LG or the, not LG, the XL, the extra large breakpoint
13:25
if you wanna do something special on really wide screens. The next changes are cards. The cards are a new component,
13:41
and this is one of the breaking changes because wells and, now I can't remember the other one, but the thing that cards are replacing are gonna go away. So suddenly they're gonna end up being unstyled. And for the most part, what you're gonna do there is just replace them with the card philosophy.
14:03
Oh, of course I had it on a slide the whole time. Thumbnails, wells, and panels, if you, as you upgrade a project, are simply going to be unstyled and you're gonna need to go and replace them with cards. The idea is to make them more flexible so that you can do more things and you aren't gonna have to switch back and forth.
14:21
The problem was that panels had a really nice design, but some people sometimes didn't wanna mess with sort of the girth of having a header and a footer and a section and a body. And so this allows you to do something as simple as a well, which is just sort of a outline section or something as complicated as a panel
14:41
without having to sort of mix and match which is the components you were using. So let's go back to the, whoops, the section here. And here's where I'm using a card, but I'm gonna break it apart and then put it back together.
15:13
We're gonna go all the way back to what it looked like first. Oh, let's get rid of this one too.
15:23
Which was just another div on the page, right? So we have just a div with some food in it and we wanna really create sort of this highlighted section on the page. And so I can take this div and simply say
15:41
something like what we used to have in a well, but just call it a card. And card doesn't require really anything more than that. It's a little hard to see on this screen, but there's just a little outline around it that does the old sort of well trick. If we want this to be, let's do my little trick there.
16:13
If we want it to be sort of centered in the middle of it we can then surround the inner part with a block to say that we now have sort of more,
16:22
and this even starts to look even more like a well. But these wells, I'm sorry, these cards also have coloration to them. So right now it's just taking a pretty non-colored, but if I change this to, let's say primary, that is specifying the primary color
16:41
in the color system inside of, inside of a bootstrap, inside the card. And in the same way I can change the text by saying card text, and it will respond to the color of the text based on the color of the owner,
17:04
or it was supposed to. I promise you that worked at one point. And if we go to success, then I have completely,
17:26
oh, missing quote. We can see, we can pick any of those colors as well. This is continued by the idea of having something like a card header.
17:46
And a card header can have, let's say, let's do H4 and card title. So there's a number of these classes that are really trying to allow you to sort of format the different pieces.
18:00
This is bacon. And we can see this now makes a title that's supposed to highlight, really be the header for that sort of section. We can do the same thing with a footer. I'll do that real quick.
18:25
I'll just create a button in this case. Make sense?
18:40
And so you're sort of slowly opting into these different pieces of what we have here to really replace these different concepts. So having one concept a little easier to grok than trying to remember, is that a well, is that a thumbnail? Thumbnail was always the sort of weird one in the group. There was one other change that I didn't have on the slide that I did want to point out.
19:02
And that is this image fluid. It used to be called image responsive. They have renamed all the IMG responsive to image fluid now, trying to keep some of the naming. So you will need to go and find probably the four million image responsives you have in your site and change them all to fluid.
19:22
It's a little annoying, since it's simply just a name change, but they don't take my suggestions as highly as I would like them to. So, how many of you have written
19:40
a nav bar on your application? How many of you enjoyed it? Wow, no hands, that's good. That's about right. So nav bar is one of the places where it's a pretty big breaking change, but it's a pretty big breaking change for the good. Because nav bars have been simplified and actually make sense.
20:01
So I've been using Bootstrap since Bootstrap 2, written a bunch of sites with it. And when I use Bootstrap to create a nav, I go to getbootstrap.com, I go to the example and I copy and paste it and then edit it. Because it's never been intuitive. It's never been intuitive.
20:21
Always trying to get it exactly right has just been a real bear. And so the attempt here is really to simplify it. And let's talk about a couple of ways that it's simplified. Make sure I get down here. Talked about that one around. It's making responsive menus easier.
20:42
When I talk about responsive menus, it's pretty much the old collapse the menu and show the hamburger icon or whatever you decide is a better idea than the hamburger icon. But we've all seen that sort of support. And so let's talk about what this looks like.
21:01
I'm not gonna tear this apart because it takes a long time to get it right. But a couple of the things that they've done simply at the nav level, at this top level, is they said, maybe they would like to use some other background than inverse and white, right? The old standard was either it was inverse or it was white
21:23
or then you started to write all your own CSS. That was the pattern. Background was one of those everyone had to change. And so they have this idea of BG classes that have different colors as well as the sort of standard primary and such.
21:42
Over here so you can see it. Ooh, I didn't change the colors. So blue on blue probably isn't a good idea. But they also simply support just changing the background color here as well. What they used to do is you used to have to use
22:01
an important if you really wanted to get it or make sure that you were having a really specific rule to get the background color. And so they're really observing any background color you're specifying whether it's in CSS. You probably really wouldn't put a style tag here so don't take this as a best practice. But it certainly does work.
22:21
So that when you have the theme for your company, that theme should work wherever you go. My goal is to have a company where lime green and dark blue are the color scheme. I think it's a really good mix. It's a really good mix, especially for the color blind.
22:45
Below that, instead of having to have these sort of extra sections, you can now just list the logo and in this case the hamburger menu directly in the project. And they're also recognizing that browsers now have
23:04
a hamburger menu and Unicode, right? No more of those having to have three dashes inside a button and hope that all works and hope that it's friendly in every place. This is a little better. And obviously we could have put a font icon,
23:20
a Font Awesome icon or something like that in here as well. So it gives you really, this is much more simplified than what they were doing before. Still using the same data collapse, data target facility for doing this. But they have a special class now for the toggler because it knows that this is sort of so canonical
23:42
to so many bootstrap websites. What it isn't supporting and I kind of wish they had a better solution for this is the draw out menu because that's also much more common on responsive websites right now is that the hamburger menu, instead of just displaying and showing that menu to actually bring it out on top of the other.
24:03
It's not terribly difficult to do if you've never done it. You can do a pretty JavaScript free with just the toggler and using some CSS animations but it would have been nice if they had something in the box for that. So don't get too excited.
24:21
Now the nav bar brand hasn't changed. And this is probably my favorite part is that you can still use a list, an LI, an unordered list to do your menu but it's no longer required. So here we have our menu items
24:42
simply where we have the nav bar nav and then the nav items directly as just anchors. This makes the cruft of putting it together a lot simpler. It also means that if for some reason when the styling starts for your webpage, the CSS is loading slow,
25:01
you're not getting that bulleted list down here then displays itself later, which is one of my annoyances when if you've ever been to a bootstrap site and for some reason your internet connection goes all wire, you'll see how badly that looks.
25:20
Any questions about that? Most of the facilities are still pretty similar. They're using an animation for hide and show but it's really pretty simple. And you can style that a little differently to make sure it's on a row below or those sorts of things just out of the box.
25:43
The style is to have it fit if it fits. Please don't Twitter that, that this is what my website is gonna look like because I will get in a lot of trouble. There goes all my clients.
26:04
Custom form controls. This is a very interesting addition and I really like this addition. Though it's the one that they're most actively working on so it's still a little, some days it works well and some days it doesn't. But the idea here was they wanted to have
26:22
built-in support for controls that look pretty different on different platforms. This is sort of the reason jQuery UI was invented at one point, right? Was this whole idea that the checkbox looks weird on Safari versus IE or Chrome.
26:42
And so they've built-in support for three common types. But what's more important about what they did here is they created an extensibility point. They created a way and a pattern to create your own set of controls here. Oh yeah, and the file browser,
27:00
but I never used that one. So let's talk about that. Styling the form really hasn't changed. Yeah, there's the form. So we still have form groups and form controls. All of that's the same. But you'll notice here at this label class where I have a checkbox,
27:21
there's a label and it's called custom input and custom checkbox. These are the custom dash or the new custom control types and this is where they're gonna take control of what a control looks like. And you'll see the same thing down here for custom select on our select list. Again, trying to create a common look across because for some reason no one got together
27:43
when they implemented the select box to say this is the way it should look on every platform. And so what we get here, the checkbox in this build actually isn't working. This is the way it looks right now. It's actually pretty pretty when it works
28:02
so hopefully they're gonna fix that soon. But this is what the built-in select box looks like. Hopefully you can see in the back. So it's that standard sort of popover with the individual items selected. Just a little prettier than the built-in ones. And of course these are all styleable and you can make them look really any way you want.
28:24
What's interesting is that in the checkbox, this is really styling two things that are interesting. Let me actually break these apart so that you can see them a little better.
28:41
The checkbox is sort of defining the structure and that is that inside the label, we're gonna have a checkbox and then we're gonna have this special thing called the custom indicator. Custom indicator is the thing that someone's going to check on. The checkbox is actually hidden and is just used to sort of send the form data
29:01
or to programmatically access and all that. So it's checked underneath the covers but they're using this custom indicator to be this is where we want the actual UI of the checkbox to be. And so you can actually do some very interesting things about having a before and after and it actually makes it a little simpler
29:20
to do some things like localization. So when you get into right to left languages and things like that, this actually makes it a little simpler. Luckily for select, none of that has to happen. They're just using a class on the select itself. So whether it's multiple select or single select, it's all responding to that.
29:41
Make sense? Some other changes. We talked about glyph icons but you should probably be using font awesome anyway. Glyph icons were always, when you did responsive sort of changes,
30:02
they tended to look awful in high DPI scenarios and font awesome being an actual font instead of being image maps just looked much better since they're all vector. And if you have a favorite one, it doesn't matter which one. Figures are a new component.
30:23
This is such a small little change but I wanted to sort of highlight it and then progress bars. So let's look at those three real quick. In the case of glyph icons being gone, let's see where my bar package is.
30:41
I'm just using font awesome or you could use glyph icons as another dependency. The fact that we can use them has really nothing to do with bootstrap. Just those of you who are using glyph icons, this is the moment that you probably want to move forward and choose the library you want. If you want to continue to use glyph icons
31:02
because the look and feel looks like what you're doing, you would just include it in the project as a separate reference and it would just work. They're just no longer bundling it with bootstrap. What's interesting is the bundling with bootstrap was always a subset anyway so the glyph icon project actually has more icons than the one they were bundling anyway.
31:22
A lot of people have already moved to another, to either the full version or the font awesome version. And if you haven't used font awesome, it's gonna feel a lot similar. It's gonna feel very similar. So in this case, my little icon is this little fork
31:43
because it's bacon. And font awesome uses fa as the main class and then fa dash to decide which of these icons to use. The biggest reason I think I originally moved to font awesome was because its class name was fa.
32:04
The whole typing glyph icon every time just was, just make it stop. But that's not a good reason. So the other piece I wanted to talk about was why my language used to be good.
32:26
My language used to be much good or don't take that as a reflection of most Americans. So here's the idea of a figure. I'm gonna move it up a little for those in the back. Figure is really something you're gonna show.
32:42
It doesn't have to actually be an image. It could be some procedural data. It could be a section of text. But that they have this sort of block with a figure and the ability to caption it. And it captions it to the width of whatever it's being shown. So for images, this becomes especially interesting
33:04
because we have this as a figure and this is all, there's no real UI to it. But what the thing we really like about it or I really like about it is whoops.
33:23
Is that right doesn't go all the way to the right, right? It now creates sort of that container so that we know right aligned figures are gonna be to the width of whatever it is. And if this image changes, it'll do the same thing.
33:41
And much to my satisfaction, progress now uses a progress bar. Progress was added as a control type or an element type in HTML5 and now bootstrap is actually using them. Now the old style actually continues to work
34:00
because you don't need it to be a progress. It just means that it's going to use as many of the default attributes and be a little bit friendlier to scraper so they now know, oh this is just a progress line, I can skip it, it's not actually content. So you can see it's using the min and max now and then it still uses the classes to sort of style it.
34:21
Progress, progress striped and success in this case to color it. We have a little time so I'm gonna talk about a couple of other things that are a little interesting.
34:46
Not the offsets, it's. So you're gonna see these new classes in the grids for push and pull. And all the different sizes contain these. This is the way to have a column size by the grid
35:05
but pulled or pushed instead of having to use pull right and pull left instead. So they've combined some of these things to try to make this a little friendlier.
35:20
And I think it was the small that has, and I don't remember where that was. Nothing as fun as watching me actually look for one of the things I wanted to show you because I didn't put it in the list.
35:44
Well I'm gonna skip that since I can't remember what the class is called. But the number of classes they've defined has gone up a bit because they're trying to do some of this combination. They recognize one of the pain points is that to get the look and feel you want, sometimes you're mixing the same classes
36:02
over and over and over again. And that just wasn't useful. Now do any of you actually customize Bootstrap? You take the less files in JavaScript and base it on that, a couple of you? Do any of you use Sass and less?
36:23
Just less, okay. That's gonna be a pain point for those guys, for you guys. Because they've moved completely to Sass. Luckily Sass is like less than that. It's a super,
36:41
it's a word I'm looking for. It's a superset of CSS. There's a few things that Sass does that are a little bit more powerful than less. I just never needed them so I, like you, stuck with less for the most part. But for customizing it or building it or building your own versions,
37:01
hasn't been all that different. A lot of these things have been driven by the fact that the Bootstrap guys are also launching when four launches their own theming service. So they're gonna be selling themes like Themeforce and those guys. But that have been built by the team.
37:21
And so I think for the first time, they've been bitten by all the pain that we have in actually using it. And that's why some of these combinations have become more and more useful as we've started to look at them. So we're at about 35 minutes and I should be showing you more demos,
37:42
but the reality is the talk is short. And the reason it's on purpose is that's all that's changed. So most of what you're dealing with when you're gonna move from three to four is pretty painless. The nav bar for me in converting a couple of sites has been about the most painful piece, but because it's simpler, it wasn't that difficult to do.
38:04
All the same grid systems worked. I had already moved to Font Awesome. So most of the big pain points just weren't there. They're just isn't that much different about four than three. What they've done under the covers for some of the rewrites is try to improve performance. The CSS drawing has been significantly improved
38:22
or at least they've told us it has. We'll see what really happens. The JavaScript's all been rewritten so that it's a little bit more friendly. Not only the AMD, but easier to debug and as well supposedly more performant. But again, doing perf tests on alpha is never a good idea.
38:42
So I didn't actually verify any of those things. Does anyone have any questions about what I've covered so far? So the question was, do they plan on adding a date time picker?
39:01
I don't believe they are. I think you're still gonna have to go third party. It's funny because the whole promise at one point was that once the HTML spec was done, that the browser ones would be pretty good and they're all awful. So nothing's really changed there. Nothing's really changed there.
39:22
Bootstrap is an open source project. Now that they have the custom controls, I suspect either people will be trying to do, trying to submit pull requests that might add some of these things or just have sort of the Bootstrap fork and trib style project to add some of these things
39:40
in a more common way. The problem with the third parties right now is, and at least the most of the ones I've used, is they're typically jQuery extensions, not sort of Bootstrap extensions. And that's fine, but you get into some weird side cases. Because even though Bootstrap uses jQuery,
40:02
most of us, most web developers today, I shouldn't say most, most web developers working on new projects today aren't leveraging jQuery in the way they used to. And so jQuery extensions become less attractive when you're doing Angular or React or one of those guys.
40:20
Other questions? Yeah. I haven't dug into the source, so I'd love to tell you that they haven't, and I hope they haven't.
40:41
Knowing NEM because extensibility has always been an issue they probably didn't because there isn't a good reason to. But I don't know. I don't know for sure. Other questions in the back?
41:04
I, so the question was, theme marketplaces, where do I go? I always go to a boot swatch, and then there's the wrap bootstrap, I think is the commercial side of that. And that's always my first go-to is wrap bootstrap. The theme four stuff, and some of the ones like that,
41:23
there's so many bad themes in it. And you end up looking at a theme, oh, that looks nice. Oh, it's only supporting bootstrap two, and it's really made for WordPress, right? You get into those sorts of things. I like wrap bootstrap because it's,
41:40
it really is just bootstrap. And the two themes that they've released, the bootstrap team have released already, aren't particularly good. They're so general use that they just look sort of like a colored version of out of the box, but I suspect once they stop working on the core, they'll actually be able to do some interesting things
42:01
with their own site. Other questions here? Yes. Yeah, that's the whole idea, is that much like the select and the checkbox,
42:21
it's just a custom dash file browser so that it has a consistent look across browsers. Now, I actually didn't prototype this, so I don't know how good or bad it looks. But the interesting thing is, because they're sort of redrawing what is on each page, that even if you didn't like what they did, it would be pretty easy with CSS to just redraw.
42:42
So they're doing the same sort of thing they did with select, where the file browser's sort of under the covers and then they're using CSS to draw something that just looks better and works better. You'll still have to write all the backend code, though. This is just the control, just because I know I'm gonna get that question later
43:01
if it happens. Other questions? In the back? Right, sure.
43:55
So the question, just to make sure I heard it right, was frameworks like Bootstrap,
44:01
and there's a few of them that are pretty popular. Bootstrap is probably the biggest one. At what point, especially when talking to web designers, should you just be writing all your own CSS and all of that? And that's a pretty valid question. It depends on really what you're doing. All the techniques that Bootstrap does aren't all that revolutionary.
44:21
And even Sass and Less have been around a long time. Sass actually has a history going back even further than Less before they sort of fixed the language. So none of this sort of techniques are fairly new. What Bootstrap gives you as a web developer
44:41
or a designer is that sort of core framework that tries to handle these situations. Now, it does mean that you're sort of put into Bootstrap's box, but it does mean you can sort of pick and choose. It is a toolbox of things to use. You don't have to opt into any of these things, though pretty much every site I've ever used
45:01
with Bootstrap uses the grid. Now, some of them use some of the other pieces. Some of them use sort of custom. So I find web designers that look their nose down at Bootstrap are really looking down at what I used to call the bootstrappification of the web, and that was that everyone's project started
45:21
with the Bootstrap template, and so everyone had that same header bar and had the same sort of simple column format. And most sites out there that are using Bootstrap that are mature and obvious projects, you probably wouldn't be able to pick out
45:40
that they're using Bootstrap, because it is, the whole idea is this is sort of the foundation of your design work. This isn't slap this together. Now, of course, if you're an enterprise developer, and you're just creating an internal website to collect vacation days or whatever the thing you do is,
46:01
this is way better than me hand coding the CSS, right? And so this gives me sort of that floor of acceptable design and acceptable sort of responsiveness, but it doesn't mean your job is done. Dropping Bootstrap in doesn't mean that as a developer,
46:24
you should go, well, responsive is handled. I don't really have to understand how it works, or that the design should look anything like this, even for giving the green and the blue together, right? I don't know why some web developers, web designers look their nose down on it.
46:41
I think they're just worried about what they're being asked to do is just sort of fit into that box. And if they're contractors, it might be about number of hours as well. But I mean, anyone who's worked based on hourly billing knows that sort of problem of,
47:01
no, no, we should rewrite it all versus let's fix it. Yeah. Not that I've ever done that. You're recording this, right? Yeah, not that I've ever done that. Question? Yeah, I'm happy to.
47:23
Any other questions while I un-uglify this? Well, thank you for coming. I'll be up here if anyone has any questions afterwards. And I hope you're ready for Bootstrap 4 now,
47:42
whenever it happens to ship. Thank you.