This website stores cookies on your computer. These cookies are used to collect information about how you interact with the website and allows us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about visitors to this website. If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference not to be tracked.
Blog > Bootstrap 4 > Make it Pretty

Make it Pretty

I have some content now but the site looks terrible. I needed to refresh myself on html5 and CSS and introduce myself to Sass. There are tutorials on all of these languages over at w3schools. I'm pretty sure w3schools is as old as the internet. As well as reading up on Sass at w3schools, it being completely new to me, I also read the book Pragmatic Guide to Sass 3 by Michael Lintorn Catlin. The book explores Sass a little differently to w3schools. The book takes things a little slower as well as giving some great ideas about how to organise your project and looks at frameworks to take you a little bit further then w3schools. It is worth a read especially if you are like me and new to Sass if nothing more than to get a second run over the subject and to make sure everything has stuck.

Another framework I am looking at is Bootstrap. I originally looked at Bootstrap about five years ago, when it had just reached version 3 and was written in less. Bootstrap is now at version 4 and written in Sass, which fits nicely into what I just read up on. Again there are tutorials on w3schools as well as the Bootstrap website. I think that with Bootstrap now being at version 4 and no longer written in less the Middleman extension Bootstrap Helpers (BH) is now redundant. Perhaps I am wrong or naive, there may be something I am missing that makes BH easier to use than Bootstrap 4, but I am going to take a punt at Bootstrap 4.

Add Bootstrap

As a starting point, at a minimum, read the Introduction and Theming sections of the Bootstrap website.

Taking the basic Middleman blog project, which I first looked at in the second post

mkdir  ~/middleman_blog_project
cd ~/middleman_blog_project
middleman init --template=blog

As directed in the Bootstrap introduction add the JavaScript to the bottom of the page. In the case of the Middleman project this would be in layout.erb

...
    <h3>By Year</h3>
    <ol>
      <% blog.articles.group_by {|a| a.date.year }.each do |year, articles| %>
        <li><%= link_to "#{year} (#{articles.size})", blog_year_path(year) %></li>
      <% end %>
    </ol>
    </aside>

    <!--bootstrap javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
</html>

Next download and unzip the Source files of Bootstrap. Using what I read in the Pragmatic Guide to Sass 3 and the file structure section of the Theming Bootstrap page I created the following file structure and coped in the unzipped files.

tree ~/middleman_blog_project/source/stylesheets

~/middleman_blog_project/source/stylesheets
├── bootstrap
│   └── scss
│       ├── _alert.scss
│       ├── _badge.scss
│       ├── _breadcrumb.scss
│       ├── _button-group.scss
│       ├── _buttons.scss
│       ├── _card.scss
│       ├── _carousel.scss
│       ├── _close.scss
│       ├── _code.scss
│       ├── _custom-forms.scss
│       ├── _dropdown.scss
│       ├── _forms.scss
│       ├── _functions.scss
│       ├── _grid.scss
│       ├── _images.scss
│       ├── _input-group.scss
│       ├── _jumbotron.scss
│       ├── _list-group.scss
│       ├── _media.scss
│       ├── _mixins.scss
│       ├── _modal.scss
│       ├── _nav.scss
│       ├── _navbar.scss
│       ├── _pagination.scss
│       ├── _popover.scss
│       ├── _print.scss
│       ├── _progress.scss
│       ├── _reboot.scss
│       ├── _root.scss
│       ├── _tables.scss
│       ├── _tooltip.scss
│       ├── _transitions.scss
│       ├── _type.scss
│       ├── _utilities.scss
│       ├── _variables.scss
│       ├── bootstrap-grid.scss
│       ├── bootstrap-reboot.scss
│       ├── bootstrap.scss
│       ├── mixins
│       │   ├── _alert.scss
│       │   ├── _background-variant.scss
│       │   ├── _badge.scss
│       │   ├── _border-radius.scss
│       │   ├── _box-shadow.scss
│       │   ├── _breakpoints.scss
│       │   ├── _buttons.scss
│       │   ├── _caret.scss
│       │   ├── _clearfix.scss
│       │   ├── _float.scss
│       │   ├── _forms.scss
│       │   ├── _gradients.scss
│       │   ├── _grid-framework.scss
│       │   ├── _grid.scss
│       │   ├── _hover.scss
│       │   ├── _image.scss
│       │   ├── _list-group.scss
│       │   ├── _lists.scss
│       │   ├── _nav-divider.scss
│       │   ├── _pagination.scss
│       │   ├── _reset-text.scss
│       │   ├── _resize.scss
│       │   ├── _screen-reader.scss
│       │   ├── _size.scss
│       │   ├── _table-row.scss
│       │   ├── _text-emphasis.scss
│       │   ├── _text-hide.scss
│       │   ├── _text-truncate.scss
│       │   ├── _transition.scss
│       │   └── _visibility.scss
│       └── utilities
│           ├── _align.scss
│           ├── _background.scss
│           ├── _borders.scss
│           ├── _clearfix.scss
│           ├── _display.scss
│           ├── _embed.scss
│           ├── _flex.scss
│           ├── _float.scss
│           ├── _position.scss
│           ├── _screenreaders.scss
│           ├── _shadows.scss
│           ├── _sizing.scss
│           ├── _spacing.scss
│           ├── _text.scss
│           └── _visibility.scss
└── scss
    ├── components
    │   ├── _body.scss
    │   └── _links.scss
    ├── globals
    │   ├── _colors.scss
    │   ├── _mixins.scss
    │   └── _variables.scss
    ├── main.css.scss
    └── pages
        ├── _blog.scss
        └── _index.scss

8 directories, 91 files

Add the compiled CSS

None of the files above get included in your build until you import them so you don't need to worry about you project getting bloated, but they are ready for you when you want them. We need to reference the CSS, this is added in the <head> tag of the layout.erb file.

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="/stylesheets/scss/main.css" rel="stylesheet" />

    <meta charset="utf-8" />
    ...
  </head>
...
</html>

Import what we want to use

The file main.css.scss needs to look something like this:

/* My variables */
@import "globals/variables";

/*required*/
@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";

/*Optional*/
@import "../bootstrap/scss/reboot";
@import "../bootstrap/scss/type";
@import "../bootstrap/scss/code";
@import "../bootstrap/scss/card";
@import "../bootstrap/scss/utilities";
@import "../bootstrap/scss/grid";

My approach was to add in all of the required, they are required after all and then add the optional files one at time and play with them each a little. You may notice that the optional file names have corresponding sections in Bootstrap documentation. For instance reboot or type.

Takeaways

Not a massive post but a lot of time was spent reading. The book is a worthwhile purchase but the websites should be enough. Do the reading, start small and play.

I personally haven't got my head round mixins yet. More reading and playing required for me too.