Frameworks:
  • 1.  Bootstrap 3.0
  • 2. Lightbox
  • FRAMEWORKS: BOOTSTRAP 3.0Make use of a nice and handy framework. Do less work!

    I want to make my website responsive. I want to make it scale down according to screen size. I will also need columns. I will likely need my navigation bar to have a drop down, and when going into the mobile version, I’d like a hamburger menu.

    It’s very typical things that will always need to be done. Because website and webdesign are evolving and the bar is set higher at a constant rate. We need good UX/UI design, good typography, mobile support, no Flash, good SEO, etc. It’s something we have to remember designing these things. And the problem is that we re-use a lot of our code. I say problem because my code isn’t always clean or optimal, because in most cases, it’s very specific to a particular project. But what if we don’t start from scratch and instead rely on a template? Well, then it has to be a very good template and it has to not always look the same. And that’s a good reason to use Bootstrap.

    I’ve always tried to stay away from it. I wright custom code for clients. That is what they pay me for. A unique design and website, which nobody in the world will have. But using Bootstrap doesn’t take that away, it just makes it easier (and mostly faster). I can make the same website, the same design in half the amount of time. However, this was after knowing Bootstrap and using it for a while, because it does take time to get used to it in the beginning.

    What is it?

    Bootstrap is a collection of CSS and JavaScript. What that means is that it provides a series of premade components/elements that you’ll need when making a website. A gallery, menu, buttons, tables, forms, panels, breadcrumbs, etc. They are fully functional, look sleek & modern and are fully responsive.

    So you do need a good knowledge of webdesign before you can start using Bootstrap. Those without this knowledge won’t be able to make it unique and your website will look like a typical Bootstrap website. You want to avoid that at all costs!

    How to use it?

    Enough talk, it’s codetime!

    What Bootstrap needs is one css file and one js file. You can download them and put them on your very own (rather small and unknown) server or you can use the much visited CDN’s out there to speed up your website when using Bootstrap. You can find the links in a lot of places but I prefer using the official ones.

    The official ones

    As a general rule, you want to apply the external css first, then your own in the head of the document. And we’ll put the js link just before the closing body tag. I’ll show it in a code example just in case you didn’t get any of that.

    <!DOCTYPE html>
    <html>
      <head>
      <title>Tutorials - Ken Van Damme</title>
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="yourownstylesheet.css">
    </head>
    <body>
     
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </body>
    </html>

    Examples

    There is really not more to it. I’ll just show you some examples on what to do with it. Using the grid system we can easily make & column layout. Use the following code:

    <div class="container">
      <div class="row">
        <div class="col-sm-4">1</div>
        <div class="col-sm-4">2</div>
        <div class="col-sm-4">3</div>
      </div>
    </div>
    1
    2
    3

    Pretty easy and not to mention fast. Another amazing thing is the existence of Glyphicons. You can choose from a wide variety of icons and they are rendered (used) as a font. I’ve been using this technique for print work for years but now we can also do it for web. You can alter the color of the icon by simply changing the text color. That on its own, is amazing! Try rolling over the icons below with your cursor.

    And here is the HTML code:

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    <span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
    <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
    <span class="glyphicon glyphicon-tint" aria-hidden="true"></span>

    And the CSS:

    .glyphicon{
      color: black;
    }
     
    .glyphicon:hover{
      color: red;
    }

    Looks easy enough right? Well a lot more where that came from. I’ll be doing more tutorials on this in the future but you can just check out the Bootstrap website for now and look at the CSS or Components page, from there, it’s all copy and paste.

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy