From: Jeremy Thomas Date: Fri, 23 Sep 2016 21:08:03 +0000 (+0100) Subject: Add modularity X-Git-Tag: 0.2.0~6 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a5a33eefe16bc950ca33381f0b6164a232e5f9f8;p=thirdparty%2Fbulma.git Add modularity --- diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 465b56c40..c95dfacfa 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -95,6 +95,10 @@ color: white; } + a.column:hover .title strong { + border-bottom: 1px solid; + } + @media screen and (max-width: 979px) { .title.is-2 a { padding-left: 0; diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html index a01b32f38..b1a6a3c61 100644 --- a/docs/_includes/subnav-overview.html +++ b/docs/_includes/subnav-overview.html @@ -7,12 +7,15 @@ Variables - - Classes - Responsiveness + + Modular + + + Classes + diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 15e3ffd03..db1cb750e 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -240,6 +240,7 @@ $structure-invert: $danger-invert border: solid $border border-width: 0 0 1px 1px color: $text-light + cursor: pointer outline: none position: absolute right: 0 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2b028cce7..8bcff189c 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -160,7 +160,7 @@ hr { border: none; display: block; height: 1px; - margin: 40px 0; + margin: 20px 0; } img { @@ -2613,12 +2613,13 @@ a.box:active { user-select: none; -moz-appearance: none; -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); + background-color: rgba(18, 18, 18, 0.1); border: none; border-radius: 290486px; cursor: pointer; display: inline-block; height: 24px; + outline: none; position: relative; vertical-align: top; width: 24px; @@ -2646,7 +2647,7 @@ a.box:active { } .delete:hover { - background-color: rgba(18, 18, 18, 0.5); + background-color: rgba(18, 18, 18, 0.2); } .delete.is-small { @@ -3641,12 +3642,13 @@ a.box:active { user-select: none; -moz-appearance: none; -webkit-appearance: none; - background-color: rgba(18, 18, 18, 0.2); + background-color: rgba(18, 18, 18, 0.1); border: none; border-radius: 290486px; cursor: pointer; display: inline-block; height: 24px; + outline: none; position: relative; vertical-align: top; width: 24px; @@ -3680,7 +3682,7 @@ a.box:active { } .modal-close:hover { - background-color: rgba(18, 18, 18, 0.5); + background-color: rgba(18, 18, 18, 0.2); } .modal-close.is-small { @@ -4367,6 +4369,7 @@ a.panel-block:hover { } .column { + display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; @@ -5137,6 +5140,7 @@ a.panel-block:hover { .tile { align-items: stretch; + display: block; flex-basis: auto; flex-grow: 1; flex-shrink: 1; @@ -6529,6 +6533,7 @@ body.page-grid .column > .notification { border: solid #dbdbdb; border-width: 0 0 1px 1px; color: #b5b5b5; + cursor: pointer; outline: none; position: absolute; right: 0; diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html new file mode 100644 index 000000000..bf0a6bd2d --- /dev/null +++ b/docs/documentation/overview/modular.html @@ -0,0 +1,97 @@ +--- +layout: documentation +doc-tab: overview +doc-subtab: modular +--- + +{% include subnav-overview.html %} + +
+
+

Modular

+

Just import what you need

+ +
+ +
+

+ Bulma consists of 29 .sass files that you can import individually. +

+

+ For example, let's say you only want the Bulma columns. +
+ The file is located in the bulma/sass/grid folder. +
+ Simply import it directly: +

+{% highlight sass %} +@import "bulma/sass/grid/columns.sass" +{% endhighlight %} +

+ Now you can use the classes .columns (for the container) and .column directly: +

+{% highlight html %} +
+
1
+
2
+
3
+
4
+
5
+
+{% endhighlight %} + +
+ +

+ What if you only want the button styles instead? +

+{% highlight sass %} +@import "bulma/sass/elements/button.sass" +{% endhighlight %} +

+ You can now use the .button class, and all its modifiers: +

+
    +
  • + .is-active +
    • +
  • + .is-primary, + .is-info, + .is-success... +
    • +
  • + .is-small, + .is-medium, + .is-large +
    • +
  • + .is-outlined, + .is-inverted, + .is-link +
    • +
  • + .is-disabled, + .is-loading +
    • +
+{% highlight html %} + + Button + + + + Primary button + + + + Large button + + + + Loading button + +{% endhighlight %} +
+
+
diff --git a/docs/index.html b/docs/index.html index a925260b5..9794e9f01 100644 --- a/docs/index.html +++ b/docs/index.html @@ -47,7 +47,7 @@ route: index
@@ -285,7 +301,7 @@ route: index

- + New

diff --git a/sass/base/base.sass b/sass/base/base.sass index b59b2fa10..e913d6ba3 100644 --- a/sass/base/base.sass +++ b/sass/base/base.sass @@ -1,5 +1,5 @@ @charset "utf-8" -@import "minireset" -@import "generic" -@import "helpers" +@import "minireset.sass" +@import "generic.sass" +@import "helpers.sass" diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 635601352..d0198f82b 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -62,7 +62,7 @@ hr border: none display: block height: 1px - margin: 40px 0 + margin: 20px 0 img max-width: 100% diff --git a/sass/components/components.sass b/sass/components/components.sass index 7ea178fa7..0eaf7edea 100644 --- a/sass/components/components.sass +++ b/sass/components/components.sass @@ -1,13 +1,13 @@ @charset "utf-8" -@import "card" -@import "highlight" -@import "level" -@import "media" -@import "menu" -@import "message" -@import "modal" -@import "nav" -@import "pagination" -@import "panel" -@import "tabs" +@import "card.sass" +@import "highlight.sass" +@import "level.sass" +@import "media.sass" +@import "menu.sass" +@import "message.sass" +@import "modal.sass" +@import "nav.sass" +@import "pagination.sass" +@import "panel.sass" +@import "tabs.sass" diff --git a/sass/elements/elements.sass b/sass/elements/elements.sass index b1d20059b..e92f8de9d 100644 --- a/sass/elements/elements.sass +++ b/sass/elements/elements.sass @@ -1,13 +1,13 @@ @charset "utf-8" -@import "box" -@import "button" -@import "content" -@import "form" -@import "image" -@import "notification" -@import "progress" -@import "table" -@import "title" +@import "box.sass" +@import "button.sass" +@import "content.sass" +@import "form.sass" +@import "image.sass" +@import "notification.sass" +@import "progress.sass" +@import "table.sass" +@import "title.sass" -@import "other" +@import "other.sass" diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass index e3f91aea5..f3e988f8e 100644 --- a/sass/grid/columns.sass +++ b/sass/grid/columns.sass @@ -2,6 +2,7 @@ @import "../utilities/variables.sass" .column + display: block flex-basis: 0 flex-grow: 1 flex-shrink: 1 diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass index 92a4634a8..e53070f6c 100644 --- a/sass/grid/grid.sass +++ b/sass/grid/grid.sass @@ -1,4 +1,4 @@ @charset "utf-8" -@import "columns" -@import "tiles" +@import "columns.sass" +@import "tiles.sass" diff --git a/sass/grid/tiles.sass b/sass/grid/tiles.sass index f4d5675ee..7c5220b39 100644 --- a/sass/grid/tiles.sass +++ b/sass/grid/tiles.sass @@ -3,6 +3,7 @@ .tile align-items: stretch + display: block flex-basis: auto flex-grow: 1 flex-shrink: 1 diff --git a/sass/layout/layout.sass b/sass/layout/layout.sass index 8792926bf..143ada35b 100644 --- a/sass/layout/layout.sass +++ b/sass/layout/layout.sass @@ -1,5 +1,5 @@ @charset "utf-8" -@import "hero" -@import "section" -@import "footer" +@import "hero.sass" +@import "section.sass" +@import "footer.sass" diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 53a21d756..46b9c8457 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -34,12 +34,13 @@ +unselectable -moz-appearance: none -webkit-appearance: none - background-color: rgba($black, 0.2) + background-color: rgba($black, 0.1) border: none border-radius: 290486px cursor: pointer display: inline-block height: 24px + outline: none position: relative vertical-align: top width: 24px @@ -60,7 +61,7 @@ &:after transform: rotate(-45deg) &:hover - background-color: rgba($black, 0.5) + background-color: rgba($black, 0.2) // Sizes &.is-small height: 16px