Modular SCSS
Start with the essential building blocks.
Open Source
Free to use. Free to modify.
Small Filesize
Less than 6kb when gzipped.
Contributor Driven
Sourced from the ideas of many.
Getting Started
There are a few different ways you can include mustard within your project. You can simply download the zip file below or use NPM. Mustard does not include a CSS reset such as normalize.
Install using NPM:
npm install mustard-ui
Include in page
<head></head>
tag:
<link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
Read more about customizing the installation.
What's Included
Mustard includes a directory structure that separates the CSS framework into modules which are included from a global file. This allows you to pick and choose what you'd like to include into your project or just pull in everything.
Folder Structure:
mustard-ui/
├── dist/
| └── css/
| └── mustard-ui.min.css
└── src/
└── scss/
├── components/
├── elements/
├── layout/
├── mixins/
├── vars/
└── mustard-ui.scss
You can also view the repository on GitHub.
Jump Into The Code
If you're ready to dig in and start tweaking the framework to your specific needs, have a look at the documentation. It's setup to give you a sandbox to try things out before diving into your own project.
Show Me The DocsFlex Grid
Mustard utilizes CSS flexbox to form a 12 column grid. You may specify the columns at various breakpoints and spreads. Offsets are also available to position your element exactly where you want it. You can also just specify columns and let the flex model determine what would work best.
Specify a size (resize browser for demo):
Use an offset:
Code Example:
<!-- Specified Sizing -->
<div class="row">
<div class="col col-sm-2"></div>
<div class="col col-sm-6"></div>
<div class="col col-sm-4"></div>
</div>
<!-- Offsets -->
<div class="row">
<div class="col col-sm-5"></div>
<div class="col col-sm-5 col-sm-offset-2"></div>
</div>
See more examples of the flexbox grid.
Typography
Mustard uses
Open Sans
as it's default font with a base font size of
16px
. All other sizes are based on this initial value.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Code Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
See more examples of typography.
Progress Bars
Progress bars have been proven to drive users to complete processes such as multi-step forms. The progress bar component comes in 3 variations as normal, striped, and animated. You can override the styles to create different color options.
Example Usage:
Code Example:
<div class="progress-bar">
<span class="progress-bar-green" style="width: 20%;"></span>
</div>
<div class="progress-bar striped">
<span class="progress-bar-blue" style="width: 40%;"></span>
</div>
<div class="progress-bar striped animated">
<span class="progress-bar-red" style="width: 60%;"></span>
</div>
See more examples of progress bars.
Form Fields
Forms have been styled with some basic states that include active, disabled, and invalid states. These can
be declared using default html attributes or with the
.invalid
class name. A
.form-control
will default to
width: 100%
, but multiple form fields can be included on 1 line by wrapping them in a
.form-control-group
class.
Field Types:
Please enter a valid value.
Code Example:
<!-- Normal Field -->
<div class="form-control">
<label>Normal Field</label>
<input type="text" placeholder="Enter some info">
</div>
<!-- Invalid Field -->
<div class="form-control">
<label>Invalid Field</label>
<input class="invalid" type="text" placeholder="Enter valid info">
<p class="validation-error">Please enter a valid value.</p>
</div>
<!-- Field Grouping -->
<div class="form-control-group">
<div class="form-control">
<label>Grouped Field 1</label>
<input type="text" placeholder="Enter valid value 1">
</div>
<div class="form-control grow-2x">
<label>Grouped Field 2</label>
<input type="text" placeholder="Enter valid value 2">
</div>
</div>
Read more about forms.
Pricing Tables
Pricing tables are used to show off the different packages that you company, product, or service offers. Combine this component with the flexbox grid to create different arrangements. You are also not limited to the number of packages that you can add.
Example Usage:
Startup
$49
per user
- Feature 1
- Feature 2
- Feature 3
- Feature 4
- Feature 5
Small Business
$99
per user
- Feature 1
- Feature 2
- Feature 3
- Feature 4
- Feature 5
Code Example:
<div class="pricing-table row">
<div class="col col-md-6 col-lg-4">
<div class="package">
<p class="package-name">Startup</p>
<hr>
<p class="price">$49</p>
<p class="disclaimer">per user</p>
<hr>
<ul class="features">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
<li>Feature 5</li>
</ul>
<button class="button-primary">Get Started</button>
</div>
</div>
<div class="col col-md-6 col-lg-4">
<div class="package featured">
<p class="package-name">Small Business</p>
<hr>
<p class="price">$99</p>
<p class="disclaimer">per user</p>
<hr>
<ul class="features">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
<li>Feature 5</li>
</ul>
<button class="button-primary">Get Started</button>
</div>
</div>
</div>
See more examples of pricing tables.
Panels
Panels are a good way to create emphasis on a specific piece of content. It also makes it easy to break up a page into specific sections that have associated actions. It fits in great with an admin interface.
Panel Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, iure nihil nisi repellendus doloremque harum quis dolor doloribus repudiandae eum repellat, maiores quas! Autem beatae, eos et neque minus ut mollitia ad earum, rerum hic dignissimos doloremque repellendus? Iste odit minus, recusandae tenetur, magni ullam nostrum explicabo. Explicabo, similique, tenetur.
Code Example:
<div class="panel">
<div class="panel-head">
<h2 class="panel-title">This is an example of a panel</h2>
<a href="#" class="panel-action">Action 1</a>
<a href="#" class="panel-action">Action 2</a>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, iure nihil nisi repellendus doloremque harum quis dolor doloribus repudiandae eum repellat, maiores quas! Autem beatae, eos et neque minus ut mollitia ad earum, rerum
hic dignissimos doloremque repellendus? Iste odit minus, recusandae tenetur, magni ullam nostrum explicabo. Explicabo, similique, tenetur.</p>
<button class="button-primary">Action 3</button>
</div>
<div class="panel-footer">
<button class="button-secondary">Action 5</button>
<button class="button-tertiary">Action 4</button>
</div>
</div>
Read more about panels.
Cards
Cards are very similar to panels, but are much more simplified. They are usually best used for repeating elements such as listing blog entries or customer reviews.
This is a card
This is an example of a card. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quasi ipsam sint alias, nemo. Dolore minus aliquid, modi debitis adipisci vel amet, sit officia placeat?
Code Example:
<div class="card">
<h3 class="card-title">This is a card</h3>
<p>This is an example of a card. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quasi ipsam sint alias, nemo. Dolore minus aliquid, modi debitis adipisci vel amet, sit officia placeat?</p>
<ul class="card-actions">
<li>
<a href="#" class="button button-primary-text">Action 1</a>
</li>
<li>
<a href="#" class="button button-primary-text">Action 2</a>
</li>
</ul>
</div>
Read more about cards.
Become a Contributor
Mustard UI is provided free of cost because of the contributions that are made from developers like you. If you'd like to see this project grow, I would love it if you could submit a pull request to the project on GitHub.
Contribute On GitHub