- Here is how the icon container can be used with Open Iconic.
-
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..be876473 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,4 @@ +# These are supported funding model platforms + +github: jgthms +patreon: jgthms diff --git a/BACKERS.md b/BACKERS.md index 69421057..031e1aca 100644 --- a/BACKERS.md +++ b/BACKERS.md @@ -56,7 +56,7 @@
+
## Quick install
@@ -43,7 +44,7 @@ import 'bulma/css/bulma.css'
### CDN
-[https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)
+[https://www.jsdelivr.com/package/npm/bulma](https://www.jsdelivr.com/package/npm/bulma)
Feel free to raise an issue or submit a pull request.
@@ -79,9 +80,9 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors) | Adds support for attribute-based selectors |
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails) | Integrates Bulma with the rails asset pipeline |
-| [Vue Admin](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
+| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin) | Vue Admin framework powered by Bulma |
| [Bulmaswatch](https://github.com/jenil/bulmaswatch) | Free themes for Bulma |
-| [Goldfish](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |
+| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish) | Vault UI with Bulma, Golang, and Vue Admin |
| [ember-bulma](https://github.com/open-tux/ember-bulma) | Ember addon providing a collection of UI components for Bulma |
| [Bloomer](https://bloomer.js.org) | A set of React components for Bulma |
| [React-bulma](https://github.com/kulakowka/react-bulma) | React.js components for Bulma |
@@ -89,7 +90,8 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components) | Bulma components for Vue.js with straightforward syntax |
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS) | Javascript integration for Bulma. Written in ES6 with a data-* API |
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx) | A set of modal window effects with CSS transitions and animations for Bulma |
-| [Bulma.styl](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma |
+| [Bulma Stylus](https://github.com/groenroos/bulma-stylus) | Up-to-date 1:1 translation to Stylus
+| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl) | 1:1 Stylus translation of Bulma 0.6.11 |
| [elm-bulma](https://github.com/surprisetalk/elm-bulma) | Bulma + Elm |
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes) | Bulma classes prepared for usage with Elm |
| [Bulma Customizer](https://bulma-customizer.bstash.io/) | Bulma Customizer – Create your own **bespoke** Bulma build |
@@ -105,7 +107,7 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react) | Bulma pagination as a react component |
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers) | Functional / Atomic CSS classes for Bulma |
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook) | Bulma swatches as a react hook and a component |
-| [BulmaWP](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma |
+| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP) | Starter WordPress theme for Bulma |
| [Ralma](https://github.com/aldi/ralma) | Stateless Ractive.js Components for Bulma |
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma) | Lightweight integration of Bulma and Bulma-Extensions for your Django app |
| [rbx](https://dfee.github.io/rbx) | Comprehensive React UI Framework written in TypeScript |
@@ -115,10 +117,12 @@ Browse the [online documentation here.](https://bulma.io/documentation/overview/
| [Drulma](https://www.drupal.org/project/drulma) | Drupal theme for Bulma. |
| [Bulrush](https://github.com/textbook/bulrush) | A Bulma-based Python Pelican blog theme |
| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export) | Access Bulma Variables in Javascript/Typescript in project using Webpack |
+| [Bulmil](https://github.com/gomah/bulmil) | An agnostic UI components library based on Web Components, made with Bulma & Stencil. |
+| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components) | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone. |
## Copyright and license
-Code copyright 2019 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
+Code copyright 2020 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
[npm-link]: https://www.npmjs.com/package/bulma
[awesome-link]: https://github.com/awesome-css-group/awesome-css
diff --git a/bower.json b/bower.json
index bffe41f1..31e63b64 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "bulma",
- "version": "0.7.5",
+ "version": "0.8.0",
"homepage": "https://bulma.io",
"authors": [
"jgthms
- Here is how the icon container can be used with Open Iconic.
-
| Container class | -Container size | -Iconic class | -Icon size | -Result | -
|---|---|---|---|---|
- icon is-small
- |
-
- 1rem x 1rem
- |
-
- oi [data-glyph=puzzle-piece]
- |
-
- 1em
- |
- - - - - | -
- icon
- |
-
- 1.5rem x 1.5rem
- |
-
- oi [data-glyph=puzzle-piece]
- |
-
- 1em
- |
- - - - - | -
- icon is-medium
- |
-
- 2rem x 2rem
- |
-
- oi [data-glyph=puzzle-piece]
- |
-
- 1em
- |
- - - - - | -
- icon is-large
- |
-
- 3rem x 3rem
- |
-
- oi [data-glyph=puzzle-piece]
- |
-
- 1em
- |
- - - - - | -
Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.
Because images can take a few seconds to load (or not at all), use the image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.
You can also make rounded images, using .is-rounded class:
You can also make rounded images, using is-rounded class:
The .image container will usually take up the whole width while maintaining the perfect ratio.
+
The image container will usually take up the whole width while maintaining the perfect ratio.
If it doesn't, you can force it by appending the is-fullwidth modifier.
- You can apply a specific ratio on any element other than an img, simply by applying the .has-ratio modifier to a resizable element.
+ You can apply a specific ratio on any element other than an img, simply by applying the has-ratio modifier to a resizable element.
For example, you can apply a 16by9 ratio on an iframe. Resize the browser, and you'll see how the ratio is maintained.
diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index ed0efaf6..236c14c0 100644
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -34,6 +34,17 @@ meta:
{% endfor %}
{% endcapture %}
+{% capture notification_light_colors %}
+{% for color in site.data.colors.justColors %}
+
+ The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the delete element.
+
+ The notification element is available in all the different colors defined by the $colors Sass map.
+