mustard-ui
Version:
A starter CSS framework that actually looks good.
128 lines (108 loc) • 5.42 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mustard UI Examples</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Normalize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<!-- Mustard UI -->
<link rel="stylesheet" href="/dist/css/mustard-ui.min.css">
</head>
<body>
<!-- Navigation -->
<nav>
<div class="nav-container">
<div class="nav-logo">
<a href="/">Examples</a>
</div>
<ul class="nav-links">
<li><a href="/index.html">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</nav>
<!-- Main Content -->
<main>
<section class="section-tertiary">
<div class="container container-small">
<h1 class="h3">Getting Started</h1>
<p>If you want to start playing around with the styles provided, be sure to start with the <code>$brand-color</code> that can be found in the <code>base.scss</code> file. It determines what the primary color for most components is. Most of the colors used are also in a SCSS variable at the top of the component file. You can find more examples of how this framework can be used below.</p>
<p>Thanks for trying out Mustard UI!</p>
</div>
</section>
<section class="section-secondary">
<div class="container">
<h2 class="h4">Examples:</h2>
<div class="row">
<div class="col col-sm-6 col-lg-4">
<div class="card">
<h2 class="card-title">Blog Post</h2>
<p>This is an example of what a blog post would look like using various text styles, the flexbox grid, and the sidebar component.</p>
<div class="card-actions">
<a class="button button-primary-text" href="/examples/blog.html">View Blog Post</a>
</div>
</div>
</div>
<div class="col col-sm-6 col-lg-4">
<div class="card">
<h2 class="card-title">Shopping Cart</h2>
<p>This is an example of how you could use a simple table to create a shopping cart. This example uses tables, button variations, and several typography styles.</p>
<div class="card-actions">
<a class="button button-primary-text" href="/examples/cart.html">View Shopping Cart</a>
</div>
</div>
</div>
<div class="col col-sm-6 col-lg-4">
<div class="card">
<h2 class="card-title">Pricing Table</h2>
<p>This example uses the pricing table component along with the flexbox grid. If you shrink and grow the browser width, you'll see the packages adapt to different sizes.</p>
<div class="card-actions">
<a class="button button-primary-text" href="/examples/pricing.html">View Pricing</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col col-lg-5">
<div class="footer-text">
<p class="h3">Footer Example</p>
<p>This is an example of the footer component. You don't have to use this layout, but it's a good example of what you can do with what's provided. If you wanted to included more columns for links and remove this text block, you can.</p>
</div>
</div>
<div class="col col-sm-6 col-lg-3 col-lg-offset-1">
<h4 class="footer-links-category">Links Category 1</h4>
<ul class="footer-links">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
<div class="col col-sm-6 col-lg-3">
<h4 class="footer-links-category">Links Category 2</h4>
<ul class="footer-links">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</div>
</div>
</div>
<p class="copyright align-center">Made with 🌭 by Kyle Logue. Licensed under the MIT License.</p>
</footer>
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
})
</script>
</body>
</html>