index.html

styles.css

script.js

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Semantic UI Template</title>
        <link rel="stylesheet" href="styles.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
        
      </head>
      <body>
        <div class="main">
           <p>Hello World !.</p>
          <button id="hi" class="button button-outline">Say Hi  !</button>
          <h5 id="alert" style="display:none">Hello !</h5>
        </div>
        <script src="script.js"></script>
      </body>
    </html>

Milligram online editor

Write, Run & Share Milligram code online using OneCompiler's Milligram online editor for free. It's one of the robust, feature-rich online editor for Milligram. Getting started with the OneCompiler's Milligram online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Milligram' and start writing code to learn and test online instantly.

About Milligram

Milligram is a minimalist CSS framework. It's very useful for smaller projects which only need basic stuff.

Syntax help

Button

<!-- Default Button -->
<a class="button" href="#">Default Button</a>

<!-- Outlined Button -->
<button class="button button-outline">Outlined Button</button>

<!-- Clear Button -->
<input class="button button-clear" type="submit" value="Clear Button">

Lists

<!-- Unordered list -->
<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
</ol>

<!-- Description list -->
<dl>
  <dt>Description list item 1</dt>
  <dd>Description list item 1.1</dd>
</dl>

Forms

<form>
  <fieldset>
    <label for="nameField">Name</label>
    <input type="text" placeholder="Provide Name" id="nameField">
    <label for="genderField">Gender</label>
    <select id="genderField">
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
    <div class="float-right">
      <input type="checkbox" id="confirmField">
      <label class="label-inline" for="confirmField">Send a copy to yourself</label>
    </div>
    <input class="button-primary" type="submit" value="Send">
  </fieldset>
</form>

Tables

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Ava</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

Grid

<div class="container">

  <div class="row">
    <div class="column">.column</div>
    <div class="column">.column</div>
    <div class="column">.column</div>
  </div>

  <div class="row">
    <div class="column">.column</div>
    <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
  </div>

</div>