mustard-ui

<!DOCTYPE html> <html>  <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Mustard UI · A CSS framework that actually looks good.</title> <meta name="description" content="Mustard UI is a complete CSS framework that is production ready out of the box. There is no need to customize the CSS if you don’t want to because it is head and shoulders above others in terms of the way that it looks. We think it looks great and hope you do too."/> <link rel="canonical" href="index.html" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Mustard UI · A CSS framework that actually looks good." /> <meta property="og:description" content="Mustard UI is a complete CSS framework that is production ready out of the box. There is no need to customize the CSS if you don’t want to because it is head and shoulders above others in terms of the way that it looks. We think it looks great and hope you do too." /> <meta property="og:url" content="index.html" /> <meta property="og:site_name" content="Mustard UI" /> <meta property="og:image" content="wp-content/uploads/2018/04/mustard-ui-image.png" /> <meta property="og:image:secure_url" content="wp-content/uploads/2018/04/mustard-ui-image.png" /> <meta property="og:image:width" content="600" /> <meta property="og:image:height" content="315" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:description" content="Mustard UI is a complete CSS framework that is production ready out of the box. There is no need to customize the CSS if you don’t want to because it is head and shoulders above others in terms of the way that it looks. We think it looks great and hope you do too." /> <meta name="twitter:title" content="Mustard UI · A CSS framework that actually looks good." /> <meta name="twitter:site" content="@hellokyle" /> <meta name="twitter:image" content="wp-content/uploads/2018/04/mustard-ui-image.png" /> <meta name="twitter:creator" content="@hellokyle" /> <script type='application/ld+json' class='yoast-schema-graph yoast-schema-graph--main'>{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://mustard-ui.com/#website","url":"https://mustard-ui.com/","name":"Mustard UI","potentialAction":{"@type":"SearchAction","target":"https://mustard-ui.com/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"ImageObject","@id":"https://mustard-ui.com/#primaryimage","url":"https://mustard-ui.com/wp-content/uploads/2018/04/mustard-ui-image.png","width":600,"height":315,"caption":"Mustard UI"},{"@type":"WebPage","@id":"https://mustard-ui.com/#webpage","url":"https://mustard-ui.com/","inLanguage":"en-US","name":"Mustard UI · A CSS framework that actually looks good.","isPartOf":{"@id":"https://mustard-ui.com/#website"},"primaryImageOfPage":{"@id":"https://mustard-ui.com/#primaryimage"},"datePublished":"2018-04-01T18:49:44+00:00","dateModified":"2018-04-14T13:58:46+00:00","description":"Mustard UI is a complete CSS framework that is production ready out of the box. There is no need to customize the CSS if you don\u2019t want to because it is head and shoulders above others in terms of the way that it looks. We think it looks great and hope you do too."}]}</script> <link rel='dns-prefetch' href='http://cdnjs.cloudflare.com/' /> <link rel='dns-prefetch' href='http://s.w.org/' /> <link rel='stylesheet' id='wp-block-library-css' href='wp-includes/css/dist/block-library/style.min6619.css?ver=5.2.5' type='text/css' media='all' /> <link rel='https://api.w.org/' href='wp-json/index.html' /> <link rel="alternate" type="application/json+oembed" href="wp-json/oembed/1.0/embeda396.json?url=https%3A%2F%2Fmustard-ui.com%2F" /> <link rel="alternate" type="text/xml+oembed" href="wp-json/oembed/1.0/embed3d15?url=https%3A%2F%2Fmustard-ui.com%2F&format=xml" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Averia+Libre:400,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.min.css"> <link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css"> <link rel="stylesheet" href="wp-content/themes/mustard/css/styles.css"> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116959999-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-116959999-1'); </script> <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '129244174588258'); fbq('track', 'PageView'); </script> <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:842735,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script> </head> <body> <a href="https://github.com/kylelogue/mustard-ui" target="_blank" class="github-corner display-md-up" aria-label="View source on Github"> <svg width="60" height="60" viewBox="0 0 250 250" aria-hidden="true"> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> </svg> </a> <nav> <div class="nav-container"> <div class="nav-logo"> <a href="index.html">mustard</a> </div> <ul class="nav-links"> <li><a class="" href="docs/installation/index.html">Docs</a></li> <li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a></li> </ul> <a class="mobile-menu-toggle"></a> <ul class="mobile-menu menu"> <li><a href="docs/installation/index.html">Docs</a></li> <li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a></li> </ul> </div> </nav> <header> <h1 class="title">Not your average CSS Framework</h1> <h2 class="subtitle">Mustard UI is a starter CSS framework that actually looks good.</h2> <p class="align-center"> <img src="https://img.shields.io/npm/v/mustard-ui.svg"> <img src="https://img.shields.io/npm/l/mustard-ui.svg"> <img src="https://img.shields.io/bundlephobia/minzip/mustard-ui.svg"> </p> <button class="get-started button button-primary button-large">Get Started</button> <a class="scroll-down" href="#"></a> </header> <div class="main"> <section class="section-secondary key-points"> <div class="row"> <div class="col col-md-6 col-xlg-3 align-center"> <p> <svg xmlns="http://www.w3.org/2000/svg" width="63" height="56" viewBox="0 0 69 60"> <path fill="#424242" d="M65.1 29.2L52.3 24.4 52.3 9.9C52.3 7.9 51 6.1 49.1 5.4L35.8 0.4C34.7 0 33.5 0 32.4 0.4L19.1 5.4C17.2 6.1 16 7.9 16 9.9L16 24.4 3.1 29.2C1.2 29.9 0 31.7 0 33.7L0 48.4C0 50.2 1 51.9 2.7 52.7L16 59.4C17.3 60 18.9 60 20.3 59.4L34.1 52.4 48 59.4C49.3 60 50.9 60 52.3 59.4L65.6 52.7C67.2 51.9 68.3 50.2 68.3 48.4L68.3 33.7C68.3 31.7 67 29.9 65.1 29.2ZM47.7 24.5L36.4 28.8 36.4 19.7 47.7 14.7 47.7 24.5ZM20.5 9.7L34.1 4.7 47.7 9.7 47.7 9.8 34.1 15.3 20.5 9.8 20.5 9.7ZM31.7 48.6L20.4 54.2 20.4 43.7 31.7 38.5 31.7 48.6ZM31.7 33.6L18.1 39.1 4.5 33.6 4.5 33.5 18.1 28.5 31.7 33.5 31.7 33.6ZM63.7 48.6L52.4 54.2 52.4 43.7 63.7 38.5 63.7 48.6ZM63.7 33.6L50.1 39.1 36.5 33.6 36.5 33.5 50.1 28.5 63.7 33.5 63.7 33.6Z"/> </svg> <br> <strong class="h4">Modular SCSS</strong> <br> Start with the essential building blocks. </p> </div> <div class="col col-md-6 col-xlg-3 align-center"> <p> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="56" viewBox="0 0 70 56"> <path fill="#424242" d="M30.5 55.9L23.8 54C23.1 53.8 22.7 53.1 22.9 52.4L37.9 0.9C38.1 0.2 38.8-0.1 39.5 0.1L46.2 2C46.9 2.2 47.3 2.9 47.1 3.6L32.1 55C31.9 55.7 31.2 56.2 30.5 55.9ZM18 43.7L22.8 38.6C23.3 38.1 23.3 37.2 22.7 36.7L12.8 28 22.7 19.3C23.3 18.8 23.3 17.9 22.8 17.4L18 12.3C17.5 11.8 16.7 11.8 16.2 12.3L0.4 27C-0.1 27.5-0.1 28.4 0.4 28.9L16.2 43.7C16.7 44.2 17.5 44.2 18 43.7ZM53.8 43.7L69.6 29C70.1 28.4 70.1 27.6 69.6 27L53.8 12.3C53.3 11.8 52.5 11.8 52 12.3L47.2 17.4C46.7 17.9 46.7 18.8 47.3 19.3L57.2 28 47.3 36.7C46.7 37.2 46.7 38.1 47.2 38.6L52 43.7C52.5 44.2 53.3 44.2 53.8 43.7Z"/> </svg> <br> <strong class="h4">Open Source</strong> <br> Free to use. Free to modify. </p> </div> <div class="col col-md-6 col-xlg-3 align-center"> <p> <svg xmlns="http://www.w3.org/2000/svg" width="42" height="56" viewBox="0 0 42 56"> <path fill="#424242" d="M24.5 14.9L24.5 0 17.5 0 17.5 3.5 14 3.5 14 0 2.6 0C1.2 0 0 1.2 0 2.6L0 53.4C0 54.8 1.2 56 2.6 56L39.4 56C40.8 56 42 54.8 42 53.4L42 17.5 27.1 17.5C25.7 17.5 24.5 16.3 24.5 14.9ZM10.5 3.5L14 3.5 14 7 10.5 7 10.5 3.5ZM14 45.5C10.4 45.5 7.7 42.2 8.4 38.6L10.5 28 10.5 24.5 14 24.5 14 21 10.5 21 10.5 17.5 14 17.5 14 14 10.5 14 10.5 10.5 14 10.5 14 7 17.5 7 17.5 10.5 14 10.5 14 14 17.5 14 17.5 17.5 14 17.5 14 21 17.5 21 17.5 24.5 14 24.5 14 28 16.5 28C17.1 28 17.6 28.4 17.8 29.1L19.6 38.7C20.3 42.2 17.6 45.5 14 45.5ZM17.6 39.7C17.6 41.3 16 42.7 14.1 42.7 12.1 42.7 10.5 41.3 10.5 39.7 10.5 38.1 12.1 36.8 14 36.8 16 36.8 17.6 38.1 17.6 39.7ZM42 13.3L42 14 28 14 28 0 28.7 0C29.4 0 30 0.3 30.5 0.8L41.2 11.5C41.7 12 42 12.6 42 13.3Z"/> </svg> <br> <strong class="h4">Small Filesize</strong> <br> Less than 6kb when gzipped. </p> </div> <div class="col col-md-6 col-xlg-3 align-center"> <p> <svg xmlns="http://www.w3.org/2000/svg" width="90" height="54" viewBox="0 0 90 54"> <path fill="#424242" d="M45 0C53.2 0 59.8 6.6 59.8 14.8 59.8 22.9 53.2 29.5 45 29.5 36.8 29.5 30.2 22.9 30.2 14.8 30.2 6.6 36.8 0 45 0ZM61 30.6L55.3 29.2C48.4 34.1 40 33 34.7 29.2L29 30.6C24.5 31.7 21.4 35.7 21.4 40.4L21.4 48.9C21.4 51.7 23.6 54 26.4 54L63.6 54C66.4 54 68.6 51.7 68.6 48.9L68.6 40.4C68.6 35.7 65.5 31.7 61 30.6ZM74.3 33.2C79.7 33.2 84.1 28.8 84.1 23.3 84.1 17.9 79.7 13.5 74.3 13.5 68.8 13.5 64.4 17.9 64.4 23.3 64.4 28.8 68.8 33.2 74.3 33.2ZM15.8 33.2C21.2 33.2 25.6 28.8 25.6 23.3 25.6 17.9 21.2 13.5 15.8 13.5 10.3 13.5 5.9 17.9 5.9 23.3 5.9 28.8 10.3 33.2 15.8 33.2ZM19.1 48.9L19.1 40.4C19.1 38.1 19.8 35.9 20.9 34 16.7 36 12 35.2 8.9 32.9L5.1 33.9C2.1 34.6 0 37.3 0 40.4L0 46.1C0 48 1.5 49.5 3.4 49.5L19.1 49.5C19.1 49.3 19.1 49.1 19.1 48.9ZM84.9 33.9L81.1 32.9C77.2 35.8 72.6 35.6 69.1 34 70.2 35.8 70.9 38.1 70.9 40.4L70.9 48.9C70.9 49.1 70.9 49.3 70.9 49.5L86.6 49.5C88.5 49.5 90 48 90 46.1L90 40.4C90 37.3 87.9 34.6 84.9 33.9Z"/> </svg> <br> <strong class="h4">Contributor Driven</strong> <br> Sourced from the ideas of many. </p> </div> </div> </section>  <section id="getting-started" class="section-tertiary"> <div class="container container-small"> <h3>Getting Started</h3> <p>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.</p> <p> <a class="button button-primary" href="https://github.com/kylelogue/mustard-ui/archive/master.zip" target="_blank">Download Mustard</a> </p> <strong>Install using NPM:</strong> <pre class="language-bash"> <code class="language-bash"> npm install mustard-ui </code> </pre> <strong>Include in page <code class="language-html"><head></head></code> tag:</strong> <pre class="language-html"> <code class="language-html"> <link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css"> </code> </pre> <p>Read more about customizing the <a href="docs/installation/index.html">installation</a>.</p> </div> </section> <section id="whats-included" class="section-tertiary"> <div class="container container-small"> <h4>What's Included</h4> <p>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.</p> <p> <strong>Folder Structure:</strong> </p> <pre class="language-markup"> <code class="language-markup"> mustard-ui/ ├── dist/ | └── css/ | └── mustard-ui.min.css └── src/ └── scss/ ├── components/ ├── elements/ ├── layout/ ├── mixins/ ├── vars/ └── mustard-ui.scss </code> </pre> <p>You can also view the repository on <a href="https://github.com/kylelogue/mustard-ui" target="_blank">GitHub</a>.</p> </div> </section> <section class="section-primary"> <div class="container container-small align-center"> <h2>Jump Into The Code</h2> <p>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.</p> <a href="docs/installation/index.html" class="button button-primary">Show Me The Docs</a> </div> </section> <section id="flex-grid" class="section-tertiary"> <div class="container container-small"> <h3>Flex Grid</h3> <p>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.</p> <p><strong>Specify a size (resize browser for demo):</strong></p> <div class="row"> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div style="background:#eee;height:40px;text-align:center;padding:8px;"> <span class="display-sm-down">.col-xs-12</span> <span class="display-sm-to-md">.col-sm-6</span> <span class="display-md-to-lg">.col-md-4</span> <span class="display-lg-up">.col-lg-3</span> </div> </div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div style="background:#eee;height:40px;text-align:center;padding:8px;"> <span class="display-sm-down">.col-xs-12</span> <span class="display-sm-to-md">.col-sm-6</span> <span class="display-md-to-lg">.col-md-4</span> <span class="display-lg-up">.col-lg-3</span> </div> </div> <div class="col col-xs-12 col-sm-12 col-md-4 col-lg-3 display-sm-up"> <div style="background:#eee;height:40px;text-align:center;padding:8px;"> <span class="display-sm-to-md">.col-sm-12</span> <span class="display-md-to-lg">.col-md-4</span> <span class="display-lg-up">.col-lg-3</span> </div> </div> <div class="col col-xs-12 col-sm-6 col-md-6 col-lg-3 display-md-up"> <div style="background:#eee;height:40px;text-align:center;padding:8px;"> <span class="display-md-to-lg">.col-md-6</span> <span class="display-lg-up">.col-lg-3</span> </div> </div> <div class="col col-xs-12 col-sm-6 col-md-6 col-lg-6 display-md-up"> <div style="background:#eee;height:40px;text-align:center;padding:8px;"> <span class="display-md-to-lg">.col-md-6</span> <span class="display-lg-up">.col-lg-6</span> </div> </div> <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-6 display-lg-up"> <div style="background:#eee;height:40px;text-align:center;padding:8px;"> <span class="display-lg-up">.col-lg-6</span> </div> </div> </div> <p> <strong>Use an offset:</strong> </p> <div class="row"> <div class="col col-sm-5"> <div style="background:#eee;height:40px;text-align:center;padding:8px;">.col-sm-4</div> </div> <div class="col col-sm-5 col-sm-offset-2"> <div style="background:#eee;height:40px;text-align:center;padding:8px;">.col-sm-offset-2</div> </div> <div class="col"> <div style="background:#eee;height:40px;text-align:center;padding:8px;">.col</div> </div> </div> <p> <strong>Code Example:</strong> </p> <pre class="language-html"> <code class="language-html">  <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>  <div class="row"> <div class="col col-sm-5"></div> <div class="col col-sm-5 col-sm-offset-2"></div> </div> </code> </pre> <p>See more examples of the <a href="docs/flexbox-grid/index.html">flexbox grid</a>.</p> </div> </section> <section id="typography" class="section-tertiary"> <div class="container container-small"> <h3>Typography</h3> <p>Mustard uses <code>Open Sans</code> as it's default font with a base font size of <code>16px</code>. All other sizes are based on this initial value.</p> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p> <strong>Code Example:</strong> </p> <pre> <code class="language-html"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </code> </pre> <p>See more examples of <a href="docs/typography/index.html">typography</a>.</p> </div> </section> <section id="blockquote" class="section-secondary"> <div class="container container-small"> <h3>Progress Bars</h3> <p>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.</p> <p><strong>Example Usage:</strong></p> <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> <p><strong>Code Example:</strong></p> <pre class="language-html"> <code class="language-html"> <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> </code> </pre> <p>See more examples of <a href="docs/progress-bars/index.html">progress bars</a>.</p> </div> </section> <section id="buttons" class="section-secondary"> <div class="container container-small"> <h3>Buttons</h3> <p>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 <code>$brand-color</code> variable within the SCSS files. Other variations for success, info, warning, and danger are also provided.</p> <p><strong>Style variations:</strong></p> <p> <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> </p> <p><strong>Size variations:</strong></p> <p> <button class="button-primary button-large">Large</button> <button class="button-primary">Standard</button> <button class="button-primary button-small">Small</button> </p> <p> <button class="button-primary button-large button-round">Large</button> <button class="button-primary button-round">Standard</button> <button class="button-primary button-small button-round">Small</button> </p> <p><strong>Color variations:</strong></p> <p> <button class="button-success">Success</button> <button class="button-info">Info</button> <button class="button-warning">Warning</button> <button class="button-danger">Danger</button> </p> <p><strong>Code Example:</strong></p> <pre class="language-html"> <code class="language-html">  <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>  <button class="button-primary button-large">Large</button> <button class="button-primary">Standard</button> <button class="button-primary button-small">Small</button>  <button class="button-success">Success</button> <button class="button-info">Info</button> <button class="button-warning">Warning</button> <button class="button-danger">Danger</button> </code> </pre> <p>See more examples of <a href="docs/buttons/index.html">buttons</a>.</p> </div> </section> <section id="forms" class="section-tertiary"> <div class="container container-small"> <h3>Form Fields</h3> <p>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 <code class="alt">.invalid</code> class name. A <code class="alt">.form-control</code> will default to <code class="alt">width: 100%</code>, but multiple form fields can be included on 1 line by wrapping them in a <code class="alt">.form-control-group</code> class.</p> <p><strong>Field Types:</strong></p> <div class="form-control"> <label>Normal Field</label> <input type="text" placeholder="Enter some info"> </div> <div class="form-control"> <label>Dropdown Field</label> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="form-control"> <label>Text Area</label> <textarea placeholder="Enter some text..."></textarea> </div> <fieldset> <legend>Toggled Inputs</legend> <div class="form-control"> <label><input type="checkbox">Checkbox</label> </div> <div class="form-control"> <label><input type="radio" name="radio">Radio</label> </div> <div class="form-control"> <label><input type="radio" name="radio">Radio</label> </div> </fieldset> <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> <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> <p><strong>Code Example:</strong></p> <pre class="language-html"> <code class="language-html">  <div class="form-control"> <label>Normal Field</label> <input type="text" placeholder="Enter some info"> </div>  <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>  <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> </code> </pre> <p>Read more about <a href="docs/forms/index.html">forms</a>.</p> </div> </section> <section class="section-tertiary"> <div class="container container-small"> <h3>Pricing Tables</h3> <p>Pricing tables are used to show off the different packages that you company, product, or service offers. Combine this component with the <a href="docs/flexbox-grid/index.html">flexbox grid</a> to create different arrangements. You are also not limited to the number of packages that you can add.</p> <p><strong>Example Usage:</strong></p> <div class="pricing-table row"> <div class="col col-md-6"> <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"> <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> <p><strong>Code Example:</strong></p> <pre class="language-html"> <code class="language-html"> <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> </code> </pre> <p>See more examples of <a href="docs/pricing-tables/index.html">pricing tables</a>.</p> </div> </section> <section class="section-secondary"> <div class="container container-small"> <h3>Panels</h3> <p>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.</p> <div class="panel"> <div class="panel-head"> <h2 class="panel-title">Panel Example</h2> </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> </div> <div class="panel-footer"> <button class="button-primary">Action 1</button> <button class="button-primary">Action 2</button> </div> </div> <p> <strong>Code Example:</strong> </p> <pre> <code class="language-html"> <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> </code> </pre> <p>Read more about <a href="docs/panels/index.html">panels</a>.</p> </div> </section> <section class="section-secondary"> <div class="container container-small"> <h3>Cards</h3> <p>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.</p> <div class="row"> <div class="col col-md-6"> <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">Action 1</a></li> <li><a href="#" class="button button-primary">Action 2</a></li> </ul> </div> </div> <div class="col col-md-6"> <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">Only 1 Action</a></li> </ul> </div> </div> </div> <p> <strong>Code Example:</strong> </p> <pre class="language-html"> <code class="language-html"> <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> </code> </pre> <p>Read more about <a href="docs/cards/index.html">cards</a>.</p> </div> </section> <section class="section-tertiary"> <div class="container container-small"> <h3>Become a Contributor</h3> <p>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.</p> <a class="button button-primary" href="https://github.com/kylelogue/mustard-ui" target="_blank">Contribute On GitHub</a> </div> </section> </div> <footer> <div class="container"> <div class="row"> <div class="col col-lg-5"> <div class="footer-text"> <p>Mustard UI was created to address the growing concern of CSS frameworks that look pretty bad. We took what we knew and liked about CSS and adapted it into a lightweight and production ready library.</p> <p>Thanks for trying it out!</p> </div> </div> <div class="col col-sm-6 col-lg-3 col-lg-offset-1"> <h4 class="footer-links-category">Top CSS Examples</h4> <ul class="footer-links"> <li><a href="docs/buttons/index.html">Buttons</a></li> <li><a href="docs/flexbox-grid/index.html">Flexbox Grid</a></li> <li><a href="docs/pricing-tables/index.html">Pricing Tables</a></li> <li><a href="docs/progress-bars/index.html">Progress Bars</a></li> </ul> </div> <div class="col col-sm-6 col-lg-3"> <h4 class="footer-links-category">Stay in Touch</h4> <ul class="footer-links"> <li><a href="https://twitter.com/HelloKyle" target="_blank">Follow on Twitter</a></li> <li><a href="https://github.com/kylelogue/mustard-ui" target="_blank">Star on GitHub</a></li> </ul> </div> </div> </div> <p class="copyright align-center">Made with 🌭 by Kyle Logue. Licensed under the MIT License.</p> </footer> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=5.2.5'></script> <script type='text/javascript' src='wp-content/themes/mustard/js/scripts6619.js?ver=5.2.5'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/prism.min.js?ver=5.2.5'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/plugins/normalize-whitespace/prism-normalize-whitespace.js?ver=5.2.5'></script> <script type='text/javascript' src='wp-includes/js/wp-embed.min6619.js?ver=5.2.5'></script> </body>  </html>