CSS Frameworks¶

Based on these overview we’ll work with Bulma.

It’s easy to get started
It does not need JavaScript
It’s not as big as Bootstrap

Let’s have a look at the video on the page to see what a css framework/ Bulma in particular is/ does.

Bulma is advertised with “No CSS knowledge required”. This is true as we just need to know the class names that we have to insert into our html document to use the external CSS.

Sublime package¶

There is a package for Sublime that will help to insert the class names through autocompletions: Bulma CSS Framework Autocomplete

Starter¶

Create a new project folder and use the starter template as index.html.

If you prefer working with local files or the CDN does not work with your environment, download the css file from the page and include it into the <head>.

Inspect the result to see what the css file of Bulma does.

See the chapters Section and Container.

Insert your own stylesheet and override some of the properties set by Bulma.

Columns¶

The main functionality of most frameworks is a responsive layout, mostly with columns.

Columns

Navbar¶

A navbar which is hidden on mobile phones is a very common layout element. We could consider to nest it into a .container div.

Navbar

A navbar requires some JavaScript to function. Bulma provides a script that we can insert into our html file.

JavaScript Code

It’s recommended to embedd it into the bottom of the <body>:

<html>
<!-- head -->
<body>

<!-- content of the page -->

<!-- JavaScript at the bottom of the body -->
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {

  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {

      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');

    });
  });

});
</script>
</body>
</html>

Images¶

Images

Erzähle (dich selbst) mit Code

CSS Frameworks

Contents