From 999c284dccfec7890d2372969e3d78443599f383 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 18:50:19 +0100 Subject: [PATCH] Add more layout --- docs/_data/links.json | 10 +- .../categories.html} | 0 docs/_includes/components/more.html | 13 + docs/_includes/content/pro.html | 5 + docs/_includes/footer/boxes.html | 18 +- docs/_includes/footer/link.html | 13 + docs/_includes/footer/links.html | 21 +- docs/_includes/layout/main-close.html | 2 +- docs/_layouts/documentation.html | 2 +- docs/_layouts/more.html | 85 +++++++ docs/_sass/bootstrap.sass | 24 +- docs/alternative-to-bootstrap.html | 239 ++++++------------ docs/backers.html | 112 ++++---- docs/bulma-start.html | 119 ++++----- docs/css/bulma-docs.css | 54 ++-- docs/extensions.html | 93 +++---- docs/made-with-bulma.html | 207 +++++++-------- 17 files changed, 460 insertions(+), 557 deletions(-) rename docs/_includes/{elements/categories-nav.html => components/categories.html} (100%) create mode 100644 docs/_includes/components/more.html create mode 100644 docs/_includes/footer/link.html create mode 100644 docs/_layouts/more.html diff --git a/docs/_data/links.json b/docs/_data/links.json index 9f0f4108..962d6c72 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -323,10 +323,6 @@ "name": "Blog", "path": "/blog" }, - "more": { - "name": "More", - "path": "/more" - }, "expo": { "name": "Expo", "subtitle": "Official Bulma showcase", @@ -341,6 +337,10 @@ "icon": "heart", "path": "/love" }, + "more": { + "name": "More", + "path": "/more" + }, "bulma-start": { "name": "Bulma start", "subtitle": "A tiny npm package to get started", @@ -379,8 +379,6 @@ } }, "more": [ - "expo", - "love", "bulma-start", "made-with-bulma", "bootstrap", diff --git a/docs/_includes/elements/categories-nav.html b/docs/_includes/components/categories.html similarity index 100% rename from docs/_includes/elements/categories-nav.html rename to docs/_includes/components/categories.html diff --git a/docs/_includes/components/more.html b/docs/_includes/components/more.html new file mode 100644 index 00000000..de2d22a2 --- /dev/null +++ b/docs/_includes/components/more.html @@ -0,0 +1,13 @@ + diff --git a/docs/_includes/content/pro.html b/docs/_includes/content/pro.html index bb0edc5b..91623ffd 100644 --- a/docs/_includes/content/pro.html +++ b/docs/_includes/content/pro.html @@ -10,6 +10,11 @@

{{ include.content | markdownify }} + + {% if include.title == 'No JavaScript' %} + {% assign tweet = site.data.love.tweetsById.860885116909998080 %} + {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %} + {% endif %}
diff --git a/docs/_includes/footer/boxes.html b/docs/_includes/footer/boxes.html index 2792869d..394c7c86 100644 --- a/docs/_includes/footer/boxes.html +++ b/docs/_includes/footer/boxes.html @@ -1,12 +1,12 @@ -{% assign boostrap_link = site.data.links.by_id['boostrap'] %} +{% assign bootstrap_link = site.data.links.by_id['bootstrap'] %} {% assign expo_link = site.data.links.by_id['expo'] %} {% assign love_link = site.data.links.by_id['love'] %}
- +

- Coming from Bootstrap + {{ bootstrap_link.name }}

An alternative to Bootstrap @@ -21,10 +21,10 @@

- - + + - Expo + {{ expo_link.name }}

See what you can build with Bulma @@ -35,10 +35,10 @@

- - + + - Love + {{ love_link.name }}

Fans of Bulma diff --git a/docs/_includes/footer/link.html b/docs/_includes/footer/link.html new file mode 100644 index 00000000..523c18db --- /dev/null +++ b/docs/_includes/footer/link.html @@ -0,0 +1,13 @@ +

+ + + + + + {{ link.name }} + + + {{ link.subtitle }} + + +

diff --git a/docs/_includes/footer/links.html b/docs/_includes/footer/links.html index 60b70a79..c97e035f 100644 --- a/docs/_includes/footer/links.html +++ b/docs/_includes/footer/links.html @@ -50,22 +50,15 @@ More

+ {% assign link = site.data.links.by_id['expo'] %} + {% include footer/link.html %} + + {% assign link = site.data.links.by_id['love'] %} + {% include footer/link.html %} + {% for link_id in site.data.links.more %} {% assign link = site.data.links.by_id[link_id] %} - -

- - - - - - {{ link.name }} - - - {{ link.subtitle }} - - -

+ {% include footer/link.html %} {% endfor %}
diff --git a/docs/_includes/layout/main-close.html b/docs/_includes/layout/main-close.html index db38d4c0..86db930e 100644 --- a/docs/_includes/layout/main-close.html +++ b/docs/_includes/layout/main-close.html @@ -7,7 +7,7 @@ diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 201633eb..d4c07c4b 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -84,7 +84,7 @@ route: documentation diff --git a/docs/_layouts/more.html b/docs/_layouts/more.html new file mode 100644 index 00000000..8d9d1d61 --- /dev/null +++ b/docs/_layouts/more.html @@ -0,0 +1,85 @@ +--- +layout: default +route: more +--- + +{% include global/navbar.html id="More" %} + +{% assign current_link_id = page.breadcrumb | last %} +{% assign current_link = site.data.links.by_id[current_link_id] %} + +{% assign category_links = site.data.links.more %} + +{% for link_id in category_links %} + {% if link_id == current_link_id %} + {% unless forloop.first %} + {% assign previous_index = forloop.index0 | minus: 1 %} + {% assign previous_link_id = category_links[previous_index] %} + {% assign previous_link = site.data.links.by_id[previous_link_id] %} + {% endunless %} + + {% unless forloop.last %} + {% assign next_index = forloop.index0 | plus: 1 %} + {% assign next_link_id = category_links[next_index] %} + {% assign next_link = site.data.links.by_id[next_link_id] %} + {% endunless %} + {% endif %} +{% endfor %} + +
+
+
+
+
+ {% include components/breadcrumb.html %} + +
+
+

+ {% if page.title %} + {{ page.title }} + {% else %} + {{ current_link.name }} + {% endif %} +

+

+ {% if page.subtitle %} + {{ page.subtitle }} + {% else %} + {{ current_link.subtitle }} + {% endif %} +

+
+ +
+ {% include elements/carbon.html %} +
+
+ +
+ {{ content }} +
+ + + + {% include elements/improve-page.html %} +
+ + +
+
+
diff --git a/docs/_sass/bootstrap.sass b/docs/_sass/bootstrap.sass index 5c7335d8..7398075c 100644 --- a/docs/_sass/bootstrap.sass +++ b/docs/_sass/bootstrap.sass @@ -1,20 +1,8 @@ $bootstrap: #6f5499 $bootstrap-invert: #fff -.bd-bootstrap - .hero - background-color: $bootstrap - color: $bootstrap-invert - .title, - .subtitle - color: currentColor - .subtitle - color: rgba($bootstrap-invert, 0.5) - .subtitle a - border-bottom: 1px solid currentColor - color: currentColor - &:hover - color: $bootstrap-invert +.bd-bootstrap-table + margin: 3rem 0 .bd-pros-heading padding: 0 2rem @@ -54,11 +42,7 @@ $bootstrap-invert: #fff .icon color: $bootstrap -.bd-separator - color: $border - margin: 0 0.25em - -.bd-comparison +.bd-bootstrap-comparison margin: 0 auto max-width: 42rem .table @@ -93,5 +77,5 @@ $bootstrap-invert: #fff color: $text-strong font-weight: $weight-bold -.bd-comparison-header +.bd-bootstrap-comparison-header margin-bottom: 3rem diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html index 8c7a366b..c431d86a 100644 --- a/docs/alternative-to-bootstrap.html +++ b/docs/alternative-to-bootstrap.html @@ -1,4 +1,10 @@ --- +fulltitle: "Bulma: an alternative to Bootstrap" +layout: more +breadcrumb: +- home +- more +- bootstrap bulma: - type: "bulma" icon: "css3" @@ -25,7 +31,7 @@ bulma: - type: "bulma" icon: "code" title: "No JavaScript" - content: '

By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context.

https://t.co/vY1ZsRScYM -- a CSS framework by @jgthms -- is lovely! No JS included, which means no JS opinions included!

— Robert Stuttaford (@RobStuttaford) May 6, 2017
' + content: '

By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context.

' bootstrap: - type: "bootstrap" icon: "plug" @@ -46,165 +52,82 @@ bootstrap: content: "Bootstrap has some **elements** like [list group](https://getbootstrap.com/components/#list-group), [wells](https://getbootstrap.com/components/#wells), or [page header](https://getbootstrap.com/components/#page-header) that Bulma doesn't have." --- - - - - - - - +
+

+ Both Bulma and Bootstrap are CSS frameworks that allow developers to quickly build web interfaces with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that. +

+
- Bulma: an alternative to Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% include global/navbar.html id="Documentation" %} - -
-
-
-
-
-
-

- Bulma: an alternative to Bootstrap -

-

- Learn how Bulma can become a replacement for Bootstrap -

-
-
- {% include elements/carbon.html %} -
-
-
-
-
-
- -
-

-
- Both Bulma and Bootstrap are CSS frameworks that allow developers to quickly build web interfaces with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that. -
-

+
+
+
+

+ Why choose Bulma +

+
+ {% include svg/bulma-b.svg %} +
+
+ {% for pro in page.bulma %} + {% + include content/pro.html + type=pro.type + icon=pro.icon + icon_brand=pro.icon_brand + title=pro.title + content=pro.content + %} + {% endfor %} +
-
-
- -
-
-

- Why choose Bulma -

-
- {% include svg/bulma-b.svg %} -
-
- {% for pro in page.bulma %} - {% - include content/pro.html - type=pro.type - icon=pro.icon - icon_brand=pro.icon_brand - title=pro.title - content=pro.content - %} - {% endfor %} -
-
- -
-

- Why choose Bootstrap -

-
- {% include svg/bootstrap-icon.svg %} -
-
- {% for pro in page.bootstrap %} - {% - include content/pro.html - type=pro.type - icon=pro.icon - icon_brand=pro.icon_brand - title=pro.title - content=pro.content - %} - {% endfor %} -
-
-
- +
+

+ Why choose Bootstrap +

+
+ {% include svg/bootstrap-icon.svg %} +
+
+ {% for pro in page.bootstrap %} + {% + include content/pro.html + type=pro.type + icon=pro.icon + icon_brand=pro.icon_brand + title=pro.title + content=pro.content + %} + {% endfor %}
-
+
+
+
-
- -
-
-
-
-

- Comparison table -

-

- See which elements of the framework exist (or not) in the other -

-
- - - - - - - - - - - - - - - {% include content/comparison.html %} - -
{% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
{% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
-
-
-
- - {% include global/footer.html %} - - +
+
+

+ Comparison table +

+

+ See which elements of the framework exist (or not) in the other +

+
+ + + + + + + + + + + + + + + {% include content/comparison.html %} + +
{% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
{% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
+
diff --git a/docs/backers.html b/docs/backers.html index ff917940..eea3d86e 100644 --- a/docs/backers.html +++ b/docs/backers.html @@ -1,75 +1,53 @@ --- title: Backers via Patreon -layout: default +layout: more route: backers +breadcrumb: +- home +- more +- patreon-backers --- -{% include global/navbar.html id="BackersNavbar" %} +

+ Website sponsors via Patreon ($300+) +

+
+ +
-
-
-
-
-
-

- Backers via Patreon -

-

- Everyone who is supporting Bulma -

-
-
- {% include elements/carbon.html %} -
-
-
-
-
+

+ Homepage sponsors via Patreon ($100+) +

+
+ +
-
-
-

- Website sponsors via Patreon ($300+) -

-
-
    - {% for backer in site.data.backers["300"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
-
+

+ Generous backers via Patreon ($30+) +

+
+
    + {% for backer in site.data.backers["30"] reversed %} + {% include elements/patreon-item.html %} + {% endfor %} +
+
-

- Homepage sponsors via Patreon ($100+) -

-
-
    - {% for backer in site.data.backers["100"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
-
- -

- Generous backers via Patreon ($30+) -

-
-
    - {% for backer in site.data.backers["30"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
-
- -

- Backers via Patreon ($10+) -

-
-
    - {% for backer in site.data.backers["10"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
-
-
-
+

+ Backers via Patreon ($10+) +

+
+ +
diff --git a/docs/bulma-start.html b/docs/bulma-start.html index 24055c6c..9177b1f0 100644 --- a/docs/bulma-start.html +++ b/docs/bulma-start.html @@ -1,81 +1,60 @@ --- +title: "Bulma start" fulltitle: "Bulma start: a tiny npm package to get started with Bulma" -layout: default +layout: more route: bulma-start download_url: https://github.com/jgthms/bulma-start/archive/master.zip github_url: https://github.com/jgthms/bulma-start npm_url: https://www.npmjs.com/package/bulma-start +breadcrumb: +- home +- more +- bulma-start --- -{% include global/navbar.html id="BulmaStartHero" %} - -
-
-
-
-
-

- Bulma Start -

-

- Tiny npm package to get started with Bulma -

-
-
- {% include elements/carbon.html %} -
-
+
+
+

bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma.

+
+ Download +
+
+ GitHub page + npm page
-
- -
-
-
-
-

bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma.

-
- Download -
-
- GitHub page - npm page -
-
-
-

Bulma: a Flexbox CSS framework

-
-
- - {% include elements/anchor.html name="Install" %} - - {% highlight bash %}npm install bulma-start{% endhighlight %} - -

or

- - {% highlight bash %}yarn add bulma-start{% endhighlight %} - - {% include elements/anchor.html name="What’s included" %} - -
-

The npm dependencies included in package.json are:

- - - -

Apart from package.json, the following files are included:

- -
    -
  • .babelrc configuration file for Babel
    • -
  • .gitignore common Git ignored files
    • -
  • index.html this HTML5 file
    • -
  • _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css
    • -
  • _javascript/main.js an ES6 JavaScript that compiles to lib/main.js
    • -
-
+
+

Bulma: a Flexbox CSS framework

-
+ + +{% include elements/anchor.html name="Install" %} + +{% highlight bash %}npm install bulma-start{% endhighlight %} + +

or

+ +{% highlight bash %}yarn add bulma-start{% endhighlight %} + +{% include elements/anchor.html name="What’s included" %} + +
+

The npm dependencies included in package.json are:

+ + + +

Apart from package.json, the following files are included:

+ + +
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 1263cd94..91e25386 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -12212,27 +12212,8 @@ svg { } } -.bd-bootstrap .hero { - background-color: #6f5499; - color: #fff; -} - -.bd-bootstrap .hero .title, -.bd-bootstrap .hero .subtitle { - color: currentColor; -} - -.bd-bootstrap .hero .subtitle { - color: rgba(255, 255, 255, 0.5); -} - -.bd-bootstrap .hero .subtitle a { - border-bottom: 1px solid currentColor; - color: currentColor; -} - -.bd-bootstrap .hero .subtitle a:hover { - color: #fff; +.bd-bootstrap-table { + margin: 3rem 0; } .bd-pros-heading { @@ -12281,28 +12262,23 @@ svg { color: #6f5499; } -.bd-separator { - color: #dbdbdb; - margin: 0 0.25em; -} - -.bd-comparison { +.bd-bootstrap-comparison { margin: 0 auto; max-width: 42rem; } -.bd-comparison .table { +.bd-bootstrap-comparison .table { color: #ff3860; } -.bd-comparison .table thead th, -.bd-comparison .table tfoot th { +.bd-bootstrap-comparison .table thead th, +.bd-bootstrap-comparison .table tfoot th { font-size: 1.5rem; text-align: center; } -.bd-comparison .table thead svg, -.bd-comparison .table tfoot svg { +.bd-bootstrap-comparison .table thead svg, +.bd-bootstrap-comparison .table tfoot svg { height: 1.5rem; margin-right: 1rem; position: relative; @@ -12310,36 +12286,36 @@ svg { width: auto; } -.bd-comparison .table tbody th { +.bd-bootstrap-comparison .table tbody th { font-size: 1.25rem; text-align: center; } -.bd-comparison .table tbody td { +.bd-bootstrap-comparison .table tbody td { font-family: monospace; width: 50%; } -.bd-comparison .table tbody a { +.bd-bootstrap-comparison .table tbody a { color: currentColor; } -.bd-comparison .table tbody a:hover { +.bd-bootstrap-comparison .table tbody a:hover { text-decoration: underline; } -.bd-comparison .table .bd-is-empty { +.bd-bootstrap-comparison .table .bd-is-empty { background-color: whitesmoke; color: #7a7a7a; } -.bd-comparison .table .bd-is-unique { +.bd-bootstrap-comparison .table .bd-is-unique { background-color: rgba(35, 209, 96, 0.25); color: #363636; font-weight: 700; } -.bd-comparison-header { +.bd-bootstrap-comparison-header { margin-bottom: 3rem; } diff --git a/docs/extensions.html b/docs/extensions.html index 1c23ef5a..e97867d7 100644 --- a/docs/extensions.html +++ b/docs/extensions.html @@ -1,7 +1,12 @@ --- title: Extensions -layout: default +layout: more route: extensions +route: backers +breadcrumb: +- home +- more +- extensions extensions: - name: bulma-accordion url: https://wikiki.github.io/components/accordion @@ -110,65 +115,39 @@ extensions: height: 469 --- -{% include global/navbar.html id="Extensions" %} +{% for extension in page.extensions %} + +
+
+

+ {{ extension.name }} +

+

+ {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }} +

+
+
+ +
+
+ +{% endfor %} -
-
-
-
-
-

- Extensions -

-

- Side projects to enhance Bulma -

+
+
+
+
+
+

Have an extension to share with the community?

-
- {% include elements/carbon.html %} +
+
+
+ + Submit a Pull Request +
-
- -
-
- {% for extension in page.extensions %} - -
-
-

- {{ extension.name }} -

-

- {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }} -

-
-
- -
-
- - {% endfor %} - -
-
-
-
-
-

Have an extension to share with the community?

-
-
-
-
- - Submit a Pull Request - -
-
-
-
-
-
-
+ diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html index ef52d8a6..db5fa4db 100644 --- a/docs/made-with-bulma.html +++ b/docs/made-with-bulma.html @@ -1,7 +1,11 @@ --- fulltitle: Made with Bulma badges -layout: default +layout: more route: made-with-bulma +breadcrumb: +- home +- more +- made-with-bulma images: - name: "Default" description: "White boxed" @@ -41,123 +45,96 @@ images: {% endcapture %} -{% include global/navbar.html id="MadeWithBulmaHero" %} - -
-
-
-
-
-

- Made with Bulma -

-

- Join the Bulma community by displaying a badge on your website -

-
-
- {% include elements/carbon.html %} -
-
-
-
-
- -
-
-

6 badges available

-
-

- The Made with Bulma badge is available in 6 different versions: -

-
- - - - - - - - - - - {% for image in page.images %} - {% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %} - - - - - - - {% endfor %} - - - - - - -
TypePreviewDescriptionDownload
{{ image.name }}Made with Bulma{{ image.description }} - Download image -
All 6made-with-bulma-badges.zipDownload all 6 badges
- - {% include elements/anchor.html name="Usage" %} - -
-

- Ideally the image is displayed at 128x24 pixels, and links back to the Bulma website: -

-
- -
-
- - Made with Bulma - -
-
- {% highlight html %}{{ image_example }}{% endhighlight %} -
-
- -
-

- Since the original image dimensions are 512x96 pixels, you can also display it at 256x48 without losing any quality: -

-
- -
-
- - Made with Bulma - -
-
- {% highlight html %}{{ image_bigger_example }}{% endhighlight %} -
-
- - {% include elements/anchor.html name="Badge snippets" %} - -
-

- You can simply embed an image directly on your website by using one of the following snippets. -

-
+

6 badges available

+
+

+ The Made with Bulma badge is available in 6 different versions: +

+
+ + + + + + + + + + {% for image in page.images %} + {% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %} + + + + + + + {% endfor %} + + + + + + +
TypePreviewDescriptionDownload
{{ image.name }}Made with Bulma{{ image.description }} + Download image +
All 6made-with-bulma-badges.zipDownload all 6 badges
+ +{% include elements/anchor.html name="Usage" %} + +
+

+ Ideally the image is displayed at 128x24 pixels, and links back to the Bulma website: +

+
+ +
+
+ + Made with Bulma + +
+
+ {% highlight html %}{{ image_example }}{% endhighlight %} +
+
+ +
+

+ Since the original image dimensions are 512x96 pixels, you can also display it at 256x48 without losing any quality: +

+
+ +
+
+ + Made with Bulma + +
+
+ {% highlight html %}{{ image_bigger_example }}{% endhighlight %} +
+
+ +{% include elements/anchor.html name="Badge snippets" %} + +
+

+ You can simply embed an image directly on your website by using one of the following snippets. +

+
+{% for image in page.images %} {% capture image_example %} - Made with Bulma +Made with Bulma {% endcapture %} -
-
- {{ image_example }} -
-
- {% highlight html %}{{ image_example }}{% endhighlight %} -
-
- {% endfor %} +
+
+ {{ image_example }}
-
- +
+ {% highlight html %}{{ image_example }}{% endhighlight %} +
+ +{% endfor %}