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

Add new breakpoint, Explain card

Browse Source
This commit is contained in:
Jeremy Thomas
2017-03-14 21:00:58 +00:00
parent 400dc82c40
commit 38d29ca5b0
10 changed files with 125 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
docs/documentation/components/card.html
View File

@@ -13,6 +13,44 @@ doc-subtab: card
<hr>
<div class="content">
<p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
<ul>
<li>
<code>card</code>: the main container
<ul>
<li>
<code>card-header</code>: a horizontal bar with a shadow
<ul>
<li>
<code>card-header-title</code>: a left-aligned bold text
</li>
<li>
<code>card-header-icon</code>: a placeholder for an icon
</li>
</ul>
</li>
<li>
<code>card-image</code>: a fullwidth container for a reponsive image
</li>
<li>
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
</li>
<li>
<code>card-footer</code>: a horizontal list of controls
<ul>
<li>
<code>card-footer-item</code>: a repeatable list item
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr>
{% capture card_example %}
<div class="card">
<div class="card-image">
@@ -90,6 +128,36 @@ doc-subtab: card
<div class="column">
{% highlight html %}
{{card_header_example}}
{% endhighlight %}
</div>
</div>
<hr>
{% capture card_title_example %}
<div class="card">
<div class="card-content">
<p class="title">
If Tetris has taught me anything it's that errors pile up and accomplishments disappear.
</p>
<p class="subtitle">
Mark Twain
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>More quotes by <a href="#">Mark Twain</a></span>
</p>
</footer>
</div>
{% endcapture %}
<div class="columns">
<div class="column is-one-third">
{{card_title_example}}
</div>
<div class="column">
{% highlight html %}
{{card_title_example}}
{% endhighlight %}
</div>
</div>

26
docs/documentation/elements/tag.html
View File

@@ -38,42 +38,42 @@ doc-subtab: tag
Like with buttons, there are <strong>9 different colors</strong> available.
</div>
<div class="column is-2">
<p class="control">
<p class="field">
<span class="tag is-black">
Black
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-dark">
Dark
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-light">
Light
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-white">
White
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-primary">
Primary
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-info">
Info
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-success">
Success
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-warning">
Warning
</span>
@@ -102,12 +102,12 @@ doc-subtab: tag
And <strong>2 additional</strong> sizes.
</div>
<div class="column is-2">
<p class="control">
<p class="field">
<span class="tag is-primary is-medium">
Medium
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-info is-large">
Large
</span>
@@ -126,19 +126,19 @@ doc-subtab: tag
You can also append a <strong>delete button</strong>.
</div>
<div class="column is-2">
<p class="control">
<p class="field">
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
</p>
<p class="control">
<p class="field">
<span class="tag is-danger is-large">
World
<button class="delete"></button>

4
docs/documentation/modifiers/responsive-helpers.html
View File

@@ -29,7 +29,7 @@ doc-subtab: responsive-helpers
<p>For example, here's what the <code>is-flex</code> helper works:</p>
</div>
<table class="table">
<table class="table is-bordered">
<thead>
<tr>
<th>
@@ -188,7 +188,7 @@ doc-subtab: responsive-helpers
<h3 class="title">Hide</h3>
<table class="table">
<table class="table is-bordered">
<thead>
<tr>
<th>

24
docs/documentation/modifiers/syntax.html
View File

@@ -67,19 +67,19 @@ doc-subtab: syntax
</div>
</div>
<div class="column">
<p class="control">
<p class="field">
<a class="button is-primary">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-info">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-success">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-warning">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-danger">Button</a>
</p>
</div>
@@ -115,16 +115,16 @@ doc-subtab: syntax
</div>
</div>
<div class="column">
<p class="control">
<p class="field">
<a class="button is-small">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-medium">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-large">Button</a>
</p>
</div>
@@ -157,13 +157,13 @@ doc-subtab: syntax
</div>
</div>
<div class="column">
<p class="control">
<p class="field">
<a class="button is-primary is-outlined">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-primary is-loading">Button</a>
</p>
<p class="control">
<p class="field">
<a class="button is-primary is-disabled">Button</a>
</p>
</div>