Not your average CSS Framework

Mustard UI is a starter CSS framework that actually looks good.


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.

Download Mustard

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 Docs

Flex 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):

.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-sm-12 .col-md-4 .col-lg-3
.col-md-6 .col-lg-3
.col-md-6 .col-lg-6
.col-lg-6

Use an offset:

.col-sm-4
.col-sm-offset-2
.col

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.

Buttons

Buttons are available in 5 different styles and 3 different sizes. You can mix and match between size and style. The primary color is determined by the $brand-color variable within the SCSS files. Other variations for success, info, warning, and danger are also provided.

Style variations:

Size variations:

Color variations:

Code Example:

                    
                        <!-- Styles -->
                        <button class="button-primary">Default</button>
                        <button class="button-primary button-round">Default Round </button>
                        <button class="button-primary-outlined">Outlined</button>
                        <button class="button-primary-outlined button-round">Outlined Round</button>
                        <button class="button-primary-text">Text</button>

                        <!-- Sizes -->
                        <button class="button-primary button-large">Large</button>
                        <button class="button-primary">Standard</button>
                        <button class="button-primary button-small">Small</button>

                        <!-- Colors -->
                        <button class="button-success">Success</button>
                        <button class="button-info">Info</button>
                        <button class="button-warning">Warning</button>
                        <button class="button-danger">Danger</button>

See more examples of buttons.

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:

Toggled Inputs

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?

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