,, and so on). Less styling to worry about!GridThe
grid in Basscss uses a standard 12-column layout system that can also be found in Bootstrap, Foundation and other frameworks. Since we're trying to stay ahead of the curve though, we'll forego this grid in favor of the flexbox layout, which will solve most of our problems.FlexboxFlexbox is a relatively new concept that more and more developers are starting to use. It allows for powerful layout solutions that can't be achieved using traditional layouting techniques (that use floats, much like the grid found in Basscss). Basscss provides us with handy
layout classes that we can use to quickly create any kind of layout we want. In a nutshell, we can tell elements using flexbox to stretch or shrink, or to align themselves if needed. This abstraction is very powerful, and was super complicated to do before the arrival of Flexbox. Welcome to the (almost) golden age of web layout!Scooby Doo's NametagLet's play around with Basscss a bit! Scooby Doo needs a new nametag, and we just happen to need some practice with our new CSS framework. A match made in heaven! This is what our end result will look like:
First of all, let's add Basscss to our project. We can include a
link tag directly to the source in between and :That was easy. Now let's add a
div to the body with a capped width at 300px. Usually we don't have to do this, but since we're starting from scratch, we need to cheat a little to get going. Otherwise, our nametag would take up all available width (i.e. the entire browser)!<body> <div style="width: 300px"> div>body>Now that that's done, we'll add the container for our nametag that holds all other components:<body> <div style="width: 300px"> <div class="flex"> div> div>body>Yay, flexbox! Next, we'll add Scooby Doo's image, as well as his name and job title.<div style="width: 300px"> <div class="flex"> <img src="http://i.imgur.com/KveOp9g.png" alt="Scooby Doo"> <div> <h1>Scooby Dooh1> <small>Pet Detectivesmall> div> div>div>
Hmm... well, we're slowly getting there, but not quite yet. First things first, let's add a rounded border to our flex container:<div style="width: 300px"> <div class="flex border rounded"> <img src="http://i.imgur.com/KveOp9g.png" alt="Scooby Doo"> <div> <h1>Scooby Dooh1> <small>Pet Detectivesmall> div> div>div>
Now we'll remove any existing margins on the title, and align items in the center:<div style="width: 300px"> <div class="flex items-center border rounded"> <img src="http://i.imgur.com/KveOp9g.png" alt="Scooby Doo"> <div> <h1 class="m0">Scooby Dooh1> <small>Pet Detectivesmall> div> div>div>
We don't want the image to take up more space than it should, so let's add a
flex-none class to make it shrink:<img class="flex-none" src="http://i.imgur.com/KveOp9g.png" alt="Scooby Doo">The text is kind of pushed up against the image... Let's fix that by adding a bit of right margin to the image:<img class="flex-none mr1" src="http://i.imgur.com/KveOp9g.png" alt="Scooby Doo">
Great! As a finishing touch, we'll use one of Basscss' typographic utilities,
.caps, to make our job title appear in uppercase letters:<small class="caps">Pet Detectivesmall>
And that's it! Here's the full code for the nametag:<div style="width: 300px"> <div class="flex items-center border rounded"> <img class="flex-none mr1" src="http://i.imgur.com/KveOp9g.png" alt="Scooby Doo"> <div> <h1 class="m0">Scooby Dooh1> <small class="caps">Pet Detectivesmall> div> div>div>We just created a visual component that looks
kind of custom, without writing any CSS ourselves. Pretty neat, huh? Feel free to dive into Basscss' documentation to learn even more, so your applications can take on a whole new look!Resources
Basscss