generator-cwf-theme
Version:
Generates a Drupal CWF Bootstrap base theme
415 lines (385 loc) • 19.9 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= humanName %> Test Page</title>
<base target="_self">
<meta name="description" content="Playing with <%= humanName %> elements on this Test Page. This is a <%= humanName %> test page template that utilizes most of the classes and Components that is helpful to visualize CSS or SASS customizations">
<link rel="stylesheet" href="dist/css/<%= themeName %>.css">
</head>
<body>
<div class="flex-grow-1 d-flex flex-column">
<div class="container-fluid">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto" id="content">
<h1 class="text-dark mt-5 pt-5">Yo, this is the <span class="text-primary"><%= humanName %></span> Test Page</h1>
<div class="row">
<div class="col-md pt-5">
<section id="buttons" class="pb-2">
<div class="row">
<div class="col-12">
<!-- Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
</ol>
</nav>
</div>
<div class="col-lg-4">
<div class="pb-3">
<button type="button" class="btn btn-primary mr-1">Button</button>
<button type="button" class="btn btn-outline-primary">Outline</button>
</div>
<div class="pb-3">
<!-- Large Button -->
<button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
<!-- Small Button -->
<button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
<!-- Link -->
<a href="#">Text</a>
</div>
</div>
<div class="col-lg-8 text-right">
<!-- Button toolbar -->
<div class="btn-toolbar d-inline-block mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
<!-- Dropdown Button -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col-12 py-4">
<button class="btn btn-primary mr-1 mb-1">Primary</button>
<button class="btn btn-secondary mr-1 mb-1">Secondary</button>
<button class="btn btn-info mr-1 mb-1">Info</button>
<button class="btn btn-danger mr-1 mb-1">Danger</button>
<button class="btn btn-success mr-1 mb-1">Success</button>
<button class="btn btn-warning mr-1 mb-1">Warning</button>
<button class="btn btn-light border mr-1 mb-1">Light</button>
<button class="btn btn-dark mr-1 mb-1">Dark</button>
</div>
</div>
</section>
<section id="navs" class="py-3">
<div class="row">
<div class="col-xl-9 pb-4">
<!-- Nav -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link pl-0" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr>
<!-- Nav Tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
</li>
</ul>
<div class="tab-content px-1 pt-2">
<div class="tab-pane active" id="tab1">
<p>
Welcome to my custom <%= humanName %> test page that is a simple way to see various Bootstrap
component examples.
</p>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<div class="tab-pane" id="tab2">2. Put a little content in your pane.</div>
<div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
</div>
</div>
<div class="col-xl-3 pb-4">
<!-- Vertical Nav -->
<ul class="nav nav-pills flex-column mb-3">
<li class="nav-item">
<a class="nav-link active" href="#" data-toggle="popover" data-trigger="hover" data-placement="top"
data-title="Primary color" data-content="Links and 'active' elements always use the primary color.">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- Dropdown Split Button -->
<div class="btn-group mb-3 w-100">
<button type="button" class="btn btn-primary btn-block">Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Link</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</section>
<section id="grid" class="py-3">
<p class="lead">The rows & columns of the world famous Bootstrap grid speak for themselves.</p>
<div class="row">
<div class="col-sm-6">
6
</div>
<div class="col-6">
<div class="card my-1 bg-light">6</div>
</div>
<div class="col-sm-5">
5
</div>
<div class="col-7">
<div class="card my-1">7</div>
</div>
<div class="col-sm-4">
4
</div>
<div class="col-8">
<div class="card my-1">8</div>
</div>
<div class="col-sm-3">
3
</div>
<div class="col-9">
<div class="card my-1">9</div>
</div>
<div class="col-sm-2">
2
</div>
<div class="col-10">
<div class="card my-1">10</div>
</div>
<div class="col-sm-1">
1
</div>
<div class="col-11">
<div class="card my-1">11</div>
</div>
</div>
</section>
<section id="cards" class="bg-faded py-2">
<div class="d-flex my-3">
<!-- Jumbotron -->
<div class="jumbotron w-100 py-5 mx-auto">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-4 mb-4">
<!-- Card -->
<div class="card border-primary h-100">
<div class="card-body d-flex flex-column align-items-start">
<h4 class="card-title text-primary">Card Outline</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
This has text that may wrap to the next line.</p>
<a href="#" class="btn btn-primary mt-auto">Button</a>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-4 mb-4">
<div class="card border-primary h-100">
<div class="card-body">
<!-- List Group -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">List Group</a>
<a href="#" class="list-group-item list-group-item-action">List item</a>
<a href="#" class="list-group-item list-group-item-action">List item 2</a>
<a href="#" class="list-group-item list-group-item-action disabled">List item 3</a>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-lg-4 mb-4">
<div class="card bg-primary text-white h-100">
<div class="card-body d-flex flex-column align-items-start">
<h4 class="card-title">Card</h4>
<p class="card-text">Watch me scale, scale. Now watch me stack, stack. Watch me scale, scale...</p>
<a href="#" class="btn btn-primary border-white mt-auto">Button</a>
</div>
</div>
</div>
</div>
</section>
<section id="forms" class="py-3">
<div class="row">
<div class="col-md-12">
<!-- Form -->
<form role="form">
<div class="form-group row">
<label class="col-md-2 col-form-label form-control-label text-muted">First</label>
<div class="col-md-4">
<input class="form-control" type="text" value="Jane">
</div>
<label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
<div class="col-md-5">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
<div class="col-lg-10">
<input class="form-control" type="text" placeholder="Street">
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label form-control-label text-muted"></label>
<div class="col-lg-6">
<input class="form-control" type="text" placeholder="City">
</div>
<div class="col-lg-4">
<select class="form-control">
<option>State</option>
<option>AK</option>
<option>AZ</option>
<option>CA</option>
<option>CO</option>
</select>
</div>
</div>
<div class="form-group row was-validated">
<label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
<div class="col-lg-10">
<input class="form-control" type="text" required="">
<div class="invalid-feedback">
Username is required.
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label form-control-label text-muted">Password</label>
<div class="col-lg-10">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 col-form-label form-control-label"></label>
<div class="col-lg-10">
<input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
<input type="button" class="btn btn-primary mr-2" value="Submit">
<div class="custom-control custom-checkbox d-inline">
<input type="checkbox" class="custom-control-input" id="customCheck" checked="">
<label class="custom-control-label" for="customCheck">Check me out</label>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<section id="more" class="py-2">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-hover table-sm">
<tbody>
<tr>
<th class="w-25">Location</th>
<th class="w-50">Date</th>
<th class="w-25">Visits</th>
</tr>
<tr>
<td>Westfield</td>
<td>08.05.18 <span class="badge badge-primary">badge</span></td>
<td>2323</td>
</tr>
<tr>
<td>Galway</td>
<td>08.05.18 <span class="badge badge-pill badge-primary">badge-pill</span></td>
<td>5362</td>
</tr>
<tr class="table-primary">
<td>Bern</td>
<td>08.05.18</td>
<td>153</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-100 my-4"></div>
<div class="col-md-12">
<div class="progress mb-2">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">25%</div>
</div>
</div>
<div class="col-md-12">
<!-- Alert -->
<div class="alert alert-primary alert-dismissable show fade" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</html>