mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 04:14:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
35
docs/_includes/library/layout/container.html
Normal file
35
docs/_includes/library/layout/container.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<div class="container">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>centered</strong> on desktop and larger viewports.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-fullhd">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-max-desktop">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-max-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container is-fluid">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any viewport size.
|
||||
</div>
|
||||
</div>
|
||||
9
docs/_includes/library/layout/footer.html
Normal file
9
docs/_includes/library/layout/footer.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed
|
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
231
docs/_includes/library/layout/hero.html
Normal file
231
docs/_includes/library/layout/hero.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<p class="title">Hero title</p>
|
||||
<p class="subtitle">Hero subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<section class="hero is-{{ status }}">
|
||||
<div class="hero-body">
|
||||
<p class="title">{{ status | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ status | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.colors.sizes %}
|
||||
<section class="hero is-{{ size }}">
|
||||
<div class="hero-body">
|
||||
<p class="title">{{ size | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ size | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
<section class="hero is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div>
|
||||
<p class="title">{{ 'halfheight' | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ 'halfheight' | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div>
|
||||
<p class="title">{{ 'fullheight' | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ 'fullheight' | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-primary is-medium">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroA">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroA" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroB">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroB" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Modifiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Grid</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Components</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="hero is-success is-fullheight">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<header class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroC">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroC" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
100
docs/_includes/library/layout/level.html
Normal file
100
docs/_includes/library/layout/level.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5"><strong>123</strong> posts</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">Search</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<p class="level-item"><strong>All</strong></p>
|
||||
<p class="level-item"><a>Published</a></p>
|
||||
<p class="level-item"><a>Drafts</a></p>
|
||||
<p class="level-item"><a>Deleted</a></p>
|
||||
<p class="level-item"><a class="button is-success">New</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-type.png" alt="" style="height: 30px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item has-text-centered">
|
||||
<div>
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
150
docs/_includes/library/layout/media.html
Normal file
150
docs/_includes/library/layout/media.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
|
||||
vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<button aria-label="delete" class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox"> <input type="checkbox"> Press enter to submit </label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Barbara Middleton</strong>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non.
|
||||
Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/96x96.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sean Brown</strong>
|
||||
<br>
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et
|
||||
netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod.
|
||||
Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/96x96.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Kayli Eunice </strong>
|
||||
<br>
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna
|
||||
vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
||||
posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
|
||||
<br>
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<button aria-label="delete" class="button">Post comment</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
20
docs/_includes/library/layout/section.html
Normal file
20
docs/_includes/library/layout/section.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<section class="section">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section class="section is-medium">
|
||||
<h1 class="title">Medium section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section class="section is-large">
|
||||
<h1 class="title">Large section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
Reference in New Issue
Block a user