Create test cases
This commit is contained in:
Mike Francis
parent
530c1b54d6
commit
b1b42679ab
|
|
@ -2,3 +2,5 @@ npm-debug.log
|
|||
.sass-cache
|
||||
node_modules
|
||||
bower_components
|
||||
assets/scss/vendor
|
||||
test
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
body {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
.section__title {
|
||||
border-bottom: solid 1px #eee;
|
||||
font-weight: bold;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.col span {
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Template name: Test - Form
|
||||
*/
|
||||
|
||||
function moar_styles() {
|
||||
wp_enqueue_style( 'tests', get_template_directory_uri() . '/tests/css/tests.css' );
|
||||
wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', null, '4.3.0' );
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'moar_styles' );
|
||||
|
||||
get_header();
|
||||
|
||||
?>
|
||||
|
||||
<div class="container">
|
||||
<h2 class="section__title">Forms</h2>
|
||||
<form>
|
||||
<fieldset>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="name">Name</label>
|
||||
<input type="text" id="name" name="name" placeholder="Your Name">
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="example@example.com">
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="password">Password</label>
|
||||
<input type="password" id="password" name="password">
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="bio">Biography</label>
|
||||
<textarea id="bio" name="bio"></textarea>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="avatar">Avatar</label>
|
||||
<input type="file" id="avatar" name="avatar">
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="country">Country</label>
|
||||
<select id="country" name="country">
|
||||
<option>United Kingdom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="country">Disabled</label>
|
||||
<input type="text" id="disabled" name="disabled" disabled>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<label class="form__label" for="price">Input Groups</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group__addon"><i class="fa fa-bitcoin"></i></div>
|
||||
<input type="number" id="price" name="price">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="number" id="price" name="price">
|
||||
<div class="input-group__addon"><i class="fa fa-rocket"></i></div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group__addon"><i class="fa fa-bitcoin"></i></div>
|
||||
<input type="number" id="price" name="price">
|
||||
<div class="input-group__addon"><i class="fa fa-rocket"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<span class="form__label">Gender</span>
|
||||
<div class="form__controls">
|
||||
<label class="radio" for="male">
|
||||
<input type="radio" id="male" name="gender" value="male">Male
|
||||
</label>
|
||||
<label class="radio" for="female">
|
||||
<input type="radio" id="female" name="gender" value="female">Female
|
||||
</label>
|
||||
<label class="radio" for="other">
|
||||
<input type="radio" id="other" name="gender" value="other">Other
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<span class="form__label">Skills</span>
|
||||
<div class="form__controls">
|
||||
<label class="checkbox" for="html">
|
||||
<input type="checkbox" id="html" name="gender" value="html">HTML
|
||||
</label>
|
||||
<label class="checkbox" for="css">
|
||||
<input type="checkbox" id="css" name="gender" value="css">CSS
|
||||
</label>
|
||||
<label class="checkbox" for="js">
|
||||
<input type="checkbox" id="js" name="gender" value="js">JS
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__group">
|
||||
<button class="btn btn--primary" type="submit">Submit</button>
|
||||
<a href="#" class="btn btn--link">Cancel</a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Template name: Test - Grid
|
||||
*/
|
||||
|
||||
function moar_styles() {
|
||||
wp_enqueue_style( 'tests', get_template_directory_uri() . '/tests/css/tests.css' );
|
||||
wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', null, '4.3.0' );
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'moar_styles' );
|
||||
|
||||
get_header();
|
||||
|
||||
?>
|
||||
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 class="section__title">Columns</h2>
|
||||
<div class="row">
|
||||
<div class="col col--lg-12 col--md-2 col--sm-2 col--xs-12"><span>12</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>6</span></div>
|
||||
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>6</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
|
||||
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
|
||||
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
|
||||
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
|
||||
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
|
||||
<div class="col col--lg-3 col--md-3 col--sm-3 col--xs-12"><span>3</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
|
||||
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
|
||||
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
|
||||
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
|
||||
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
|
||||
<div class="col col--lg-2 col--md-2 col--sm-2 col--xs-12"><span>2</span></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
<div class="col col--lg-1 col--md-1 col--sm-1 col--xs-12"><span>1</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="section__title">Nesting</h2>
|
||||
<div class="row">
|
||||
<div class="col col--lg-5 col--md-5 col--sm-5 col--xs-12"><img src="//placehold.it/800x600" alt=""></div>
|
||||
<div class="col col--lg-7 col--md-7 col--sm-7 col--xs-12">
|
||||
<span>parent</span>
|
||||
<div class="row">
|
||||
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>child</span></div>
|
||||
<div class="col col--lg-6 col--md-6 col--sm-6 col--xs-12"><span>child</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="section__title">Gutterless</h2>
|
||||
<div class="row row--gutterless">
|
||||
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
|
||||
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
|
||||
<div class="col col--lg-4 col--md-4 col--sm-4 col--xs-12"><span>4</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Template name: Test - Typography
|
||||
*/
|
||||
|
||||
function moar_styles() {
|
||||
wp_enqueue_style( 'tests', get_template_directory_uri() . '/tests/css/tests.css' );
|
||||
wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', null, '4.3.0' );
|
||||
}
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'moar_styles' );
|
||||
|
||||
get_header();
|
||||
|
||||
?>
|
||||
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<h2 class="section__title">Headings</h2>
|
||||
<h1>Heading 1</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptas non harum, laborum, eos, dolore nisi voluptatum molestiae perspiciatis molestias, culpa distinctio sint vitae ullam reprehenderit quasi incidunt. Alias, cupiditate!</p>
|
||||
<h2>Heading 1</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptas non harum, laborum, eos, dolore nisi voluptatum molestiae perspiciatis molestias, culpa distinctio sint vitae ullam reprehenderit quasi incidunt. Alias, cupiditate!</p>
|
||||
<h3>Heading 1</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptas non harum, laborum, eos, dolore nisi voluptatum molestiae perspiciatis molestias, culpa distinctio sint vitae ullam reprehenderit quasi incidunt. Alias, cupiditate!</p>
|
||||
<h4>Heading 1</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptas non harum, laborum, eos, dolore nisi voluptatum molestiae perspiciatis molestias, culpa distinctio sint vitae ullam reprehenderit quasi incidunt. Alias, cupiditate!</p>
|
||||
<h5>Heading 1</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptas non harum, laborum, eos, dolore nisi voluptatum molestiae perspiciatis molestias, culpa distinctio sint vitae ullam reprehenderit quasi incidunt. Alias, cupiditate!</p>
|
||||
<h6>Heading 1</h6>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptas non harum, laborum, eos, dolore nisi voluptatum molestiae perspiciatis molestias, culpa distinctio sint vitae ullam reprehenderit quasi incidunt. Alias, cupiditate!</p>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2 class="section__title">Lists</h2>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||||
<li>Quae fugiat aperiam numquam eos, maxime.</li>
|
||||
<li>
|
||||
Voluptates alias dolore, culpa nobis sed.
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Illum dolorum, magni veritatis aperiam provident?</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Distinctio adipisci veritatis placeat neque, expedita?</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Ullam labore repellat explicabo, eum illo!</li>
|
||||
<li>Maxime facilis similique praesentium, fugiat modi.</li>
|
||||
<li>Perferendis cum ea, adipisci non odio.</li>
|
||||
<li>Eum dolorum itaque laborum, ea voluptas?</li>
|
||||
<li>Quis, eos alias recusandae adipisci temporibus.</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||||
<li>Quae fugiat aperiam numquam eos, maxime.</li>
|
||||
<li>
|
||||
Voluptates alias dolore, culpa nobis sed.
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Illum dolorum, magni veritatis aperiam provident?</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Distinctio adipisci veritatis placeat neque, expedita?</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Ullam labore repellat explicabo, eum illo!</li>
|
||||
<li>Maxime facilis similique praesentium, fugiat modi.</li>
|
||||
<li>Perferendis cum ea, adipisci non odio.</li>
|
||||
<li>Eum dolorum itaque laborum, ea voluptas?</li>
|
||||
<li>Quis, eos alias recusandae adipisci temporibus.</li>
|
||||
</ol>
|
||||
<ul class="list-unstyled">
|
||||
<li>Lorem ipsum dolor sit amet, consectetur.</li>
|
||||
<li>Quae fugiat aperiam numquam eos, maxime.</li>
|
||||
<li>Voluptates alias dolore, culpa nobis sed.</li>
|
||||
<li>Ullam labore repellat explicabo, eum illo!</li>
|
||||
<li>Maxime facilis similique praesentium, fugiat modi.</li>
|
||||
<li>Perferendis cum ea, adipisci non odio.</li>
|
||||
<li>Eum dolorum itaque laborum, ea voluptas?</li>
|
||||
<li>Quis, eos alias recusandae adipisci temporibus.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
Loading…
Reference in New Issue