Milligram css framework

Developer
Filipp
Size
13,017 Kb
Views
42,504
  1. Milligram css framework Previews
  2. Milligram css framework HTML Codes
  3. Milligram css framework CSS Codes

How do I make an milligram css framework?

Demo with that sweet css framework. What is a milligram css framework? How do you make a milligram css framework? This script and codes were developed by Filipp on 21 August 2022, Sunday.

Milligram css framework Previews
IQ Test

Milligram css framework - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Milligram css framework</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { box-sizing: border-box; font-size: 62.5%;
}
body { color: #606c76; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.6em; font-weight: 300; letter-spacing: 0.01em; line-height: 1.6;
}
*,
*:after,
*:before { box-sizing: border-box;
}
blockquote { border-left: 0.3rem solid #d1d1d1; margin-left: 0; margin-right: 0; padding: 1rem 1.5rem;
}
blockquote *:last-child { margin: 0;
}
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] { background-color: #9b4dca; border: 0.1rem solid #9b4dca; border-radius: 0.4rem; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 1.1rem; font-weight: 700; height: 3.8rem; letter-spacing: 0.1rem; line-height: 3.8rem; padding: 0 3rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type='button']:hover,
input[type='button']:focus,
input[type='reset']:hover,
input[type='reset']:focus,
input[type='submit']:hover,
input[type='submit']:focus { background-color: #606c76; border-color: #606c76; color: #fff; outline: 0;
}
.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline { color: #9b4dca; background-color: transparent;
}
.button.button-outline:hover,
.button.button-outline:focus,
button.button-outline:hover,
button.button-outline:focus,
input[type='button'].button-outline:hover,
input[type='button'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='submit'].button-outline:hover,
input[type='submit'].button-outline:focus { color: #606c76; background-color: transparent; border-color: #606c76;
}
.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear { color: #9b4dca; background-color: transparent; border-color: transparent;
}
.button.button-clear:hover,
.button.button-clear:focus,
button.button-clear:hover,
button.button-clear:focus,
input[type='button'].button-clear:hover,
input[type='button'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='submit'].button-clear:hover,
input[type='submit'].button-clear:focus { color: #606c76; background-color: transparent; border-color: transparent;
}
pre { background: #f4f5f6; border-left: 0.3rem solid #9b4dca; font-family: Menlo, Consolas, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
}
code { background: #f4f5f6; border-radius: 0.4rem; font-size: 86%; padding: 0.2rem 0.5rem; margin: 0 0.2rem; white-space: nowrap;
}
pre > code { background: transparent; border-radius: 0; display: block; padding: 1rem 1.5rem; white-space: pre;
}
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 0.1rem solid #d1d1d1; border-radius: 0.4rem; box-shadow: none; box-sizing: border-box; height: 3.8rem; padding: 0.6rem 1rem; width: 100%;
}
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus { border: 0.1rem solid #9b4dca; outline: 0;
}
textarea { padding-bottom: 0.6rem; padding-top: 0.6rem; min-height: 6.5rem;
}
label,
legend { font-size: 1.6rem; font-weight: 700; display: block; margin-bottom: 0.5rem;
}
fieldset { border-width: 0; padding: 0;
}
input[type='checkbox'],
input[type='radio'] { display: inline;
}
.label-inline { font-weight: normal; display: inline-block; margin-left: 0.5rem;
}
.container { box-sizing: border-box; margin: 0 auto; max-width: 112rem; padding: 0 2rem; position: relative; width: 100%;
}
.row { display: flex; flex-direction: column; padding: 0; width: 100%;
}
.row .row-wrap { flex-wrap: wrap;
}
.row .row-no-padding { padding: 0;
}
.row .row-no-padding > .column { padding: 0;
}
.row .row-top { align-items: flex-start;
}
.row .row-bottom { align-items: flex-end;
}
.row .row-center { align-items: center;
}
.row .row-stretch { align-items: stretch;
}
.row .row-baseline { align-items: baseline;
}
.row .column { display: block; flex: 1; margin-left: 0; max-width: 100%; width: 100%;
}
.row .column .col-top { align-self: flex-start;
}
.row .column .col-bottom { align-self: flex-end;
}
.row .column .col-center { align-self: center;
}
.row .column.column-offset-10 { margin-left: 10%;
}
.row .column.column-offset-20 { margin-left: 20%;
}
.row .column.column-offset-25 { margin-left: 25%;
}
.row .column.column-offset-33,
.row .column.column-offset-34 { margin-left: 33.3333%;
}
.row .column.column-offset-50 { margin-left: 50%;
}
.row .column.column-offset-66,
.row .column.column-offset-67 { margin-left: 66.6666%;
}
.row .column.column-offset-75 { margin-left: 75%;
}
.row .column.column-offset-80 { margin-left: 80%;
}
.row .column.column-offset-90 { margin-left: 90%;
}
.row .column.column-10 { flex: 0 0 10%; max-width: 10%;
}
.row .column.column-20 { flex: 0 0 20%; max-width: 20%;
}
.row .column.column-25 { flex: 0 0 25%; max-width: 25%;
}
.row .column.column-33,
.row .column.column-34 { flex: 0 0 33.3333%; max-width: 33.3333%;
}
.row .column.column-40 { flex: 0 0 40%; max-width: 40%;
}
.row .column.column-50 { flex: 0 0 50%; max-width: 50%;
}
.row .column.column-60 { flex: 0 0 60%; max-width: 60%;
}
.row .column.column-66,
.row .column.column-67 { flex: 0 0 66.6666%; max-width: 66.6666%;
}
.row .column.column-75 { flex: 0 0 75%; max-width: 75%;
}
.row .column.column-80 { flex: 0 0 80%; max-width: 80%;
}
.row .column.column-90 { flex: 0 0 90%; max-width: 90%;
}
@media (min-width: 40rem) { .row { flex-direction: row; margin-left: -1rem; width: calc(100% + 2.0rem); } .row .column { margin-bottom: inherit; padding: 0 1rem; }
}
a { color: #9b4dca; text-decoration: none;
}
a:hover { color: #606c76;
}
dl,
ol,
ul { margin-top: 0; padding-left: 0;
}
dl ul,
dl ol,
ol ul,
ol ol,
ul ul,
ul ol { font-size: 90%; margin: 1.5rem 0 1.5rem 3rem;
}
dl { list-style: none;
}
ul { list-style: circle inside;
}
ol { list-style: decimal inside;
}
dt,
dd,
li { margin-bottom: 1rem;
}
hr { border-top: 0.1rem solid #f4f5f6; border-width: 0; margin-bottom: 3.5rem; margin-top: 3rem;
}
.button,
button { margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset { margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form { margin-bottom: 2.5rem;
}
table { width: 100%;
}
th,
td { border-bottom: 0.1rem solid #e1e1e1; padding: 1.2rem 1.5rem; text-align: left;
}
th:first-child,
td:first-child { padding-left: 0;
}
th:last-child,
td:last-child { padding-right: 0;
}
p { margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 300; margin-bottom: 2rem; margin-top: 0;
}
h1 { font-size: 4rem; letter-spacing: -0.1rem; line-height: 1.2;
}
h2 { font-size: 3.6rem; letter-spacing: -0.1rem; line-height: 1.25;
}
h3 { font-size: 3rem; letter-spacing: -0.1rem; line-height: 1.3;
}
h4 { font-size: 2.4rem; letter-spacing: -0.08rem; line-height: 1.35;
}
h5 { font-size: 1.8rem; letter-spacing: -0.05rem; line-height: 1.5;
}
h6 { font-size: 1.6rem; letter-spacing: 0; line-height: 1.4;
}
@media (min-width: 40rem) { h1 { font-size: 5rem; } h2 { font-size: 4.2rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3rem; } h5 { font-size: 2.4rem; } h6 { font-size: 1.5rem; }
}
.float-right { float: right;
}
.float-left { float: left;
}
.clearfix { *zoom: 1;
}
.clearfix:after,
.clearfix:before { content: ""; display: table;
}
.clearfix:after { clear: both;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>	<main class="wrapper">	<nav class="navigation">	<section class="container">	<ul class="navigation-list float-right">	<li class="navigation-item">	<a class="navigation-link" href="#popover-grid" data-popover>Docs</a>	<div class="popover" id="popover-grid">	<ul class="popover-list">	<li class="popover-item"><a class="popover-link" href="#getting-started" title="Getting Started">Getting Started</a></li>	<li class="popover-item"><a class="popover-link" href="#typography" title="Typography">Typography</a></li>	<li class="popover-item"><a class="popover-link" href="#blockquotes" title="Blockquotes">Blockquotes</a></li>	<li class="popover-item"><a class="popover-link" href="#buttons" title="Buttons">Buttons</a></li>	<li class="popover-item"><a class="popover-link" href="#lists" title="Lists">Lists</a></li>	<li class="popover-item"><a class="popover-link" href="#forms" title="Forms">Forms</a></li>	<li class="popover-item"><a class="popover-link" href="#tables" title="Tables">Tables</a></li>	<li class="popover-item"><a class="popover-link" href="#grids" title="Grids">Grids</a></li>	<li class="popover-item"><a class="popover-link" href="#codes" title="Codes">Codes</a></li>	<li class="popover-item"><a class="popover-link" href="#utilities" title="Utilities">Utilities</a></li>	<li class="popover-item"><a class="popover-link" href="#tips" title="Tips">Tips</a></li>	<li class="popover-item"><a class="popover-link" href="#browser-support" title="Browser Support">Browser Support</a></li>	<li class="popover-item"><a class="popover-link" href="#examples" title="Examples">Examples</a></li>	<li class="popover-item"><a class="popover-link" href="#contributing" title="Contributing">Contributing</a></li>	</ul>	</div>	</li>	<li class="navigation-item">	<a class="navigation-link" href="#popover-support" data-popover>Support</a>	<div class="popover" id="popover-support">	<ul class="popover-list">	<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram/issues/new" title="Need help?">Need help?</a></li>	<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram#license" title="License">License</a></li>	<li class="popover-item"><a class="popover-link" target="blank" href="https://github.com/milligram/milligram/releases" title="Versions">Versions</a></li>	</ul>	</div>	</li>	</ul>	</section>	</nav>	<header class="header" id="home">	<section class="container">	<h1 class="title">Milligram</h1>	<p class="description">A minimalist CSS framework</p>	</section>	</header>	<section class="container" id="why">	<h5 class="title">Why it's awesome?</h5>	<p>Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! <strong>Only 2kb gzipped!</strong> It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!</p>	<p>Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥</p>	</section>	<section class="container" id="typography">	<h5 class="title">Typography</h5>	<p>CSS3 introduces a few new units, including the <code>rem</code> unit, which stands for <em>"root em"</em>. The <code>rem</code> unit is relative to the font-size of the root element <code>&lt;html&gt;</code>. That means that we can define a single font size on the root element, and define all <code>rem</code> units to be a percentage of that. The typography has <code>font-size</code> defined in 1.6rem (16px) and <code>line-height</code> in 1.6 (24px). <strong>Milligram</strong> uses the <code>font-family</code> <a target="blank" href="https://www.google.com/fonts/specimen/Roboto" title="Roboto by Christian Robertson">Roboto</a>, created by <u>Christian Robertson</u>, and provided by Google.</p>	<div class="example">	<div class="row">	<div class="column">	<h1>Heading<span class="heading-font-size"> <code>&lt;h1&gt;</code> 5.0rem (50px)</span></h1>	<h2>Heading<span class="heading-font-size"> <code>&lt;h2&gt;</code> 4.2rem (42px)</span></h2>	<h3>Heading<span class="heading-font-size"> <code>&lt;h3&gt;</code> 3.6rem (36px)</span></h3>	<h4>Heading<span class="heading-font-size"> <code>&lt;h4&gt;</code> 3.0rem (30px)</span></h4>	<h5>Heading<span class="heading-font-size"> <code>&lt;h5&gt;</code> 2.4rem (24px)</span></h5>	<h6>Heading<span class="heading-font-size"> <code>&lt;h6&gt;</code> 1.5rem (15px)</span></h6>	</div>	</div>	</div>	<pre class="code prettyprint"><code class="code-content"><!-- Base font-size and line-height -->
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
<!-- Other elements to text markup -->
<a>Archor</a>
<em>Emphasis</em>
<small>Small</small>
<strong>Strong</strong>
<u>Underline</u>
<!-- Default Headings -->
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<!-- The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. --></code></pre>	<p>See more examples of <strong>typography</strong> <a href="typography.html" title="Examples about typography">here</a>.</p>	</section>	<section class="container" id="blockquotes">	<h5 class="title">Blockquotes</h5>	<p>The Blockquote represents a section that is quoted from another source.</p>	<div class="example">	<blockquote>	<p><em>Yeah!! Milligram is amazing.</em></p>	</blockquote>	</div>	<pre class="code prettyprint"><code class="code-content"><blockquote> <p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote></code></pre>	<p>See more examples of <strong>blockquotes</strong> <a href="blockquotes.html" title="Examples about blockquotes">here</a>.</p>	</section>	<section class="container" id="buttons">	<h5 class="title">Buttons</h5>	<p>The Button, an essential part of any user experience. Buttons come in three basic styles in Milligram: The <code>&lt;button&gt;</code> element has flat color by default, whereas <code>.button-outline</code> has a simple outline around, and <code>.button-clear</code> is entirely clear.</p>	<div class="example">	<a class="button" href="javascript: void(0)">Default Button</a>	<button class="button button-outline">Outlined Button</button>	<input class="button button-clear" type="submit" value="Clear Button">	</div>	<pre class="code prettyprint"><code class="code-content"><!-- 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">
<!-- Easily apply the .button class for button style in the anchor element. --></code></pre>	<p>See more examples of <strong>buttons</strong> <a href="buttons.html" title="Examples about buttons">here</a>.</p>	</section>	<section class="container" id="lists">	<h5 class="title">Lists</h5>	<p>The List is a very versatile and common way to display items. Milligram has three types of lists: The unordered list use <code>&lt;ul&gt;</code> element will be marked with a outline circles, the ordered list use <code>&lt;ol&gt;</code> element and your items will be marked with numbers, the description list use <code>&lt;dl&gt;</code> element and your items will not be marking, only spacings.</p>	<div class="row example">	<div class="column">	<ul>	<li>Unordered list item 1</li>	<li>Unordered list item 2</li>	</ul>	</div>	<div class="column">	<ol>	<li>Ordered list item 1</li>	<li>Ordered list item 2</li>	</ol>	</div>	<div class="column">	<dl>	<dt>Description list item 1</dt>	<dd>Description list item 1.1</dd>	</dl>	</div>	</div>	<pre class="code prettyprint"><code class="code-content"><!-- 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>
<!-- Easily change any <dl>, <ul> or an <ol> to get clear lists, number lists or outline circles. --></code></pre>	<p>See more examples of <strong>lists</strong> <a href="lists.html" title="Examples about lists">here</a>.</p>	</section>	<section class="container" id="forms">	<h5 class="title">Forms</h5>	<p>The Form has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. Milligram help to make this much easier with design focused on the user experience.</p>	<div class="example example-forms">	<form action="javascript: void(0)">	<fieldset>	<label for="nameField">Name</label>	<input type="text" placeholder="CJ Patoilo" id="nameField">	<label for="commentField">Comment</label>	<textarea placeholder="Hi CJ &hellip;" id="commentField"></textarea>	<div class="example-send-yourself-copy">	<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>	</div>	<pre class="code prettyprint"><code class="code-content"><form> <fieldset> <label for="nameField">Name</label> <input type="text" placeholder="CJ Patoilo" id="nameField"> <label for="commentField">Comment</label> <textarea placeholder="Hi CJ &hellip;" id="commentField"></textarea> <div class="example-send-yourself-copy"> <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>
<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-inline"> inside of it --></code></pre>	<p>See more examples of <strong>forms</strong> <a href="forms.html" title="Examples about forms">here</a>.</p>	</section>	<section class="container" id="tables">	<h5 class="title">Tables</h5>	<p>The Table element represents data in two dimensions or more. We encourage the use of proper formatting with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> to create a <code>&lt;table&gt;</code>. The code becomes cleaner without disturbing understanding.</p>	<div class="example">	<table>	<thead>	<tr>	<th>Name</th>	<th>Age</th>	<th>Height</th>	<th>Location</th>	</tr>	</thead>	<tbody>	<tr>	<td>Stephen Curry</td>	<td>27</td>	<td>1,91</td>	<td>Akron, OH</td>	</tr>	<tr>	<td>Klay Thompson</td>	<td>25</td>	<td>2,01</td>	<td>Los Angeles, CA</td>	</tr>	</tbody>	</table>	</div>	<pre class="code prettyprint"><code class="code-content"><table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Height</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>Stephen Curry</td> <td>27</td> <td>1,91</td> <td>Akron, OH</td> </tr> <tr> <td>Klay Thompson</td> <td>25</td> <td>2,01</td> <td>Los Angeles, CA</td> </tr> </tbody>
</table>
<!-- Prior to the creation of CSS, HTML <table> elements were often used as a method for page layout. This usage has been discouraged since HTML4, and the <table> element should not be used for layout purposes. --></code></pre>	<p>See more examples of <strong>tables</strong> <a href="tables.html" title="Examples about tables">here</a>.</p>	</section>	<section class="container" id="grids">	<h5 class="title">Grids</h5>	<p>The Grid is a fluid system with a max width of <code>112.0rem</code> <small>(1200px)</small>, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of the <strong>CSS Flexible Box Layout Module standard</strong>. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There is no restriction on number of columns, but we advise you to follow a design pattern of grid system. See more tips on best practices in the <a href="#tips" title="Tips">tips</a>.</p>	<div class="example-grid example">	<div class="container">	<div class="row">	<div class="column"><span class="column-demo">.column</span></div>	<div class="column"><span class="column-demo">.column</span></div>	<div class="column"><span class="column-demo">.column</span></div>	<div class="column"><span class="column-demo">.column</span></div>	</div>	<div class="row">	<div class="column"><span class="column-demo">.column</span></div>	<div class="column column-50 column-offset-25"><span class="column-demo">.column-50.column-offset-25</span></div>	</div>	</div>	</div>	<pre class="code prettyprint"><code class="code-content"><!-- .container is main centered wrapper -->
<div class="container"> <div class="row"> <div class="column">.column</div> <div class="column">.column</div> <div class="column">.column</div> <div class="column">.column</div> </div> <div class="row"> <div class="column column">.column</div> <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div> </div>
</div>
<!-- Every .column added inside a .row will automatically receive an equal amount of the available area. --></code></pre>	<p>See more examples of <strong>grids</strong> <a href="grids.html" title="Examples about grids">here</a>.</p>	</section>	<section class="container" id="codes">	<h5 class="title">Codes</h5>	<p>The Code element represents a fragment of computer code. Just wrap anything in a <code>&lt;code&gt;</code> and it will appear like this. if you need a block, by default, enter the <code>&lt;code&gt;</code> within the <code>&lt;pre&gt;</code> element.</p>	<div class="example">
<pre><code>.milligram { color: #9b4dca;
}
</code></pre>	</div>	<pre class="code prettyprint"><code class="code-content"><pre><code>
.milligram { color: #9b4dca;
}
</code></pre></code></pre>	<p>See more examples of <strong>codes</strong> <a href="codes.html" title="Examples about codes">here</a>.</p>	</section>	<section class="container" id="utilities">	<h5 class="title">Utilities</h5>	<p>Milligram has some functional classes to improve the performance and productivity everyday.</p>	<pre class="code prettyprint lang-html"><code class="code-content"><!-- Functional Classes -->
<!-- Clear any float -->
<div class="clearfix"> <!-- Float either directions --> <div class="float-left"></div> <div class="float-right"></div>
</div></code></pre>	<p>See more examples of <strong>utilities</strong> <a href="utilities.html" title="Examples about utilities">here</a>.</p>	</section>	<section class="container" id="tips">	<h5 class="title">Tips</h5>	<p>Tips, techniques, and best practice on using Cascading Style Sheets.</p>	<p><strong>Mobile First</strong></p>	<p>The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:</p>	<div class="example row">	<ul>	<li><strong>Mobile: </strong> 40.0rem <span class="heading-font-size">(400px)</span></li>	<li><strong>Tablet: </strong> 80.0rem <span class="heading-font-size">(800px)</span></li>	<li><strong>Desktop: </strong> 120.0rem <span class="heading-font-size">(1200px)</span></li>	</ul>	</div>	<pre class="code prettyprint lang-css"><code class="code-content">/* Mobile First Media Queries */
/* Base style */
{ ... }
/* Larger than mobile screen */
@media (min-width: 40.0rem) { ... }
/* Larger than tablet screen */
@media (min-width: 80.0rem) { ... }
/* Larger than desktop screen */
@media (min-width: 120.0rem) { ... }</code></pre>	<p>See more examples of <strong>tips</strong> <a href="tips.html" title="Examples about tips">here</a>.</p>	<p><strong>Extending The Inheritances</strong></p>	<p>The style of an element can be defined in several different locations, which interact in a complex way. It is form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.</p>	<div class="example row">	<div class="column">	<a href="javascript: void(0)" class="button">Default .button</a>	<a href="javascript: void(0)" class="button button-outline">Outlined .button</a>	<a href="javascript: void(0)" class="button button-clear">Clear .button</a>	</div>	<div class="column">	<a href="javascript: void(0)" class="button button-black">.button-black</a>	<a href="javascript: void(0)" class="button button-black button-outline">.button-black</a>	<a href="javascript: void(0)" class="button button-black button-clear">.button-black</a>	</div>	<div class="column column-20">	<a href="javascript: void(0)" class="button button-small">.button-small</a>	<a href="javascript: void(0)" class="button button-small button-outline">.button-small</a>	<a href="javascript: void(0)" class="button button-small button-clear">.button-small</a>	</div>	<div class="column">	<a href="javascript: void(0)" class="button button-large">.button-large</a>	<a href="javascript: void(0)" class="button button-large button-outline">.button-large</a>	<a href="javascript: void(0)" class="button button-large button-clear">.button-large</a>	</div>	</div>	<pre class="code prettyprint lang-css"><code class="code-content">/* Extending The Inheritances */
/* Applying color variation */
.button-black { background-color: black; border-color: black;
}
.button-black.button-outline { color: black;
}
.button-black.button-clear { color: black;
}
/* Applying size variation */
.button-small { font-size: .8rem; height: 2.8rem; line-height: 2.8rem; padding: 0 1.5rem;
}
.button-large { font-size: 1.4rem; height: 4.5rem; line-height: 4.5rem; padding: 0 2rem;
}</code></pre>	<p>See more examples of <strong>tips</strong> <a href="tips.html" title="Examples about tips">here</a>.</p>	</section>	<section class="container" id="browser-support">	<h5 class="title">Browser Support</h5>	<p>While not designed for old browsers, Milligram has support for some old versions, but we recommend using the latest versions of their browsers.</p>	<ul>	<li>Chrome <small>latest</small></li>	<li>Firefox <small>latest</small></li>	<li>IE <small>latest</small></li>	<li>Opera <small>latest</small></li>	<li>Safari <small>latest</small></li>	</ul>	<p>See more examples of <strong>browser support</strong> <a href="browser-support.html" title="Examples about browser support">here</a>.</p>	</section>	<section class="container" id="examples">	<h5 class="title">Examples</h5>	<p>You can view more examples of using Milligram.</p>	<p>	<ul>	<li><a href="getting-started.html" title="Getting Started">Getting Started</a></li>	<li><a href="typography.html" title="Typography">Typography</a></li>	<li><a href="blockquotes.html" title="Blockquotes">Blockquotes</a></li>	<li><a href="buttons.html" title="Buttons">Buttons</a></li>	<li><a href="lists.html" title="Lists">Lists</a></li>	<li><a href="forms.html" title="Forms">Forms</a></li>	<li><a href="tables.html" title="Tables">Tables</a></li>	<li><a href="grids.html" title="Grids">Grids</a></li>	<li><a href="codes.html" title="Codes">Codes</a></li>	<li><a href="utilities.html" title="Utilities">Utilities</a></li>	<li><a href="tips.html" title="Tips">Tips</a></li>	<li><a href="browser-support.html" title="Browser Support">Browser Support</a></li>	</ul>	</p>	</section>	<section class="container" id="contributing">	<h5 class="title">Contributing</h5>	<p> Help improve these docs. Open an <a target="blank" href="https://github.com/milligram/milligram/issues/new" title="Issue">issue</a> or submit a pull request.</p>	<p>	<ol>	<li>Navigate to the main page of the repository</li>	<li><a target="blank" href="https://github.com/milligram/milligram#fork-destination-box" title="Fork it!">Fork it!</a></li>	<li>Create your feature branch: git checkout -b my-new-feature</li>	<li>Commit your changes: git commit -m 'Add some feature'</li>	<li>Push to the branch: git push origin my-new-feature</li>	<li>Submit a pull request =D</li>	</ol>	</p>	</section>	<footer class="footer">	<section class="container">	<p>Designed with ♥ by <a target="blank" href="http://cjpatoilo.com" title="CJ Patoilo">CJ Patoilo</a>. Licensed under the <a target="blank" href="https://github.com/milligram/milligram#license" title="MIT License">MIT License</a>.</p>	</section>	</footer>	</main>	<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>	<script src="js/script.js"></script>	</body>
</body>
</html>

Milligram css framework - Script Codes CSS Codes

html { box-sizing: border-box; font-size: 62.5%;
}
body { color: #606c76; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.6em; font-weight: 300; letter-spacing: 0.01em; line-height: 1.6;
}
*,
*:after,
*:before { box-sizing: border-box;
}
blockquote { border-left: 0.3rem solid #d1d1d1; margin-left: 0; margin-right: 0; padding: 1rem 1.5rem;
}
blockquote *:last-child { margin: 0;
}
.button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] { background-color: #9b4dca; border: 0.1rem solid #9b4dca; border-radius: 0.4rem; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 1.1rem; font-weight: 700; height: 3.8rem; letter-spacing: 0.1rem; line-height: 3.8rem; padding: 0 3rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type='button']:hover,
input[type='button']:focus,
input[type='reset']:hover,
input[type='reset']:focus,
input[type='submit']:hover,
input[type='submit']:focus { background-color: #606c76; border-color: #606c76; color: #fff; outline: 0;
}
.button.button-outline,
button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline { color: #9b4dca; background-color: transparent;
}
.button.button-outline:hover,
.button.button-outline:focus,
button.button-outline:hover,
button.button-outline:focus,
input[type='button'].button-outline:hover,
input[type='button'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='submit'].button-outline:hover,
input[type='submit'].button-outline:focus { color: #606c76; background-color: transparent; border-color: #606c76;
}
.button.button-clear,
button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear { color: #9b4dca; background-color: transparent; border-color: transparent;
}
.button.button-clear:hover,
.button.button-clear:focus,
button.button-clear:hover,
button.button-clear:focus,
input[type='button'].button-clear:hover,
input[type='button'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='submit'].button-clear:hover,
input[type='submit'].button-clear:focus { color: #606c76; background-color: transparent; border-color: transparent;
}
pre { background: #f4f5f6; border-left: 0.3rem solid #9b4dca; font-family: Menlo, Consolas, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
}
code { background: #f4f5f6; border-radius: 0.4rem; font-size: 86%; padding: 0.2rem 0.5rem; margin: 0 0.2rem; white-space: nowrap;
}
pre > code { background: transparent; border-radius: 0; display: block; padding: 1rem 1.5rem; white-space: pre;
}
input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea,
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 0.1rem solid #d1d1d1; border-radius: 0.4rem; box-shadow: none; box-sizing: border-box; height: 3.8rem; padding: 0.6rem 1rem; width: 100%;
}
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
textarea:focus,
select:focus { border: 0.1rem solid #9b4dca; outline: 0;
}
textarea { padding-bottom: 0.6rem; padding-top: 0.6rem; min-height: 6.5rem;
}
label,
legend { font-size: 1.6rem; font-weight: 700; display: block; margin-bottom: 0.5rem;
}
fieldset { border-width: 0; padding: 0;
}
input[type='checkbox'],
input[type='radio'] { display: inline;
}
.label-inline { font-weight: normal; display: inline-block; margin-left: 0.5rem;
}
.container { box-sizing: border-box; margin: 0 auto; max-width: 112rem; padding: 0 2rem; position: relative; width: 100%;
}
.row { display: flex; flex-direction: column; padding: 0; width: 100%;
}
.row .row-wrap { flex-wrap: wrap;
}
.row .row-no-padding { padding: 0;
}
.row .row-no-padding > .column { padding: 0;
}
.row .row-top { align-items: flex-start;
}
.row .row-bottom { align-items: flex-end;
}
.row .row-center { align-items: center;
}
.row .row-stretch { align-items: stretch;
}
.row .row-baseline { align-items: baseline;
}
.row .column { display: block; flex: 1; margin-left: 0; max-width: 100%; width: 100%;
}
.row .column .col-top { align-self: flex-start;
}
.row .column .col-bottom { align-self: flex-end;
}
.row .column .col-center { align-self: center;
}
.row .column.column-offset-10 { margin-left: 10%;
}
.row .column.column-offset-20 { margin-left: 20%;
}
.row .column.column-offset-25 { margin-left: 25%;
}
.row .column.column-offset-33,
.row .column.column-offset-34 { margin-left: 33.3333%;
}
.row .column.column-offset-50 { margin-left: 50%;
}
.row .column.column-offset-66,
.row .column.column-offset-67 { margin-left: 66.6666%;
}
.row .column.column-offset-75 { margin-left: 75%;
}
.row .column.column-offset-80 { margin-left: 80%;
}
.row .column.column-offset-90 { margin-left: 90%;
}
.row .column.column-10 { flex: 0 0 10%; max-width: 10%;
}
.row .column.column-20 { flex: 0 0 20%; max-width: 20%;
}
.row .column.column-25 { flex: 0 0 25%; max-width: 25%;
}
.row .column.column-33,
.row .column.column-34 { flex: 0 0 33.3333%; max-width: 33.3333%;
}
.row .column.column-40 { flex: 0 0 40%; max-width: 40%;
}
.row .column.column-50 { flex: 0 0 50%; max-width: 50%;
}
.row .column.column-60 { flex: 0 0 60%; max-width: 60%;
}
.row .column.column-66,
.row .column.column-67 { flex: 0 0 66.6666%; max-width: 66.6666%;
}
.row .column.column-75 { flex: 0 0 75%; max-width: 75%;
}
.row .column.column-80 { flex: 0 0 80%; max-width: 80%;
}
.row .column.column-90 { flex: 0 0 90%; max-width: 90%;
}
@media (min-width: 40rem) { .row { flex-direction: row; margin-left: -1rem; width: calc(100% + 2.0rem); } .row .column { margin-bottom: inherit; padding: 0 1rem; }
}
a { color: #9b4dca; text-decoration: none;
}
a:hover { color: #606c76;
}
dl,
ol,
ul { margin-top: 0; padding-left: 0;
}
dl ul,
dl ol,
ol ul,
ol ol,
ul ul,
ul ol { font-size: 90%; margin: 1.5rem 0 1.5rem 3rem;
}
dl { list-style: none;
}
ul { list-style: circle inside;
}
ol { list-style: decimal inside;
}
dt,
dd,
li { margin-bottom: 1rem;
}
hr { border-top: 0.1rem solid #f4f5f6; border-width: 0; margin-bottom: 3.5rem; margin-top: 3rem;
}
.button,
button { margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset { margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form { margin-bottom: 2.5rem;
}
table { width: 100%;
}
th,
td { border-bottom: 0.1rem solid #e1e1e1; padding: 1.2rem 1.5rem; text-align: left;
}
th:first-child,
td:first-child { padding-left: 0;
}
th:last-child,
td:last-child { padding-right: 0;
}
p { margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 300; margin-bottom: 2rem; margin-top: 0;
}
h1 { font-size: 4rem; letter-spacing: -0.1rem; line-height: 1.2;
}
h2 { font-size: 3.6rem; letter-spacing: -0.1rem; line-height: 1.25;
}
h3 { font-size: 3rem; letter-spacing: -0.1rem; line-height: 1.3;
}
h4 { font-size: 2.4rem; letter-spacing: -0.08rem; line-height: 1.35;
}
h5 { font-size: 1.8rem; letter-spacing: -0.05rem; line-height: 1.5;
}
h6 { font-size: 1.6rem; letter-spacing: 0; line-height: 1.4;
}
@media (min-width: 40rem) { h1 { font-size: 5rem; } h2 { font-size: 4.2rem; } h3 { font-size: 3.6rem; } h4 { font-size: 3rem; } h5 { font-size: 2.4rem; } h6 { font-size: 1.5rem; }
}
.float-right { float: right;
}
.float-left { float: left;
}
.clearfix { *zoom: 1;
}
.clearfix:after,
.clearfix:before { content: ""; display: table;
}
.clearfix:after { clear: both;
}
Milligram css framework - Script Codes
Milligram css framework - Script Codes
Home Page Home
Developer Filipp
Username blossk
Uploaded August 21, 2022
Rating 3
Size 13,017 Kb
Views 42,504
Do you need developer help for Milligram css framework?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Filipp (blossk) Script Codes
Name
Tuk-tuk foundation based
Touchtouchtouch
Bootstrap easel and old html
Corners,corners,corners...
Glitch link
Foundation547css
Test
Transitions
Easy css-responsive slider
Interactive shedule
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!