Lightweight CSS Framework For Small Applications – softframecss

Preview:

Description:

softframecss is a super tiny, pretty clean, CSS-only front-end framework designed for mobile-first web applications.

How to use it:

1. Insert the main stylesheet into the document and done.

<link href="css/softframe.css" rel="stylesheet" />

2. Typography.

<h1> This is text with <span class="sf_buttom light-gray">h1</span></h1>
<h2> This is text with <span class="sf_buttom light-gray">h2</span></h2>
<h3> This is text with <span class="sf_buttom light-gray">h3</span></h3>
<h4> This is text with <span class="sf_buttom light-gray">h4</span></h4>
<h5> This is text with <span class="sf_buttom light-gray">h5</span></h5>
<h6> This is text with <span class="sf_buttom light-gray">h6</span></h6>
<p>This is paragraphy <span class="sf_buttom light-gray">p</span></p>

3. Buttons.

<button class="sf_buttom light-gray">Button</button>
<button class="sf_buttom dark-gray">Button</button>
<button class="sf_buttom black">Button</button>
<button class="sf_buttom success">Button</button>
<button class="sf_buttom danger">Button</button>
<button class="sf_buttom warning">Button</button>

4. Badges.

<button class="sf_buttom blue"> cart <span class="sf_badge white">2</span> </button>
<button class="sf_buttom dark-gray"> messages <span class="sf_badge white">12</span> </button>
<button class="sf_buttom danger"> likes <span class="sf_badge white">34</span> </button>

5. Breadcrumb.

<nav class="sf_breadcrumb">
  <ul>
    <li>Music</li>
    <li>Rock</li>
    <li>Wolves At The Gate</li>
    <li>Heralds</li>
  </ul>
</nav>

6. Grid layout.

<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>
<div class="sf_card sf1">
  <h3 class="text-center ps5"> sf1 </h3>
</div>

7. Form fields.

<form action="" class="sf_form">
  <fieldset> 
      <legend> fieldset</legend>
      <ul>
          <li>assigns <strong>sf_input</strong> to each input </li>
          <li>each <strong>sf_input</strong> must contain a <strong>label</strong> and an <strong>input</strong></li>
          <li>the <strong>inputs</strong> inherit width from <strong>sf_input</strong></li>
      </ul>
      <div class="sf12_i">
          <div class="sf_input sf5_i">
              <label for="name">Name</label>
              <input type="text" name="name">
          </div>
          <div class="sf_input sf5_i">
              <label for="surname">Surname</label>
              <input type="text" name="surname">
          </div>
          <div class="sf_input sf2_i">
              <label for="age">Age</label>
              <input type="text" name="age">
          </div>
      </div>
      <div class="sf12_i">
          <div class="sf_input sf1_i">
              <label for="job">Job</label>
              <input type="text" name="job">
          </div>
          <div class="sf_input sf3_i">
              <label for="company">Company</label>
              <input type="text" name="company">
          </div>
          <div class="sf_input sf3_i">
              <label for="employee">Employees</label>
              <input type="text" name="employee">
          </div>
          <div class="sf_input sf5_i">
              <label for="tags">Tags</label>
              <input type="text" name="tags">
          </div>
      </div>
      <div class="sf12_i">
          <button class="sf_buttom success">Submit brow</button>
      </div>
  </fieldset>
</form>

8. Modal.

<label class="sf_buttom dark-gray" for="modal">Open modal</label>
<input class="sf_modal_state" id="modal" type="checkbox" hidden>
<div class="sf_modal">
  <label class="sf_modal_bg" for="modal"></label>
  <div class="sf_modal_inner">
      <label class="sf_modal_close" for="modal"></label>
      <h2>Hello, i'm modal</h2>
      <p>
          this project is Brazilian
      </p>
  </div>
</div>