DEV Community

Cover image for Main layouts - Beer CSS Tips #4
Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister

Posted on • Updated on

Main layouts - Beer CSS Tips #4

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
<footer class="transparent"></footer>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)