About Semstrap
Many developers turn to frontend frameworks just to easily improve the looks of their web projects. Unfortunately this approach results in a loot of framework-specific code like class names and wrapping elements being added to your HTML. Sometimes you even end up adding a bit of code from a another web project that relies on a different front end framework and you get a mess of dependencies and conflicting class names.
Semstrap styles only targets elements. When you want to use it to style a form element you just add the element like so:
<form>
<label for="inputEmail">Email address</label>
<input id="inputEmail" type="email">
</form>
... as opposed to:
<form class="form form-modifier">
<div class="form__wrapper form__wrapper-modifier">
<label class="form__wrapper__label" for="exampleInputEmail1">Email address</label>
<input class="form__wrapper__input form__wrapper__input-modifier" type="email" id="exampleInputEmail1">
</div>
</form>
Check it out on Github: https://github.com/iamfrank/semstrap
Using it
If you want to use Semstrap in your project, just download semstrap.css and add it to your project's head section:
<link rel="stylesheet" type="text/css" href="semstrap.css">
That's it. Take a look beneath to see the cool stuff you can build with pure HTML elements and Semstrap.