yerba.css v1.0.1

Key features

• No theme specific styles
• A basic standards compliant classless grid
• Responsive, widescreen- and mobile-friendly

The goal of this project is to make itself obsolete.

Browser support

• Latest Chrome
• Latest Firefox
• Latest Safari

Usage

@import 'https://cdn.jsdelivr.net/npm/modern-normalize/modern-normalize.min.css';
@import 'https://cdn.rawgit.com/mblode/marx/master/css/marx.min.css';
@import 'http://cdn.jsdelivr.net/npm/yerba.css/yerba.min.css';

Basic HTML Template

<main>
    <header>The header</header>
    <article>
        <h1>Main article area</h1>
        <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
    </article>
    <nav>
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </nav>
    <aside>Sidebar</aside>
    <!--<section>Advertising</section>-->
    <footer>The footer</footer>
</main>

FAQ

Do you have a demo?

The grid works like this:

+--------------------+        +----------------------------------------+        +----------------------------------------------------+
|                    |        |           header                       |        |                header                              |
|                    |        +--------------+-------------------------+        +-------------------+--------------------+-----------+
|    article         |        |              |                         |        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
+--------------------+        |   nav        |    article              |        |                   |                    |           |
|                    |        |              |                         |        |    nav            |    article         |   aside   |
|                    |        |              |                         |        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
|    nav             |        |              +-------------------------+        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
|                    |        |              |    aside                |        |                   |                    |           |
|                    |        |              |                         |        |                   |                    |           |
|                    |        +--------------+-------------------------+        +-------------------+--------------------+-----------+
+--------------------+        |           footer                       |        |                footer                              |
|                    |        +----------------------------------------+        +----------------------------------------------------+
|                    |
|    aside           |
|                    |
|                    |
|                    |
+--------------------+

Can you provide Sass, Less, etc, ports?

There's absolutely no reason to have separate ports for these. They are just CSS supersets and can import CSS directly.

License

MIT