A simple CSS framework for an easy start of new HTML pages.
It's not a competitor to other "big" CSS frameworks, and it's not desigend to be a competitor. It has neither special features nor does everything better. But if you find it useful for your project and helps you further - feel free to use it.
Copy the dist folder to your project and include the CSS in the HTML document. riemke.css uses the Open Sans Font, the Source Code Pro Font and Remix Icons. Please have also a glimpse into the licenses of these items (see license file).
<link rel="stylesheet" href="dist/riemke.css" />riemke.css assumes that you use the following structure in you document body.
<body>
<nav></nav>
<main></main>
<footer></footer>
</body>You use the framework by adding the desired style classes to your element.
Use <nav> with an unordered list. The active menu items gets the active class.
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</nav><nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li>
<a href="#">Products</a>
<ul class="drop">
<a href="#" class="active">Bananas</a>
<a href="#" class="active">Strawberries</a>
<a href="#" class="active">Apples</a>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="drop">
<a href="#" class="active">Thinking</a>
<a href="#" class="active">Making</a>
<a href="#" class="active">Talking</a>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</nav>Forms are automatically styled.
<div class="box info">Info!</div>
<div class="box success">Success</div>
<div class="box alert shadow">Alarm!</div>
<div class="box question shadow">Question!</div>Add margins with the margin class.
<div class="m-10">margin 10</div>
<div class="mt-20">margin top 20</div>Add paddings with the padding class.
<div class="p-10">padding 10</div>
<div class="pt-20">padding top 20</div><div class="shadow">Shadow!</div>
<div class="rounded">Rounded!</div>Creates round avatar image.
<img src="https://img.riemke.dev/200/200" class="img-avatar shadow" />Sets color and/or background-color. Choose from red, green, blue, yellow, pink, orange, purple.
<div class="bgcolor-red">red background</div>
<div class="bgcolor-green color-white">green background,white text</div>Classes for flex & float are also included.
<div class="float-root">
<div class="float-left"></div>
<div class="float-left"></div>
</div><div class="flex-row">
<div class="w-100 h-100 bgcolor-red"></div>
<div class="w-100 h-100 bgcolor-green"></div>
</div>