From: Jeremy Thomas Date: Wed, 4 Jan 2017 13:05:24 +0000 (+0100) Subject: Explain functions X-Git-Tag: 0.3.0^2~5 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e66684c514b4df33d21251f48f7a8a09054bef33;p=thirdparty%2Fbulma.git Explain functions --- diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html index b1a5e4994..0dc4fd6ef 100644 --- a/docs/_includes/blog-hero.html +++ b/docs/_includes/blog-hero.html @@ -1,10 +1,8 @@ -
-
-
- {% include header.html %} -
-
+
+ {% include header.html %} +
+
diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html index 376707ce9..92b30702b 100644 --- a/docs/_includes/subnav-overview.html +++ b/docs/_includes/subnav-overview.html @@ -4,17 +4,20 @@ Start + + Classes + + + Modular + Variables Responsiveness - - Modular - - - Classes + + Functions
diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html new file mode 100644 index 000000000..107b799c7 --- /dev/null +++ b/docs/documentation/overview/functions.html @@ -0,0 +1,27 @@ +--- +layout: documentation +doc-tab: overview +doc-subtab: functions +--- + +{% include subnav-overview.html %} + +
+
+

Functions

+

Utility functions to calculate colors and other values

+ +
+ +
+

Bulma uses 5 custom functions to help define the values and colors dynamically:

+
    +
  • powerNumber($number, $exp): calculates the value of a number exposed to another one. Returns a number.
    • +
  • colorLuminance($color): defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.
    • +
  • findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.
    • +
  • removeUnit($number): removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.
    • +
  • roundToEvenNumber($number): rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.
    • +
+
+
+
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index 4bad19e5c..ffa57fc58 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -19,8 +19,8 @@ doc-subtab: responsiveness
  • mobile: up to 768px
  • tablet: from 769px
    • -
  • desktop: from 980px
    • -
  • widescreen: from 1180px
    • +
  • desktop: from 1000px
    • +
  • widescreen: from 1192px

Bulma uses 7 responsive mixins:

    @@ -34,23 +34,23 @@ doc-subtab: responsiveness
  • =tablet-only
    - from 769px and until 979px + from 769px and until 999px
  • =touch
    - until 979px + until 999px
  • =desktop
    - from 980px + from 1000px
  • =desktop-only
    - from 980px and until 1179px + from 1000px and until 1191px
  • =widescreen
    - from 1180px + from 1192px

How Bulma works is that everything is mobile-first by default, and responsive mixins act as minimum viewport widths where some alternative styles are applied.

@@ -65,15 +65,15 @@ doc-subtab: responsiveness Tablet
- Between 769px and 979px + Between 769px and 999px Desktop
- Between 980px and 1179px + Between 1000px and 1191px Widescreen
- 1180px and above + 1192px and above diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index a901d7bec..8992dcd22 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -20,9 +20,9 @@ doc-subtab: variables Initial variables: where you define variables by direct value, like:
  • colors: $blue: #42afe3
    • -
  • font families: $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
    • -
  • font sizes: $size-1: 48px
    • -
  • other values: $nav-height: 50px or $easing: ease-out
    • +
  • font families: $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace
    • +
  • font sizes: $size-1: 3.5rem
    • +
  • other values: $easing: ease-out or $radius-large: 5px
  • @@ -40,7 +40,7 @@ doc-subtab: variables
  • Generated variables where variables are calculated from the values set in the previous file. For example, you can have:
      -
    • $body-background: $white: the page's main background
      • +
    • $background: $white-ter: the main background color
    • $link: $primary: the links use the primary color
    • $family-primary: $family-sans-serif: the primary font family is the sans-serif one
    @@ -174,23 +174,23 @@ doc-subtab: variables $size-1 - 48px + 3.5rem $size-2 - 40px + 2.75rem $size-3 - 28px + 2rem $size-4 - 24px + 1.5rem $size-5 - 18px + 1.25rem $size-6 @@ -198,23 +198,23 @@ doc-subtab: variables $size-7 - 11px + 0.75rem - $weight-normal - 400 + $weight-light + 300 - $weight-bold - 700 + $weight-normal + 400 - $weight-title-normal - 300 + $weight-semibold + 500 - $weight-title-bold - 500 + $weight-bold + 700 Breakpoints @@ -224,11 +224,11 @@ doc-subtab: variables $desktop - 980px + 1000px (960px + 40px container) $widescreen - 1180px + 1192px (1152px+ 40px container) Miscellaneous @@ -268,15 +268,11 @@ doc-subtab: variables $light - $grey-lighter + $white-ter $dark - $grey-dark - - - $text - $grey-dark + $grey-darker 3. Generated variables @@ -330,6 +326,10 @@ doc-subtab: variables Text colors + + $text + $grey-dark + $text-invert findColorInvert($text) @@ -378,59 +378,25 @@ doc-subtab: variables $link-hover $grey-darker - - $link-hover-background - $grey-lighter - $link-hover-border $grey-darker - $link-active - $grey-darker - - - $link-active-border + $link-focus $grey-darker - - Control colors - - $control - $text-strong - - - $control-background - $text-invert - - - $control-border - $border - - - $control-hover - $link-hover - - - $control-hover-border - $border-hover - - - $control-active - $link - - $control-active-background - $link + $link-focus-border + $primary - $control-active-background-invert - $link-invert + $link-active + $grey-darker - $control-active-border - $link + $link-active-border + $grey-dark Typography @@ -448,7 +414,7 @@ doc-subtab: variables $size-normal - $size-6 + 1rem $size-medium @@ -456,7 +422,7 @@ doc-subtab: variables $size-large - $size-3 + $size-4 4. Lists and maps diff --git a/docs/images/blog/metro-ui-css-grid-tiles.png b/docs/images/blog/metro-ui-css-grid-tiles.png index 1c3baf01e..764ff9ace 100644 Binary files a/docs/images/blog/metro-ui-css-grid-tiles.png and b/docs/images/blog/metro-ui-css-grid-tiles.png differ diff --git a/docs/index.html b/docs/index.html index 6ccc1696b..b866c81af 100644 --- a/docs/index.html +++ b/docs/index.html @@ -486,7 +486,7 @@ route: index

    Buttons, form controls, menus, tabs, titles, notifications, etc.

    -
    +