Add comparison table

This commit is contained in:
Jeremy Thomas 2017-07-31 17:32:41 +01:00
parent 754b8bf081
commit 236837f36c
5 changed files with 707 additions and 15 deletions

View File

@ -0,0 +1,592 @@
<tr>
<th colspan="2">
Grid system
</th>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/grid/columns/">
columns
</a>
</td>
<td>
<a href="http://getbootstrap.com/css/#grid" target="_blank">
row
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/grid/columns/">
column
</a>
</td>
<td>
<a href="http://getbootstrap.com/css/#grid" target="_blank">
col
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/grid/tiles/">
tile
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<th colspan="2">
Form
</th>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/general/">
field
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/general/">
field is-grouped
</a>
</td>
<td>
<a href="http://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="http://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="http://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="http://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="http://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="http://getbootstrap.com/css/#forms" target="_blank">
form-control
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/select/">
select
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/checkbox/">
checkbox
</a>
</td>
<td>
<a href="http://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="http://getbootstrap.com/css/#forms" target="_blank">
radio
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/form/file/">
file
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/button/">
button is-static
</a>
</td>
<td>
<a href="http://getbootstrap.com/css/#forms" target="_blank">
form-control-static
</a>
</td>
</tr>
<tr>
<th colspan="2">
Elements
</th>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/box/">
box
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/button/">
button
</a>
</td>
<td>
<a href="http://getbootstrap.com/css/#buttons" target="_blank">
button
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/content/">
content
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/elements/delete/">
delete
</a>
</td>
<td>
<a href="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://getbootstrap.com/css/#type" target="_blank">
h1 .. h6
</a>
</td>
</tr>
<tr>
<td class="is-empty">
</td>
<td>
<a href="http://getbootstrap.com/css/#type-lists" target="_blank">
lists
</a>
</td>
</tr>
<tr>
<td class="is-empty">
</td>
<td>
<a href="http://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="http://getbootstrap.com/components/#breadcrumbs" target="_blank">
breadcrumbs
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/card/">
card
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/dropdown/">
dropdown
</a>
</td>
<td>
<a href="http://getbootstrap.com/components/#btn-dropdowns" target="_blank">
dropdowns
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/level/">
level
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td class="is-empty">
</td>
<td>
<a href="http://getbootstrap.com/components/#list-group" target="_blank">
list group
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/media-object/">
media object
</a>
</td>
<td>
<a href="http://getbootstrap.com/components/#media" target="_blank">
media object
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/menu/">
menu
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/message/">
message
</a>
</td>
<td>
<a href="http://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="http://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="http://getbootstrap.com/components/#navbar" target="_blank">
navbar
</a>
</td>
</tr>
<tr>
<td class="is-empty">
</td>
<td>
<a href="http://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="http://getbootstrap.com/components/#pagination" target="_blank">
pagination
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/panel/">
panel
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/components/tabs/">
tabs
</a>
</td>
<td>
<a href="http://getbootstrap.com/components/#navs" target="_blank">
navs
</a>
</td>
</tr>
<tr>
<td class="is-empty">
</td>
<td>
<a href="http://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="http://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="http://getbootstrap.com/components/#jumbotron" target="_blank">
jumbotron
</a>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/layout/section/">
section
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>
<tr>
<td>
<a href="{{ site.url }}/documentation/layout/footer/">
footer
</a>
</td>
<td class="is-empty">
<span></span>
</td>
</tr>

View File

@ -1,9 +1,9 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
<g odipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<path fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
c56.1,0,102,45.9,102,102V510z"/>
<g id="B" enable-background="new ">
<g enable-background="new">
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -17,12 +17,11 @@ $bootstrap-invert: #fff
color: $bootstrap-invert
.pros-heading
padding: 2rem
padding-bottom: 0
padding: 0 2rem
text-align: center
.pros-icon
margin-bottom: 2rem
margin-bottom: 3rem
text-align: center
svg
height: 3rem
@ -57,4 +56,30 @@ $bootstrap-invert: #fff
.separator
color: $border
margin: 0 0.25em
margin: 0 0.25em
.comparison
margin: 0 auto
max-width: 42rem
.table
svg
float: left
height: 1rem
margin-right: 0.5rem
margin-top: 0.25rem
width: auto
tbody
th[colspan]
font-size: 1.25em
a
color: $red
font-family: $family-monospace
&:hover
color: $text-strong
text-decoration: underline
.is-empty
background-color: $background
color: $text-light
.comparison-header
margin-bottom: 3rem

View File

@ -107,11 +107,16 @@ bootstrap:
</section>
</main>
<div class="section notification">
<h2 class="subtitle">
<div class="container">
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
</div>
</h2>
</div>
<section class="section">
<div class="container">
<h2 class="subtitle">
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
</h2>
<div class="columns is-desktop">
<div class="column is-half-desktop">
@ -154,6 +159,41 @@ bootstrap:
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="section">
<div class="container">
<div class="comparison">
<header class="comparison-header has-text-centered">
<h2 class="title">
Comparison table
</h2>
<p class="subtitle">
See which elements of the framework exist (or not) in the other
</p>
</header>
<table class="table is-bordered is-fullwidth">
<thead>
<tr>
<th>{% include svg/bulma-b.svg %}Bulma</th>
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
</tr>
</thead>
<tfoot>
<tr>
<th>{% include svg/bulma-b.svg %}Bulma</th>
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
</tr>
</tfoot>
<tbody>
{% include comparison.html %}
</tbody>
</table>
</div>
</div>
</section>

File diff suppressed because one or more lines are too long