library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -5,6 +5,7 @@
* **Default font-size is 16px**
* **New `.field` element ; `.control` repurposed**
* **New `.pagination` sizes**
* **New `$fullhd` breakpoint (1344px)**
* Remove monospace named fonts
* Remove icon spacing logic

10
docs/css/bulma-docs.css
View File

@ -2632,6 +2632,12 @@ input[type="submit"].button {
}
}
@media screen and (min-width: 1384px) {
.container {
max-width: 1344px;
}
}
.delete {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -2787,10 +2793,6 @@ input[type="submit"].button {
padding: 1.5rem;
}
.card-content .title + .subtitle {
margin-top: -1.5rem;
}
.card-footer {
border-top: 1px solid #dbdbdb;
align-items: stretch;

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>

2
sass/components/card.sass
View File

@ -24,8 +24,6 @@
.card-content
padding: 1.5rem
.title + .subtitle
margin-top: -1.5rem
.card-footer
border-top: 1px solid $border

6
sass/elements/other.sass
View File

@ -5,13 +5,15 @@
position: relative
+desktop
margin: 0 auto
max-width: $desktop - 40px // 960px
max-width: $desktop - 40px
// Modifiers
&.is-fluid
margin: 0 20px
max-width: none
+widescreen
max-width: $widescreen - 40px // 1152px
max-width: $widescreen - 40px
+fullhd
max-width: $fullhd - 40px
.delete
+delete

19
sass/utilities/mixins.sass
View File

@ -166,17 +166,6 @@
// Responsiveness
$tablet: 769px !default
// 960px container + 40px
$desktop: 1000px !default
// 1152px container + 40
$widescreen: 1192px !default
// 960 and 1152 have been chosen because
// they are divisible by both 12 and 16
=from($device)
@media screen and (min-width: $device)
@content
@ -212,3 +201,11 @@ $widescreen: 1192px !default
=widescreen
@media screen and (min-width: $widescreen)
@content
=widescreen-only
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=fullhd
@media screen and (min-width: $fullhd)
@content

11
sass/utilities/variables.sass
View File

@ -46,6 +46,17 @@ $weight-bold: 700 !default
$body-background: $white !default
$body-size: 16px !default
// Responsiveness
// 960, 1152, and 1344 have been chosen because
// they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 40px
$desktop: 1000px !default
// 1152px container + 40
$widescreen: 1192px !default
// 1344px container + 40
$fullhd: 1384px !default
// Miscellaneous
$easing: ease-out !default
$radius-small: 2px !default