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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/documentation/elements/box.html
View File

@@ -15,6 +15,32 @@ meta:
---
{% capture box_example %}
<div class="box">
I'm in a box.
</div>
{% endcapture %}
{% capture box_form_example %}
<form class="box">
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="e.g. alex@example.com">
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" placeholder="********">
</div>
</div>
<button class="button is-primary">Sign in</button>
</form>
{% endcapture %}
{% capture box_card_example %}
<div class="box">
<article class="media">
<div class="media-left">
@@ -56,12 +82,26 @@ meta:
<div class="content">
<p>
The <code>box</code> element is simply a container with a shadow, a border, a radius, and some padding.
<br>
For example, you can include a media object:
The <code>box</code> element is a simple container with a white background, some padding, and a box shadow.
</p>
</div>
{% include elements/snippet.html content=box_example more=true %}
{% include elements/snippet.html content=box_example %}
{% include elements/variables.html type='element' %}
<div class="content">
<p>
Because it acts as a container, you can easily include other components, like <strong>form elements</strong>:
</p>
</div>
{% include elements/snippet.html content=box_form_example more=true %}
<div class="content">
<p>
Or a <code>media</code> object:
</p>
</div>
{% include elements/snippet.html content=box_card_example more=true %}
{% include components/variables.html type='element' %}