Molecule is a lightweight, responsive and mobile-first CSS framework based on Flexbox, which provides a very flexible solution for an easy to set up and fast development.
Molecules includes 3 responsive and mobile-first flexbox grids (full-width, 1140px and 960px), basic typography, text utilities and some other basic layout elements.
To install Molecule, simply add the molecule.min.css file in your website <head>. For more cross-browser consistency of default styling, you can also add normalize.min.css before adding molecule.
<!-- CSS Reset -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css">
<!-- Molecule CSS minified -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/smrlo/molecule/molecule.min.css">Molecule includes a 12 columns responsive, flexbox based and mobile first grid system with a default max width of 1140px, wich you can easily change to a 960px or full page width. You can of course also have a mix of different grids widths on the same page.
For the standard 1140px grid use the following code:
<!-- default 12 columns - max width 1140px -->
<div class="container">
<div class="row">
<div class="col-5">...</div>
<div class="col-4">...</div>
<div class="col-2">...</div>
<div class="col-1">...</div>
</div>
</div>For the 960px grid use the following code:
<!-- max width 960px -->
<div class="container-960">
<div class="row">
...
</div>
</div>For the full page width grid use the following code:
<!-- full page width -->
<div class="container-full">
<div class="row">
...
</div>
</div>To set up the columns you can use col-[1-12], col-s-[1-12], col-m-[1-12], col-l-[1-12] and col-x-[1-12]. Below are the media queries and breakpoints in use:
// Extra small devices (portrait phones, less than 576px) --> col-[1-12]
// No media query - this is the default
// Small devices (landscape phones, 576px and up) --> col-s-[1-12]
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up) --> col-m-[1-12]
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up) --> col-l-[1-12]
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up) --> col-x-[1-12]
@media (min-width: 1200px) { ... }
Molecule includes some basic typography defaults for headings, text modifiers, paragraphs, blockquotes, lists and code elements. The base font size in Molecule is 1rem (usually 16px) with a line height of 1.5 (24px).
Below is some text to see typography in Molecule in action:
Nobis graece per no, petentium adipiscing necessitatibus vis ei, constituto elaboraret nam id? Ex facete equidem pro, an everti mediocrem sit, sea eu vero nostro abhorreant! Sit quod populo alterum eu. Ius reque atqui epicurei ex? Ei vel omnesque omittantur. Sed vocibus invidunt assentior et, ad nostro nostrum ius, nec ei iusto vituperata?
Ne ipsum democritum eos, has ea veri referrentur. Te rebum doctus quo, ius et admodum vivendum efficiantur. Vitae fabellas mea no, id nec dignissim expetendis, eu eam quidam inimicus necessitatibus. Et mei unum vidisse vocibus, noster fabellas mel et. Et iriure vidisse deserunt mea, cu unum iusto quo! Eum cu veri dicant ubique, in pro congue utroque inermis. Pertinax atomorum erroribus et vis, eos eu erant tempor.
Eum ut quidam feugiat, soluta vocibus urbanitas ne cum, everti indoctum eos cu. An cum tempor principes, no vis vero aliquid, vidit iudico nam te. Probo libris verterem ex cum, graeco accusam eos ut? Ei consul graece periculis mel, sea novum simul in! Graece tibique laboramus nec ea. Te pri altera gloriatur, has ea meis labitur consequuntur, at sed oporteat repudiandae. Ei sed magna utamur discere, delicata molestiae eum at.
Ex nibh error homero est, eu congue civibus qui, soleat graece convenire no sit! Homero cotidieque efficiantur vis ex, ea fabulas offendit vix, ei aliquid nominavi complectitur eos. Usu cu lorem cetero voluptua. Ei est laudem suavitate. Cum at oratio quidam constituam? Alienum hendrerit in qui.
Headings are defined with the <h1> to <h6> tags, and you can use any standard HTML heading. You can also define a heading by attaching the html classes .h1 through .h6 to the related HTML element.
<h1>Heading1</h1> <span class="h1">...</span>
<h2>Heading2</h2> <span class="h2">...</span>
<h3>Heading3</h3> <span class="h3">...</span>
<h4>Heading4</h4> <span class="h4">...</span>
<h5>Heading5</h5> <span class="h5">...</span>
<h6>Heading6</h6> <span class="h6">...</span>Styling for common inline HTML5 elements.
Italic <i> .i
Bold <strong> <b> .b
Underline <u> .u
Strikethrough <s> .s
Highlighted <mark> .mark
Ctrl + C <kbd> .kbd
Emphasis <em>
Abbr. <abbr>
Citation <cite>
Inserted <ins>
Label .label
Deleted <del>
code <code>
Sample code <samp>
z = x + y <var>
This issuperscript <sup>
This issubscript <sub>
capitalize .ca
uppercase .uc
LOWERCASE .lc
no decoration .no
Blockquotes are defined with the <blockquote> tags, and are used to indicate that the enclosed text is quoted from another source. Additionally, you can use the <cite> tag to indicate the source of the quotation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At iam decimum annum in spelunca iacet. Terram, mihi crede, ea lanx et maria deprimet. Proclivi currit oratio. Tecum optime, deinde etiam cum mediocri amico. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt.
- Lorem Ipsum
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. At iam decimum annum in spelunca iacet. Terram, mihi crede, ea lanx et maria deprimet. Proclivi currit oratio. Tecum optime, deinde etiam cum mediocri amico. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt.</p>
<cite>- Lorem Ipsum</p>
</blockquote>An unordered list starts with the <ul> tag, while an ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Description lists are defined with the <dl> tag, and use the <dt> tag to define the term and the <dd> tag to describe each term. If you want to have an unstyled list, simply append the class .unstyled to the list tag.
Unordered lists:
Ordered lists:
Description lists:
Unstyled lists:
<!-- Unordered lists -->
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<!-- Ordered lists -->
<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>
<!-- Description list -->
<dl>
<dt>description list term</dt>
<dd>description list item</dd>
</dl>
<!-- Unstyled lists -->
<ul class="unstyled">
<li>description list term</li>
<li>description list item</li>
</ul>You can wrap inline snippets of code using the <code> tag. Be sure to escape HTML angle brackets. To create a code block with one or multiple lines of code, you can use the <code> tag inside the <pre> tag. Once again, be sure to escape any angle brackets in the code for proper rendering.
.sample {
text-align: left;
}<pre><code>.sample {
text-align: left;
}</code></pre>You can define buttons using the <button> tag. Alternatively, you can also use the <input> tag, or you can append the .button class to any <a> tag. If you want to have an outline button, simply use the .button-outline class.
<!-- Primary Button -->
<a href="..." class="button">Primary Button</a>
<!-- Outline Button -->
<a href="..." class="button-outline">Outline Button</a>Molecule v2
Designed and built with ❤ - Licensed under the MIT License.