From 38d29ca5b0e593389a1dae7597c97fa3b1b61039 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 14 Mar 2017 21:00:58 +0000 Subject: [PATCH] Add new breakpoint, Explain card --- CHANGELOG.md | 1 + docs/css/bulma-docs.css | 10 +-- docs/documentation/components/card.html | 68 +++++++++++++++++++ docs/documentation/elements/tag.html | 26 +++---- .../modifiers/responsive-helpers.html | 4 +- docs/documentation/modifiers/syntax.html | 24 +++---- sass/components/card.sass | 2 - sass/elements/other.sass | 6 +- sass/utilities/mixins.sass | 19 +++--- sass/utilities/variables.sass | 11 +++ 10 files changed, 125 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38bc87cb..23356226 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index e8db63fb..a58b4c29 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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; diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index 2b37b877..cb63ba39 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -13,6 +13,44 @@ doc-subtab: card
+
+

The card component comprises several elements that you can mix and match:

+ +
+ +
+ {% capture card_example %}
@@ -90,6 +128,36 @@ doc-subtab: card
{% highlight html %} {{card_header_example}} +{% endhighlight %} +
+
+ +
+ +{% capture card_title_example %} +
+
+

+ If Tetris has taught me anything it's that errors pile up and accomplishments disappear. +

+

+ Mark Twain +

+
+ +
+{% endcapture %} +
+
+{{card_title_example}} +
+
+{% highlight html %} +{{card_title_example}} {% endhighlight %}
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index aa69c481..b16af93c 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -38,42 +38,42 @@ doc-subtab: tag Like with buttons, there are 9 different colors available.
-

+

Black

-

+

Dark

-

+

Light

-

+

White

-

+

Primary

-

+

Info

-

+

Success

-

+

Warning @@ -102,12 +102,12 @@ doc-subtab: tag And 2 additional sizes.

-

+

Medium

-

+

Large @@ -126,19 +126,19 @@ doc-subtab: tag You can also append a delete button.

-

+

Bar

-

+

Hello

-

+

World diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index d01a7a82..fc7b3a50 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -29,7 +29,7 @@ doc-subtab: responsive-helpers

For example, here's what the is-flex helper works:

- +
@@ -188,7 +188,7 @@ doc-subtab: responsive-helpers

Hide

- +
diff --git a/docs/documentation/modifiers/syntax.html b/docs/documentation/modifiers/syntax.html index 46f4fa0d..3563d0cf 100644 --- a/docs/documentation/modifiers/syntax.html +++ b/docs/documentation/modifiers/syntax.html @@ -67,19 +67,19 @@ doc-subtab: syntax
-

+

Button

-

+

Button

-

+

Button

-

+

Button

-

+

Button

@@ -115,16 +115,16 @@ doc-subtab: syntax
-

+

Button

-

+

Button

-

+

Button

-

+

Button

@@ -157,13 +157,13 @@ doc-subtab: syntax
-

+

Button

-

+

Button

-

+

Button

diff --git a/sass/components/card.sass b/sass/components/card.sass index 3a031098..dbeaee50 100644 --- a/sass/components/card.sass +++ b/sass/components/card.sass @@ -24,8 +24,6 @@ .card-content padding: 1.5rem - .title + .subtitle - margin-top: -1.5rem .card-footer border-top: 1px solid $border diff --git a/sass/elements/other.sass b/sass/elements/other.sass index ad89730f..aca1ed40 100644 --- a/sass/elements/other.sass +++ b/sass/elements/other.sass @@ -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 diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 15bb6c65..33cb7204 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -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 diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass index 6269d203..9d15b247 100644 --- a/sass/utilities/variables.sass +++ b/sass/utilities/variables.sass @@ -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