diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html index 39fba8bc..29ce1e02 100644 --- a/docs/_includes/global/head.html +++ b/docs/_includes/global/head.html @@ -18,6 +18,9 @@ {% if page.mdi %} {% endif %} + {% if page.route == 'index' %} + + {% endif %} diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html index 621f344d..8a1680a8 100644 --- a/docs/_includes/index/customize.html +++ b/docs/_includes/index/customize.html @@ -2,52 +2,83 @@
-
-
-
-

- - So quick to customize - -

-

- Simply set your own Sass variables before importing Bulma -

-
+
+

+ + So quick to customize + +

+

+ Simply set your own Sass variables before importing Bulma +

+
+ +
+
+
+ {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %} +
-
-
-
-

- button +

+
+

Before

+
+

+ Bulma +

+

+ Modern CSS framework based on Flexbox

+
+
+ +
+
+
+

+ + + +

+
+
+ Primary + Link +
- Button
-
-
-

- button is-primary + +

+

After

+
+

+ Bulma +

+

+ Modern CSS framework based on Flexbox

+
+
+ +
+
+
+

+ + + +

+
+
+ Primary + Link +
- Button -
-
-
-

- button is-primary is-large -

-
- Button -
-
-
-

- button is-primary is-large is-loading -

-
- Button
diff --git a/docs/_includes/index/fullheight.html b/docs/_includes/index/fullheight.html index 6d32da90..fb451e92 100644 --- a/docs/_includes/index/fullheight.html +++ b/docs/_includes/index/fullheight.html @@ -1,4 +1,6 @@ -
+{% assign hero_link = site.data.links.by_id['layout-hero'] %} + +
@@ -10,16 +12,17 @@
-
-

- - - - - Easy vertical centering in fullscreen - -

-

Include any content you want, it's always centered

+
+
+

+ + Fullscreen vertical centering + +

+

+ Include any content you want, it's always centered +

+
diff --git a/docs/_includes/snippets/customized.html b/docs/_includes/snippets/customized.html new file mode 100644 index 00000000..9501367a --- /dev/null +++ b/docs/_includes/snippets/customized.html @@ -0,0 +1,25 @@ +// Import a Google Font +@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); + +// Set your brand colors +$purple: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; + +// Update Bulma's global variables +$family-sans-serif: "Nunito", serif; +$grey-dark: $brown; +$grey-light: $beige-light; +$primary: $purple; +$link: $pink; + +// Update some of Bulma's component variables +$control-border-width: 2px; +$input-background-color: $beige-lighter; +$input-border-color: transparent; +$input-shadow: none; + +// Import the rest of Bulma +@import "../bulma"; diff --git a/docs/_includes/test/features.html b/docs/_includes/test/features.html new file mode 100644 index 00000000..29699ea7 --- /dev/null +++ b/docs/_includes/test/features.html @@ -0,0 +1,638 @@ +{% capture form %} +
+ +
+ +
+
+
+

+ + + +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ + +

+
+
+

+ Button +

+
+{% endcapture %} + +{% capture box %} +
+
+
+
+ Image +
+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. +

+
+ +
+
+
+{% endcapture %} + +{% capture button %} +
+
Button
+
White
+
Light
+
Dark
+
Black
+
Text
+
+ +
+
Primary
+
Link
+
Info
+
Success
+
Warning
+
Danger
+
+{% endcapture %} + +{% capture notification %} +
+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, + consectetur adipiscing elit +
+{% endcapture %} + +{% capture progress %} +30% +{% endcapture %} + +{% capture tags %} +Black +Dark +Light +White +Primary +Link +Info +Success +Warning +Danger +{% endcapture %} + +{% capture cards %} +
+
+
+
+
+ Image +
+
+
+
+
+
+ Image +
+
+
+

John Smith

+

@johnsmith

+
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus nec iaculis mauris. @bulmaio. + #css #responsive +
+ 11:09 PM - 1 Jan 2016 +
+
+
+
+ +
+
+
+

+ “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.” +

+

+ Jeff Atwood +

+
+ +
+
+
+{% endcapture %} + +{% capture dropdown %} +
+
+ + Dropdown button + + + + +
+
+
+ + Dropdown item + + + Other dropdown item + + + Active dropdown item + + + Other item + +
+ + With a divider + +
+
+
+{% endcapture %} + +{% capture message %} +
+
+

Primary

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. +
+
+{% endcapture %} + +{% capture pagination %} + +{% endcapture %} + +{% capture panel %} + +{% endcapture %} + +{% capture tabs %} +
+ +
+{% endcapture %} + +{% capture media %} +
+
+

+ +

+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ +
+
+ +
+
+{% endcapture %} + +{% capture menu %} + +{% endcapture %} + +
+
+
+
+

Elements

+
+
+
+
+

+ + Form + +

+
+
+ {{ form }} +
+
+ +
+
+

+ + Box + +

+
+
+ {{ box }} +
+
+ +
+
+

+ + Button + +

+
+
+ {{ button }} +
+
+ +
+
+

+ + Notification + +

+
+
+ {{ notification }} +
+
+ +
+
+

+ + Progress bar + +

+
+
+ {{ progress }} +
+
+ +
+
+

+ + Tags + +

+
+
+ {{ tags }} +
+
+
+
+
+
+ +
+ +
+
+
+
+

Components

+
+
+
+
+

+ + Card + +

+
+
+ {{ cards }} +
+
+ +
+
+

+ + Dropdown + +

+
+
+ {{ dropdown }} +
+
+ +
+
+

+ + Message + +

+
+
+ {{ message }} +
+
+ +
+
+

+ + Pagination + +

+
+
+ {{ pagination }} +
+
+ +
+
+

+ + Tabs + +

+
+
+ {{ tabs }} +
+
+ +
+
+

+ + Media object + +

+
+
+ {{ media }} +
+
+ +
+
+

+ + Menu + + and + + Panel + +

+
+
+
+
+ {{ menu }} +
+
+ {{ panel }} +
+
+
+
+ +
+
+
+
diff --git a/docs/_includes/test/from-to.html b/docs/_includes/test/from-to.html new file mode 100644 index 00000000..5d065c12 --- /dev/null +++ b/docs/_includes/test/from-to.html @@ -0,0 +1,31 @@ +
+
+
+

+ Bulma +

+

+ Modern CSS framework based on Flexbox +

+
+ +
+ +
+
+
+

+ + + +

+
+
+ Primary + Link +
+
+
+
diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index a304de39..e01572fe 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -15,12 +15,71 @@ strong color: $primary .subtitle - color: $grey-light + color: $grey-light !important strong color: currentColor &.bd-is-left text-align: left +// Customize + +.bd-index-custom-title + color: $grey-light + +.bd-index-custom-example + padding: 1rem + .subtitle + margin-bottom: 0.5rem + +.bd-index-custom.bd-is-after + color: $brown + font-family: "Nunito", serif + margin-top: 0.5rem + a + color: $pink + &:hover + color: #363636 + .subtitle + color: $brown + .input, + .select select + background-color: $beige-lighter + border-color: transparent + border-width: 2px + box-shadow: none + font-family: "Nunito", serif + &:hover + border-color: $beige-light + &:focus + border-color: $pink + box-shadow: 0 0 0 0.125em rgba($pink, 0.25) + .select + &:not(.is-multiple):not(:hover) + &::after + border-color: $pink + .button + &.is-primary + background-color: $mauve + color: $white + &:hover + background-color: darken($mauve, 2.5%) + &:active + background-color: darken($mauve, 5%) + &.is-link + background-color: $pink + color: $white + &:hover + background-color: darken($pink, 2.5%) + &:active + background-color: darken($pink, 5%) + +// Fullscreen + +.bd-index-fullscreen + .tabs + a + color: $grey-light !important + // Columns #grid diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 00ed3a5e..f43e6a93 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -12,6 +12,12 @@ $bleeding-red: #CA1F26 $star: #FFD257 $rss: #f26522 +$mauve: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; + $carbon-width: 300px $carbon-height: 100px $main-spacing: 3rem diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index f8f21f3f..b7ee680c 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10121,7 +10121,7 @@ svg { } .bd-index-header .subtitle { - color: #b5b5b5; + color: #b5b5b5 !important; } .bd-index-header .subtitle strong { @@ -10132,6 +10132,90 @@ svg { text-align: left; } +.bd-index-custom-title { + color: #b5b5b5; +} + +.bd-index-custom-example { + padding: 1rem; +} + +.bd-index-custom-example .subtitle { + margin-bottom: 0.5rem; +} + +.bd-index-custom.bd-is-after { + color: #757763; + font-family: "Nunito", serif; + margin-top: 0.5rem; +} + +.bd-index-custom.bd-is-after a { + color: #FA7C91; +} + +.bd-index-custom.bd-is-after a:hover { + color: #363636; +} + +.bd-index-custom.bd-is-after .subtitle { + color: #757763; +} + +.bd-index-custom.bd-is-after .input, +.bd-index-custom.bd-is-after .select select { + background-color: #EFF0EB; + border-color: transparent; + border-width: 2px; + box-shadow: none; + font-family: "Nunito", serif; +} + +.bd-index-custom.bd-is-after .input:hover, +.bd-index-custom.bd-is-after .select select:hover { + border-color: #D0D1CD; +} + +.bd-index-custom.bd-is-after .input:focus, +.bd-index-custom.bd-is-after .select select:focus { + border-color: #FA7C91; + box-shadow: 0 0 0 0.125em rgba(250, 124, 145, 0.25); +} + +.bd-index-custom.bd-is-after .select:not(.is-multiple):not(:hover)::after { + border-color: #FA7C91; +} + +.bd-index-custom.bd-is-after .button.is-primary { + background-color: #8A4D76; + color: white; +} + +.bd-index-custom.bd-is-after .button.is-primary:hover { + background-color: #82486f; +} + +.bd-index-custom.bd-is-after .button.is-primary:active { + background-color: #7a4468; +} + +.bd-index-custom.bd-is-after .button.is-link { + background-color: #FA7C91; + color: white; +} + +.bd-index-custom.bd-is-after .button.is-link:hover { + background-color: #fa7087; +} + +.bd-index-custom.bd-is-after .button.is-link:active { + background-color: #f9637c; +} + +.bd-index-fullscreen .tabs a { + color: #b5b5b5 !important; +} + #grid .notification { padding-left: 0; padding-right: 0; diff --git a/docs/test.html b/docs/test.html new file mode 100644 index 00000000..3d198abf --- /dev/null +++ b/docs/test.html @@ -0,0 +1,22 @@ +--- +--- + + + + + + + + Bulma test page + + + + + {% include global/navbar.html %} + {% include test/from-to.html %} + {% include test/features.html %} + + + + + diff --git a/package.json b/package.json index d9994293..e51f57fa 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,7 @@ "docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css", "start": "npm run build-sass -- --watch", "start-docs": "npm run docs-sass -- --watch", - "start-test": "npm run test-sass -- --watch", - "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css", + "start-test": "npm run test-scss -- --watch", "test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css" }, "files": [