Bootstrap 3 – Creating a blog layout with the Bootstrap Grid mixins and variables

Let’s create a blog layout using Bootstrap mixins and variables:

  1. We start with a basic HTML document containing the Bootstrap CSS file. Then, we add the relevant content to it and move step by step in order to understand how it all works.

    Take a look at the following code to understand this better:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Using Bootstrap Grid Variables and Mixins </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
      </head>
      <body>
      </body>
    </html>
  2. Now, let’s define the blog document structure. In the <header> tag, we define the header with the blog title and description. Do not mix your thoughts about <header> with <head>; both are different. We define the site-header class for the header class:
    <header >
        <h1>Using variables and mixins to create a grid layout</h1>
    </header>
  3. Now that we have defined the blog title, we move on to the next part. At the bottom of the page, we add the copyright notice and assign the site-footer class to it:
    <footer >
        Copyright &copy; 2014
    </footer>
  4. Both the footer and header will be wrapped in a root <div> element with the CSS class page. The blog post will be the <article> HTML5 element with the post title in a <header> element followed by the post content and all the post metadata in a <footer> element. We add the "main" ARIA role to the article to mark it as the main section of our HTML document.

    Note

    For readers who are unaware of ARIA and its roles, in-depth information can be found at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA and http://www.w3.org/TR/wai-aria/roles.

    The full HTML code for the article will be the following:

    <article role="main" >
      <header>
        <h2>Packt: Always finding a way</h2>
      </header>
      <div>
        <p>
          Packt is one of the most prolific and fast-growing tech book publishers in the world. Originally focused on open source software, Packt pays a royalty on relevant books directly to open source projects. These projects have received over $400,000 as part of Packt's Open Source Royalty Scheme to date.
        </p>
        <p>
          Our books focus on practicality, recognising that readers are ultimately concerned with getting the job done. Packt's digitally-focused business model allows us to publish up-to-date books in very specific areas.
        </p>
        <p>
          With over 1000 books published, Packt now offers a subscription service. This app and a PacktLib subscription now makes finding the information you need easier than ever before.
        </p>
      </div>
      <footer>
        <p>Posted on: 25-October-2014</p>
        <p>
          Tagged: Packt, PacktLib, Packt Mobile Browser App.
        </p>
      </footer>
    </article>
  5. The sidebar will show you the title of the recent posts and the date archives. They will be wrapped in a <div> element with the ARIA role complementary in order to show you that the sidebar is independent of but complementary to the main content. Each section of the sidebar will be put in an <aside> element and will use an <h3> element for its heading:
    <div role="complementary">
        <aside>
        <h3>Recent Posts</h3>
        <ul>
            <li><a href="http://www.packtpub.com/news-center"> Packt News Center </a></li>
            <li><a href="http://www.packtpub.com/support-complaints-and-feedback">Video Support</a></li>
            <li><a href="https://careers.packtpub.com/"> Packt Careers </a></li>
        </ul>
        </aside>
        <aside>
        <h3>Archives</h3>
        <ul>
            <li><a href="">March 2014</a></li>
            <li><a href="">June 2014</a></li>
            <li><a href="">July 2014</a></li>
        </ul>
        </aside>
    </div>
  6. The post and sidebar will be wrapped in a <div> element with the CSS class content, which we will put between the header and footer elements. The resulting HTML document will be the following:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap Grid Variables and Mixins </title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
      <div class="page">
        <header class="site-header">
          <h1>Using variables and mixins to create a grid layout</h1>
        </header>
        <div class="content">
          <article role="main" >
            <header>
              <h2>Packt: Always finding a way</h2>
            </header>
            <div>
            <p>
              Packt is one of the most prolific and fast-growing tech book publishers in the world. Originally focused on open source software, Packt pays a royalty on relevant books directly to open source projects. These projects have received over $400,000 as part of Packt's Open Source Royalty Scheme to date.
            </p>
            <p>
              Our books focus on practicality, recognising that readers are ultimately concerned with getting the job done. Packt's digitally-focused business model allows us to publish up-to-date books in very specific areas.
            </p>
            <p>
              With over 1000 books published, Packt now offers a subscription service. This app and a PacktLib subscription now makes finding the information you need easier than ever before.
            </p>
          </div>
          <footer>
            <p>Posted on: 25-October-2014</p>
            <p>
              Tagged: Packt, PacktLib, Packt Mobile Browser App.
            </p>
          </footer>
    
          </article>
            <div role="complementary">
              <aside>
                <h3>Recent Posts</h3>
                <ul>
                  <li><a href="http://www.packtpub.com/news-center"> Packt News Center </a></li>
                  <li><a href="http://www.packtpub.com/support-complaints-and-feedback">Video Support</a></li>
                  <li><a href="https://careers.packtpub.com/"> Packt Careers </a></li>
                </ul>
              </aside>
              <aside>
                <h3>Archives</h3>
                <ul>
                  <li><a href="">March 2014</a></li>
                  <li><a href="">June 2014</a></li>
                  <li><a href="">July 2014</a></li>
                </ul>
              </aside>
            </div>
          </div>
    
        <footer >
          Copyright &copy; 2014
        </footer>
      </div>
    </body>
    </html>

The output of the code upon execution will be as follows:

Styling the blog

We will now build the layout of the grid using some Bootstrap variables and mixins:

  1. Create a style.less file in the css directory. Copy Bootstrap’s less files from the unzipped source code folder and paste them into the css folder within a directory called bootstrap. The css folder will look as shown in the following screenshot:
  2. The bootstrap file inside the css folder contains the less source code files, including the bootstrap.less file. The contents of the bootstrap folder inside the css folder will look as shown in the following screenshot:
  3. Open the style.less file in a notepad or your favorite editor. The next step will be to import bootstrap.less using the following line to include bootstrap.less file in it:
    @import "bootstrap/bootstrap.less";
  4. Then, we center the root <div> element (the element with the .page CSS class) on the screen and add some width to it. To center the element, we use the .container-fixed() Bootstrap mixin. This is the one that Bootstrap uses internally in the .container CSS class. We add the mixin in our LESS file as follows:
    .page {
      .container-fixed();
    }

    After we add the mixin to the root <div> element, the element will still occupy the full width of the screen. This behavior is desirable on phone screens, but it’s not what we want on tablets and desktop screens.

  5. We then set the maximum width to 728 px for tablets and 940 px for desktop screens by targeting these device screens with Media Queries.

    The following LESS code will target the tablets. Notice the use of the @screen-tablet LESS variable, which is used by Bootstrap to avoid hardcoding the tablet width everywhere. By using the @screen-tablet variable, the value can be easily changed in the future without having to find every instance where it’s used:

    @media screen and (min-width: @screen-tablet) {
      .page {
        max-width: 728px;
      }
    }
  6. To set the maximum width on the desktop, we add the following code to our style.less file. We use the @screen-desktop variable for the desktop width in the same vein as @screen-tablet is used in the preceding code:
    @media screen and (min-width: @screen-desktop) {
      .page {
        max-width: 940px;
      }

    There are other variables that are used by Bootstrap to specify the screen widths:

    • For phone screens, there’s the @screen-phone variable, which is an alias of @screen-tiny. Its default value is 480 px.
    • For tablet screens, there’s the @screen-tablet variable, which is an alias of @screen-small. Its default value is 768 px.
    • For desktop screens, there’s the @screen-desktop variable, which is an alias of @screen-medium. Its default value is 992 px.
    • For large desktop screens, there’s the @screen-large-desktop variable, which is an alias of @screen-large. Its default value is 1200 px.
  7. After centering and adding a width to the root element, we align the blog post and sidebar in two columns. The blog post will be in the left column, while the sidebar will be in the right one.

    We make the <div> element that is wrapping the blog post and sidebar behave like the default Bootstrap row using the Bootstrap mixin.

    The .make-column()Bootstrap mixin will be used to create the columns. It accepts one parameter, which is the number of grid units that the column will take.

    For example, .make-md-column(6) will make the element where the mixin is added span 6 units for desktops. This is the same as adding the col-md-6 CSS class.

    We will also use the .make-column-offset()Bootstrap mixin to add offsets to columns. It also accepts a parameter. The .make-md-column-offset(1) attribute is the same as using the col-md-offset-1 CSS class.

  8. We set the width of the blog post column to 8 units and the width of the sidebar to 3 units. We also add an offset of 1 unit to the sidebar:
    article[role=main] {
      .make-md-column(8);
    }
    
    div[role=complementary] {
      .make-md-column(3);
      .make-md-column-offset(1);
    }

    Now, the columns have been created.

  9. Next, we need to align the header and footer. Therefore, we will add paddings to their left and right. The paddings will be half the width of gutter:
    .site-header,
    .site-footer {
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  10. We also add a padding to the top of the footer in order to separate it from the content area:
    .site-footer {
      padding-top: 30px;
    }

    Now that we have used all the styles we needed, let’s take a look at the style.less file:

    @import "bootstrap/bootstrap.less";
    
    .page {
      .container-fixed();
    }
    
    @media screen and (min-width: @screen-tablet) {
      .page {
        max-width: 728px;
      }
    }
    
    @media screen and (min-width: @screen-desktop) {
      .page {
        max-width: 940px;
      }
    }
    
    .content {
      .make-row();
    }
    
    article[role=main] {
      .make-md-column(8);
    }
    
    div[role=complementary] {
      .make-md-column(3);
      .make-md-column-offset(1);
    }
    
    .site-header,
    .site-footer {
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
    
    .site-footer {
      padding-top: 30px;
    }
  11. Using WinLess, we will convert the style.less file to style.css in a manner that is similar to how we converted the LESS file to CSS in Chapter 2, Installing and Customizing Bootstrap. Then, we will include the style.css file in our main HTML document after including the bootstrap.css file, as we need style.css to override the default bootstrap code.

    Thus, the initial part of the HTML document will look like this:

The output of the code upon execution will be as follows:

You have now learned how to use variables and mixins to create a semantic layout.

Comments are closed.