Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 20:24:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improve snippet

Browse Source
This commit is contained in:
Jeremy Thomas
2017-10-09 15:38:12 +01:00
parent 720ed45121
commit 70367c3b5d
22 changed files with 2121 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
docs/documentation/layout/footer.html
View File

@@ -10,6 +10,25 @@ variables:
{% include subnav-layout.html %}
{% capture footer_example %}
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://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>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Footer</h1>
@@ -17,43 +36,7 @@ variables:
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
</h2>
<div class="bd-example">
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://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>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
</div>
{% highlight html %}
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Bulma</strong> by <a href="http://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>
<p>
<a class="icon" href="https://github.com/jgthms/bulma">
<i class="fa fa-github"></i>
</a>
</p>
</div>
</div>
</footer>
{% endhighlight %}
{% include snippet.html content=footer_example horizontal=true more=true %}
{% include variables.html layout=true %}
</div>

26
docs/documentation/layout/hero.html
View File

@@ -650,27 +650,7 @@ doc-subtab: hero
{% endcapture %}
<section class="section is-fullwidth">
<div class="bd-example">
{{ heroNavbarA }}
</div>
<div class="bd-highlight-clipped">
{% highlight html %}{{ heroNavbarA }}{% endhighlight %}
</div>
<div class="bd-example">
{{ heroNavbarB }}
</div>
<div class="bd-highlight-clipped">
{% highlight html %}{{ heroNavbarB }}{% endhighlight %}
</div>
<div class="bd-example">
{{ heroNavbarC }}
</div>
<div class="bd-highlight-clipped">
{% highlight html %}{{ heroNavbarC }}{% endhighlight %}
</div>
{% include snippet.html content=heroNavbarA horizontal=true more=true %}
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
</section>

23
docs/documentation/layout/level.html
View File

@@ -188,10 +188,7 @@ doc-subtab: level
</nav>
</div>
<div class="bd-example">
{{nav_example}}
</div>
{% highlight html %}{{nav_example}}{% endhighlight %}
{% include snippet.html content=nav_example horizontal=true more=true %}
{% include anchor.html name="Centered level" %}
@@ -199,17 +196,9 @@ doc-subtab: level
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
</div>
<div class="bd-example">
{{nav_centered_example}}
</div>
{% include snippet.html content=nav_centered_example horizontal=true more=true %}
{% highlight html %}{{nav_centered_example}}{% endhighlight %}
<div class="bd-example">
{{nav_centered_bis_example}}
</div>
{% highlight html %}{{nav_centered_bis_example}}{% endhighlight %}
{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
{% include anchor.html name="Mobile level" %}
@@ -217,11 +206,7 @@ doc-subtab: level
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
</div>
<div class="bd-example">
{{nav_mobile_example}}
</div>
{% highlight html %}{{nav_mobile_example}}{% endhighlight %}
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
</div>
</section>

18
docs/documentation/layout/media-object.html
View File

@@ -203,21 +203,13 @@ doc-subtab: media-object
</article>
</div>
<div class="bd-example">
{{media_example}}
</div>
{% highlight html %}{{media_example}}{% endhighlight %}
{% include snippet.html content=media_example horizontal=true more=true %}
<div class="content">
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
</div>
<div class="bd-example">
{{media_bis_example}}
</div>
{% highlight html %}{{media_bis_example}}{% endhighlight %}
{% include snippet.html content=media_bis_example horizontal=true more=true %}
{% include anchor.html name="Nesting" %}
@@ -225,11 +217,7 @@ doc-subtab: media-object
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
</div>
<div class="bd-example">
{{media_nested_example}}
</div>
{% highlight html %}{{media_nested_example}}{% endhighlight %}
{% include snippet.html content=media_nested_example horizontal=true more=true %}
</div>
</section>