Main layouts - Beer CSS Tips #4

#webdev #ui #css #ux

Hello,

I want to share a serie of posts containing some tips of Beer CSS. Beer CSS is a new framework around, based on (not restricted to) Material Design 3. Material Design 3 is a design system created by Google. In this post, we will learn about the main layout. The main layout is the basic structure of your page.

If you don't known the concept of settings, elements and helpers used by Beer CSS, you can read this page.

1) First, you need to create a main element. Use responsive helper to be responsive with other elements around.

<main class="responsive"></main>

2) You can create a nav element as navigation rail. Use left and right helpers to set the position. Navigation rail must be placed before all other elements.

<nav class="left">
  <a>
    <i>home</i>
    <div>Home</div>
  </a>
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
  <a>
    <i>share</i>
    <div>Share</div>
  </a>
</nav>

3) If you want a navigation drawer, just add the drawer helper to nav element. Navigation drawer must be placed before all other elements.

<nav class="left drawer">
  <a>
    <i>home</i>
    <div>Home</div>
  </a>
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
  <a>
    <i>share</i>
    <div>Share</div>
  </a>
</nav>

4) Add the header and footer elements as you wish. By default header and footer elements has a background color. Add the transparent helper to set the background color as transparent.

<header class="transparent"></header>

<footer class="transparent"></footer>

5) Now combine all to generate the main layout of your page. The semantic HTML helps a lot here.


<nav class="left">
  <a>
    <i>home</i>
    <div>Home</div>
  </a>
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
  <a>
    <i>share</i>
    <div>Share</div>
  </a>
</nav>

<header class="transparent"></header>

<main class="responsive"></main>

<footer class="transparent"></footer>

The helpers of Beer CSS can be used in any element. This makes the framework very customizable. It has the same logic and names in all ways. This makes the Beer CSS very easy to understand and reuse. I made a codepen to see some random main layout created with Beer CSS here.

Hope you enjoy this article. Thanks for read!

Beer CSS:
https://www.beercss.com

Material Design 3:
https://m3.material.io/

Codepen:
https://codepen.io/leo-bnu/pen/NWmmmMd

About settings, elements and helpers used by Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md