Frame CSS

Frame CSS is a classless framework based on Pimer CSS.

Content

Usage
Elements
- Blockquote
- Button
- Code
- Form
- Headings
- Image
- List
- Table
- Text

Usage

To use the framework, simply add a link to it in the <head> tag:

<html>
  <head>
    ...
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/freearhey/frame-css/dist/frame-css.min.css">
  </head>
  <body>
    ...
  </body>
</html>

Elements

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptatem.

<blockquote>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptatem.
</blockquote>

Button

<button>Button</button>

Code

console.log('Hello World')

<pre>
  <code>
    console.log('Hello World')
  </code>
</pre>

Inline code snippet var foo = "bar";

Inline code snippet <code>var foo = "bar";</code>

Form

<form>
  <p>
    <label for="example-text">Input</label><br>
    <input type="text" value="Example Value" id="example-text" />
  </p>         
  <p>
    <label for="example-select">Select</label><br>
    <select id="example-select">
      <option>Choose an option</option>
      <option>GitHub</option>
      <option>GitLab</option>
      <option>Bitbucket</option>
    </select>
  </p>          
  <p>
    <label for="example-textarea">Textarea</label><br>
    <textarea id="example-textarea"></textarea>
  </p>          
  <p>
    <label><input type="checkbox" /> Checkbox</label>
  </p>
  <p>
    <label><input type="radio" id="option1" name="radio" checked /> Option 1</label><br>
    <label><input type="radio" id="option2" name="radio" /> Option 2</label>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

Headigns

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Image

kitty

<img src="https://placekitten.com/g/1200/600" alt="kitty">

List

This is an unordered list
This is an unordered list
This is an unordered list

<ul>
  <li>This is an unordered list</li>
  <li>This is an unordered list</li>
  <li>This is an unordered list</li>
</ul>

This is an ordered list
This is an ordered list
This is an ordered list

<ol>
  <li>This is an ordered list</li>
  <li>This is an ordered list</li>
  <li>This is an ordered list</li>
</ol>

TMNT
- Leonardo
- Michelangelo
- Donatello
- Raphael

<ul>
  <li>
    TMNT
    <ul>
      <li>Leonardo</li>
      <li>Michelangelo</li>
      <li>Donatello</li>
      <li>Raphael</li>
    </ul>
  </li>
</ul>

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Table

Artist	Album	Year
Michael Jackson	Thriller	1982
Prince	Purple Rain	1984

<table>
  <thead>
    <tr>
      <th>Artist</th>
      <th>Album</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Michael Jackson</td>
      <td>Thriller</td>
      <td>1982</td>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Purple Rain</td>
      <td>1984</td>
    </tr>
  </tbody>
</table>

Text

Normal

Italic

Bold

Emphasized

Small

<p>Normal</p>
<p><i>Italic</i></p>
<p><b>Bold</b></p>
<p><em>Emphasized</em></p>
<p><small>Small</small></p>