CSS Libraries
Last updated
Last updated
When creating an application, we sometimes start our styling from scratch. Another way of styling our application, though, would be to use frameworks — CSS that has already been written for us. By doing so, we don't have to write any (or much, at least) CSS ourselves. This is both a blessing and a curse: we save a lot of time by following the conventions and styling of the framework, but we give up customizability.
Usually, CSS frameworks are used to either quickly mock up a front-end for an application prototype, or if the developer isn't particularly inclined to write their own CSS. Since CSS is kind of out of scope for this course, we'll stick to using frameworks for now. This will allow us to completely focus on our JavaScript, instead of fiddling too much with HTML and CSS. This lesson focuses on showing the high-level features of Basscss — feel free to use the links below to explore at your own pace.
Frameworks provide us with a whole slew of classes that we can use to style our application. Classes allow us to reuse styling across several components. There are usually also utility classes that provide us with handy styles, like aligning text, rounding corners, and so on.
Basscss is a very lightweight CSS framework that focuses on sane defaults and more complex layout possibilities. It's not an all-in-one framework like Bootstrap or Foundation, but it will help us to help lay out the application in a better way. It doesn't make our buttons look fancy or anything like that, but we're not concerned with that right now.,
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!ResourcesBasscss