From: Jeremy Thomas Date: Tue, 10 Apr 2018 17:50:19 +0000 (+0100) Subject: Add more layout X-Git-Tag: 0.7.0~1^2~30 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=999c284dccfec7890d2372969e3d78443599f383;p=thirdparty%2Fbulma.git Add more layout --- diff --git a/docs/_data/links.json b/docs/_data/links.json index 9f0f41082..962d6c72f 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 000000000..de2d22a2d --- /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 bb0edc5b6..91623ffd3 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 2792869d6..394c7c86a 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'] %}

diff --git a/docs/_includes/footer/links.html b/docs/_includes/footer/links.html index 60b70a799..c97e035fe 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] %} - - + {% include footer/link.html %} {% endfor %}

diff --git a/docs/_includes/layout/main-close.html b/docs/_includes/layout/main-close.html index db38d4c02..86db930e9 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 201633eb1..d4c07c4b4 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 000000000..8d9d1d615 --- /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 5c7335d8b..7398075ce 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 8c7a366b1..c431d86a6 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." --- - - - - - - - - - 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 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 %} -

- +

+ 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 %}

- -

+ -

- 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

+ 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 %}

- - {% 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 ff9179402..eea3d86e8 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+) +

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

- Backers via Patreon -

- Everyone who is supporting Bulma -

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

+ Homepage sponsors via Patreon ($100+) +

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

- 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+) +

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

diff --git a/docs/bulma-start.html b/docs/bulma-start.html index 24055c6ca..9177b1f0a 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

- -

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 -

+ GitHub page + npm page

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

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

The npm dependencies included in package.json are:

bulma
node-sass to compile your own Sass file
postcss-cli and autoprefixer to add support for older browsers
babel-cli, babel-preset-env and babel-preset-es2015-ie for compiling ES6 JavaScript files

bulma
node-sass to compile your own Sass file
postcss-cli and autoprefixer to add support for older browsers
babel-cli, babel-preset-env and babel-preset-es2015-ie for compiling ES6 JavaScript files

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

.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

+ diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 1263cd948..91e253868 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 1c23ef5a2..e97867d79 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" %} - -

- Extensions -

- Side projects to enhance Bulma -

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

+{% for extension in page.extensions %} + +

+ {{ extension.name }} +

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

+ +{% endfor %} -

- {% for extension in page.extensions %} - -

- {{ extension.name }} -

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

Have an extension to share with the community?

- - {% endfor %} - -

Have an extension to share with the community?

- - Submit a Pull Request - -

+ + Submit a Pull Request +

+ diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html index ef52d8a64..db5fa4db4 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 %} - - - - - - -

Type	Preview	Description	Download
{{ image.name }}		{{ image.description }}	- Download image -
All 6	`made-with-bulma-badges.zip`		Download all 6 badges

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 %} + + + + + + +

Type	Preview	Description	Download
{{ image.name }}		{{ image.description }}	+ Download image +
All 6	`made-with-bulma-badges.zip`		Download all 6 badges

- {% include elements/anchor.html name="Usage" %} +{% include elements/anchor.html name="Usage" %} -

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

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

- -

-        {% highlight html %}{{ image_example }}{% endhighlight %}
-      

+ +

+    {% highlight html %}{{ image_example }}{% endhighlight %}
+  

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

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

- -

-        {% highlight html %}{{ image_bigger_example }}{% endhighlight %}
-      

+ +

+    {% highlight html %}{{ image_bigger_example }}{% endhighlight %}
+  

- {% include elements/anchor.html name="Badge snippets" %} +{% 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 %} +

+ 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 %} -

{% endcapture %} -

- {{ image_example }} -

-        {% highlight html %}{{ image_example }}{% endhighlight %}
-      

- {% endfor %} +

+ {{ image_example }}

- +

+    {% highlight html %}{{ image_example }}{% endhighlight %}
+  

+ +{% endfor %}

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

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

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

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

- Bulma: an alternative to Bootstrap -

- Why choose Bulma -

- Why choose Bootstrap -

+ 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 +

- Comparison table -

+ Why choose Bootstrap +

+ Comparison table +

+ Website sponsors via Patreon ($300+) +

- Backers via Patreon -

+ Homepage sponsors via Patreon ($100+) +

- Website sponsors via Patreon ($300+) -

+ Generous backers via Patreon ($30+) +

- Homepage sponsors via Patreon ($100+) -

- Generous backers via Patreon ($30+) -

- Backers via Patreon ($10+) -

+ Backers via Patreon ($10+) +

- Bulma Start -

- Extensions -

+ {{ extension.name }} +

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

- {{ extension.name }} -

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

- Made with Bulma -

6 badges available

6 badges available