Organize partials

This commit is contained in:
Jeremy Thomas
2018-04-09 22:25:26 +01:00
parent a1c1909001
commit e8d4efb274
97 changed files with 691 additions and 835 deletions

View File

@@ -0,0 +1,592 @@
<tr>
<th colspan="2">
Grid system
</th>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/columns/basics/">
columns
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#grid" target="_blank">
row
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/columns/basics/">
column
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#grid" target="_blank">
col
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/layout/tiles/">
tile
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<th colspan="2">
Form
</th>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/form/general/">
field
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/general/">
field is-grouped
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#btn-groups" target="_blank">
button groups
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/general/">
field is-grouped
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#input-groups" target="_blank">
input groups
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/general/">
control
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
form-group
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/general/">
label
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
label
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/input/">
input
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
form-control
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/textarea/">
textarea
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
form-control
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/form/select/">
select
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/checkbox/">
checkbox
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
checkbox
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/radio/">
radio
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
radio
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/form/file/">
file
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/button/">
button is-static
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#forms" target="_blank">
form-control-static
</a>
</td>
</tr>
<tr>
<th colspan="2">
Elements
</th>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/elements/box/">
box
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/button/">
button
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#buttons" target="_blank">
button
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/elements/content/">
content
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/delete/">
delete
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#helper-classes-close" target="_blank">
close
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/icon/">
icon
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#glyphicons" target="_blank">
glyphicon
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/image/">
image
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#thumbnails" target="_blank">
thumbnails
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/image/">
image is-16by9
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#responsive-embed" target="_blank">
responsive embed
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/notification/">
notification
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#alerts" target="_blank">
alerts
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/progress/">
progress
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#progress" target="_blank">
progress bars
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/table/">
table
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#tables" target="_blank">
table
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/tag/">
tag
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#labels" target="_blank">
labels
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/tag/">
tag is-rounded
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#badges" target="_blank">
badges
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/title/">
title
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#type" target="_blank">
h1 .. h6
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/title/">
subtitle
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#type" target="_blank">
h1 .. h6
</a>
</td>
</tr>
<tr>
<td class="bd-is-empty">
</td>
<td class="bd-is-unique">
<a href="https://getbootstrap.com/css/#type-lists" target="_blank">
lists
</a>
</td>
</tr>
<tr>
<td class="bd-is-empty">
</td>
<td class="bd-is-unique">
<a href="https://getbootstrap.com/css/#caret" target="_blank">
caret
</a>
</td>
</tr>
<tr>
<th colspan="2">
Components
</th>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/breadcrumb/">
breadcrumb
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#breadcrumbs" target="_blank">
breadcrumbs
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/card/">
card
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/dropdown/">
dropdown
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#btn-dropdowns" target="_blank">
dropdowns
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/layout/level/">
level
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td class="bd-is-empty">
</td>
<td class="bd-is-unique">
<a href="https://getbootstrap.com/components/#list-group" target="_blank">
list group
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/layout/media-object/">
media object
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#media" target="_blank">
media object
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/menu/">
menu
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/message/">
message
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#panels" target="_blank">
panels
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/modal/">
modal
</a>
</td>
<td>
<a href="https://getbootstrap.com/javascript/#modals" target="_blank">
modal
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/navbar/">
navbar
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#navbar" target="_blank">
navbar
</a>
</td>
</tr>
<tr>
<td class="bd-is-empty">
</td>
<td class="bd-is-unique">
<a href="https://getbootstrap.com/components/#page-header" target="_blank">
page header
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/pagination/">
pagination
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#pagination" target="_blank">
pagination
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/panel/">
panel
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/tabs/">
tabs
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#navs" target="_blank">
navs
</a>
</td>
</tr>
<tr>
<td class="bd-is-empty">
</td>
<td class="bd-is-unique">
<a href="https://getbootstrap.com/components/#wells" target="_blank">
wells
</a>
</td>
</tr>
<tr>
<th colspan="2">
Layout
</th>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/layout/container/">
container
</a>
</td>
<td>
<a href="https://getbootstrap.com/css/#overview-container" target="_blank">
container
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/layout/hero/">
hero
</a>
</td>
<td>
<a href="https://getbootstrap.com/components/#jumbotron" target="_blank">
jumbotron
</a>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/layout/section/">
section
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>
<tr>
<td class="bd-is-unique">
<a href="{{ site.url }}/documentation/layout/footer/">
footer
</a>
</td>
<td class="bd-is-empty">
<span></span>
</td>
</tr>

View File

@@ -0,0 +1,111 @@
<div id="klmn" class="bd-klmn">
<div class="bd-klmn-gaps">
<strong class="bd-klmn-label">
Gap:
<code id="klmnValue"></code>
</strong>
{% for i in (0..8) %}
<a class="bd-klmn-gap" data-value="{{ i }}">
is-{{ i }}
</a>
{% endfor %}
</div>
<div class="bd-klmn-lead">
<div class="columns is-variable bd-klmn-columns">
<div class="column is-3">
<div class="bd-notification is-primary has-text-centered">
Side
</div>
</div>
<div class="column is-9">
<div class="bd-notification is-info has-text-centered">
Main
</div>
</div>
</div>
<div class="columns is-variable bd-klmn-columns">
<div class="column is-4">
<div class="bd-notification is-success has-text-centered">
Three columns
</div>
</div>
<div class="column is-4">
<div class="bd-notification is-warning has-text-centered">
Three columns
</div>
</div>
<div class="column is-4">
<div class="bd-notification is-danger has-text-centered">
Three columns
</div>
</div>
</div>
<div class="columns is-variable bd-klmn-columns">
<div class="column">
<div class="bd-notification is-primary has-text-centered">
1
</div>
</div>
<div class="column">
<div class="bd-notification is-info has-text-centered">
2
</div>
</div>
<div class="column">
<div class="bd-notification is-success has-text-centered">
3
</div>
</div>
<div class="column">
<div class="bd-notification is-warning has-text-centered">
4
</div>
</div>
<div class="column">
<div class="bd-notification is-danger has-text-centered">
5
</div>
</div>
<div class="column">
<div class="bd-notification is-primary has-text-centered">
6
</div>
</div>
<div class="column">
<div class="bd-notification is-info has-text-centered">
7
</div>
</div>
<div class="column">
<div class="bd-notification is-success has-text-centered">
8
</div>
</div>
<div class="column">
<div class="bd-notification is-warning has-text-centered">
9
</div>
</div>
<div class="column">
<div class="bd-notification is-danger has-text-centered">
10
</div>
</div>
<div class="column">
<div class="bd-notification is-primary has-text-centered">
11
</div>
</div>
<div class="column">
<div class="bd-notification is-info has-text-centered">
12
</div>
</div>
</div>
</div>
</div>
<script src="{{ site.url }}/lib/klmn.js"></script>

View File

@@ -0,0 +1,15 @@
<article class="media bd-pro bd-is-{{ include.type }}">
<aside class="media-left">
<span class="icon">
<i class="{% if include.icon_brand %}fab{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
</span>
</aside>
<div class="media-content">
<p class="title is-5 pro-title">
{{ include.title }}
</p>
<div class="bd-pro-content">
{{ include.content | markdownify }}
</div>
</div>
</article>