Join Jen Kramer for an in-depth discussion in this video What are Bootstrap and LESS?, part of Bootstrap 3: Customizing with LESS.
Bootstrap is an open source from a responsive designed framework. Originally created by twitter, and now an open source web development project. Open source means the source code is available to download and modified. And in this case, it's also free. Front-end refers to the client side of the website. That's the part of the website that's display on the browser window. Responsive design is a technique which allows a single HTML document to respond to the screen size in which it's being viewed, adapting it's look accordingly.
A framework is a bunch of code that's been written for you already, which you can use to build your website. You can learn more about Bootstrap at GetBootstrap.com. Hopefully, you've already watched this video, Up and Running with Bootstrap 3, one of my other courses here at lynda.com if you aren't familiar with Bootstrap already. In the Up and Running with Bootstrap 3 course, I went through the basics of Bootstrap, but I didn't get much into customizing the CSS. In Bootstrap 3, adding interactivity to your site, we did add some custom styling here and there on the page.
In this case, the styling was done via standard CSS. We created a separate custom.css file and wrote the styles there, including the overrides for the existing bootstrap styles. That might leave many of you wondering what's LESS. LESS is a CSS pre-processor. What does that mean? Consider a standard CSS file for a web site. You've picked out a few colors and some standard spacing for elements on that page. Using plain old CSS, you have to type in those values, over and over again.
If you want to change that shade of blue, in how many places do you have to change that in your style sheet? LESS centralizes those variables so you can change the color or padding in one place and it updates everywhere on your website. Since this concept of a variable is foreign to CSS you'll write your style sheets using the less syntax. Then compile it, which is the geek way of say of transforming it into regular CSS that you can use on your site. You can read more about LESS on their website, lesscss.org.
If you've never worked with LESS before you can always check out Joe Marini's great course on LESS and Sass before watching this video. LESS and Sass are both CSS preprocessors. Do essentially the same job and work mostly the same kind of way. Although their syntax is different. Last is a Java script based CSS preprocessor that has historically been used in bootstrap. Foundation however preferred Sass, which runs based on a ruby preprocessor. Ruby is a fairly well known programming language.
Bootstrap also has Sass files available to it. I'll address those files in another video. To work with Bootstrap in less, we'll need two more pieces of technology. One is a text editor. I'll be using Sublime Text Two, but you can use any editor you want, like Dreamweaver, Baby Edit, Apptana and so forth. If you're following me closely and want to use Sublime Text Two. I'll show you how to download it and install it in another video. The other piece of software we'll need is a compiler for our LESS files.
I'll be using Prepros, which is here at alphapixels./prepros. Prepros compile less and sends files to CSS that the browser can read. I'll show you how to download, and install, and configure Prepros in another video. Now, that you understand some of the terminology and technology behind Bootstrap, let's get this technologies installed on your computer.
- Setting up your working environment for Bootstrap and LESS
- Understanding the LESS file structure
- Creating and manipulating LESS variables
- Working with LESS mixins
- Creating custom styles using mixins and variables