mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add bd classes
This commit is contained in:
Jeremy Thomas
parent
88fb510d93
commit
cd2f886df2
@ -13,7 +13,7 @@
|
|||||||
<p class="subtitle">
|
<p class="subtitle">
|
||||||
Stay updated about new features, bug fixes, and releases
|
Stay updated about new features, bug fixes, and releases
|
||||||
</p>
|
</p>
|
||||||
<a class="button is-rss" href="{{ site.url }}/atom.xml">
|
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa fa-rss"></i>
|
<i class="fa fa-rss"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 7%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 7%);"></span>
|
||||||
<code>hsl(0, 0%, 7%)</code>
|
<code>hsl(0, 0%, 7%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 14%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 14%);"></span>
|
||||||
<code>hsl(0, 0%, 14%)</code>
|
<code>hsl(0, 0%, 14%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 4%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 4%);"></span>
|
||||||
<code>hsl(0, 0%, 4%)</code>
|
<code>hsl(0, 0%, 4%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(217, 71%, 53%);"></span>
|
<span class="bd-color" style="background: hsl(217, 71%, 53%);"></span>
|
||||||
<code>hsl(217, 71%, 53%)</code>
|
<code>hsl(217, 71%, 53%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(141, 71%, 48%);"></span>
|
<span class="bd-color" style="background: hsl(141, 71%, 48%);"></span>
|
||||||
<code>hsl(141, 71%, 48%)</code>
|
<code>hsl(141, 71%, 48%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 29%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 29%);"></span>
|
||||||
<code>hsl(0, 0%, 29%)</code>
|
<code>hsl(0, 0%, 29%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 21%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 21%);"></span>
|
||||||
<code>hsl(0, 0%, 21%)</code>
|
<code>hsl(0, 0%, 21%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 71%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 71%);"></span>
|
||||||
<code>hsl(0, 0%, 71%)</code>
|
<code>hsl(0, 0%, 71%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 86%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 86%);"></span>
|
||||||
<code>hsl(0, 0%, 86%)</code>
|
<code>hsl(0, 0%, 86%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 48%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 48%);"></span>
|
||||||
<code>hsl(0, 0%, 48%)</code>
|
<code>hsl(0, 0%, 48%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(14, 100%, 53%);"></span>
|
<span class="bd-color" style="background: hsl(14, 100%, 53%);"></span>
|
||||||
<code>hsl(14, 100%, 53%)</code>
|
<code>hsl(14, 100%, 53%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(271, 100%, 71%);"></span>
|
<span class="bd-color" style="background: hsl(271, 100%, 71%);"></span>
|
||||||
<code>hsl(271, 100%, 71%)</code>
|
<code>hsl(271, 100%, 71%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(348, 100%, 61%);"></span>
|
<span class="bd-color" style="background: hsl(348, 100%, 61%);"></span>
|
||||||
<code>hsl(348, 100%, 61%)</code>
|
<code>hsl(348, 100%, 61%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(171, 100%, 41%);"></span>
|
<span class="bd-color" style="background: hsl(171, 100%, 41%);"></span>
|
||||||
<code>hsl(171, 100%, 41%)</code>
|
<code>hsl(171, 100%, 41%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 98%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 98%);"></span>
|
||||||
<code>hsl(0, 0%, 98%)</code>
|
<code>hsl(0, 0%, 98%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 96%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 96%);"></span>
|
||||||
<code>hsl(0, 0%, 96%)</code>
|
<code>hsl(0, 0%, 96%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(0, 0%, 100%);"></span>
|
<span class="bd-color" style="background: hsl(0, 0%, 100%);"></span>
|
||||||
<code>hsl(0, 0%, 100%)</code>
|
<code>hsl(0, 0%, 100%)</code>
|
||||||
|
|||||||
@ -1,2 +1,2 @@
|
|||||||
<span class="color" style="background: hsl(48, 100%, 67%);"></span>
|
<span class="bd-color" style="background: hsl(48, 100%, 67%);"></span>
|
||||||
<code>hsl(48, 100%, 67%)</code>
|
<code>hsl(48, 100%, 67%)</code>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<a class="tw-button button"
|
<a class="bd-tw-button button"
|
||||||
data-social-network="Twitter"
|
data-social-network="Twitter"
|
||||||
data-social-action="tweet"
|
data-social-action="tweet"
|
||||||
data-social-target="{{ site.url }}"
|
data-social-target="{{ site.url }}"
|
||||||
|
|||||||
@ -439,7 +439,7 @@
|
|||||||
<div class="column is-10">
|
<div class="column is-10">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/form/general/">
|
<a href="{{ site.url }}/documentation/form/general/">
|
||||||
Form
|
Form
|
||||||
</a>
|
</a>
|
||||||
@ -452,7 +452,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/elements/box/">
|
<a href="{{ site.url }}/documentation/elements/box/">
|
||||||
Box
|
Box
|
||||||
</a>
|
</a>
|
||||||
@ -465,7 +465,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/elements/button/">
|
<a href="{{ site.url }}/documentation/elements/button/">
|
||||||
Button
|
Button
|
||||||
</a>
|
</a>
|
||||||
@ -478,7 +478,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/elements/notification/">
|
<a href="{{ site.url }}/documentation/elements/notification/">
|
||||||
Notification
|
Notification
|
||||||
</a>
|
</a>
|
||||||
@ -491,7 +491,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/elements/progress/">
|
<a href="{{ site.url }}/documentation/elements/progress/">
|
||||||
Progress bar
|
Progress bar
|
||||||
</a>
|
</a>
|
||||||
@ -504,7 +504,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/elements/tag/">
|
<a href="{{ site.url }}/documentation/elements/tag/">
|
||||||
Tags
|
Tags
|
||||||
</a>
|
</a>
|
||||||
@ -528,7 +528,7 @@
|
|||||||
<div class="column is-10">
|
<div class="column is-10">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/card/">
|
<a href="{{ site.url }}/documentation/components/card/">
|
||||||
Card
|
Card
|
||||||
</a>
|
</a>
|
||||||
@ -541,7 +541,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/dropdown/">
|
<a href="{{ site.url }}/documentation/components/dropdown/">
|
||||||
Dropdown
|
Dropdown
|
||||||
</a>
|
</a>
|
||||||
@ -554,7 +554,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/message/">
|
<a href="{{ site.url }}/documentation/components/message/">
|
||||||
Message
|
Message
|
||||||
</a>
|
</a>
|
||||||
@ -567,7 +567,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/pagination/">
|
<a href="{{ site.url }}/documentation/components/pagination/">
|
||||||
Pagination
|
Pagination
|
||||||
</a>
|
</a>
|
||||||
@ -580,7 +580,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/tabs/">
|
<a href="{{ site.url }}/documentation/components/tabs/">
|
||||||
Tabs
|
Tabs
|
||||||
</a>
|
</a>
|
||||||
@ -593,7 +593,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/media-object/">
|
<a href="{{ site.url }}/documentation/components/media-object/">
|
||||||
Media object
|
Media object
|
||||||
</a>
|
</a>
|
||||||
@ -606,7 +606,7 @@
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-3">
|
<div class="column is-3">
|
||||||
<h4 class="subtitle is-4 feature-title">
|
<h4 class="subtitle is-4 bd-feature-title">
|
||||||
<a href="{{ site.url }}/documentation/components/menu/">
|
<a href="{{ site.url }}/documentation/components/menu/">
|
||||||
Menu
|
Menu
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<hr style="margin-bottom: 0;">
|
<hr style="margin-bottom: 0;">
|
||||||
|
|
||||||
<h3 id="{{ include.name | slugify }}" class="title anchor-title">
|
<h3 id="{{ include.name | slugify }}" class="title bd-anchor-title">
|
||||||
{{ include.name }}
|
{{ include.name }}
|
||||||
<a class="anchor-link" href="#{{ include.name | slugify }}">
|
<a class="bd-anchor-link" href="#{{ include.name | slugify }}">
|
||||||
#
|
#
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
|
|||||||
@ -65,7 +65,7 @@
|
|||||||
</p>
|
</p>
|
||||||
{{#unless site.deprecated}}
|
{{#unless site.deprecated}}
|
||||||
<small>
|
<small>
|
||||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
<a class="bd-view-all-versions" href="/versions">View all versions</a>
|
||||||
</small>
|
</small>
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
</div>
|
</div>
|
||||||
@ -101,7 +101,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="level-right">
|
<div class="level-right">
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
<a class="button is-rss is-small" href="{{ site.url }}/atom.xml">
|
<a class="button bd-is-rss is-small" href="{{ site.url }}/atom.xml">
|
||||||
<span class="icon is-small">
|
<span class="icon is-small">
|
||||||
<i class="fa fa-rss"></i>
|
<i class="fa fa-rss"></i>
|
||||||
</span>
|
</span>
|
||||||
@ -142,11 +142,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
|
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
|
||||||
<span class="emoji">🎨</span>
|
<span class="bd-emoji">🎨</span>
|
||||||
Expo
|
Expo
|
||||||
</a>
|
</a>
|
||||||
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
|
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
|
||||||
<span class="emoji">❤️</span>
|
<span class="bd-emoji">❤️</span>
|
||||||
Love
|
Love
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<article class="media pro is-{{ include.type }}">
|
<article class="media bd-pro is-{{ include.type }}">
|
||||||
<aside class="media-left">
|
<aside class="media-left">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa fa-{{ include.icon }}"></i>
|
<i class="fa fa-{{ include.icon }}"></i>
|
||||||
@ -8,7 +8,7 @@
|
|||||||
<p class="title is-5 pro-title">
|
<p class="title is-5 pro-title">
|
||||||
{{ include.title }}
|
{{ include.title }}
|
||||||
</p>
|
</p>
|
||||||
<div class="pro-content">
|
<div class="bd-pro-content">
|
||||||
{{ include.content | markdownify }}
|
{{ include.content | markdownify }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,39 +1,39 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
<article class="testimonial">
|
<article class="bd-testimonial">
|
||||||
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote>
|
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="testimonial">
|
<article class="bd-testimonial">
|
||||||
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>— Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote>
|
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>— Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
<article class="testimonial">
|
<article class="bd-testimonial">
|
||||||
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I'm in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote>
|
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I'm in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="testimonial">
|
<article class="bd-testimonial">
|
||||||
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href="https://twitter.com/jgthms">@jgthms</a>.</p>— scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote>
|
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href="https://twitter.com/jgthms">@jgthms</a>.</p>— scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
<article class="testimonial">
|
<article class="bd-testimonial">
|
||||||
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>— mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote>
|
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>— mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="testimonial">
|
<article class="bd-testimonial">
|
||||||
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>— juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote>
|
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>— juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="more-loves">
|
<div class="bd-more-loves">
|
||||||
<p class="more-loves-container">
|
<p class="bd-more-loves-container">
|
||||||
<a class="button is-medium is-danger rainbow" href="{{ site.url }}/love/">
|
<a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
|
||||||
<span>See more <strong>love</strong> 🤗</span>
|
<span>See more <strong>love</strong> 🤗</span>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -1,27 +1,27 @@
|
|||||||
{% assign twUrl = "https://twitter.com/" | append: include.username | append: "/status/" | append: include.id %}
|
{% assign twUrl = "https://twitter.com/" | append: include.username | append: "/status/" | append: include.id %}
|
||||||
|
|
||||||
<article class="tw">
|
<article class="bd-tw">
|
||||||
<header class="tw-header">
|
<header class="bd-tw-header">
|
||||||
<a class="tw-author" href="{{ twUrl }}" target="_blank">
|
<a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
|
||||||
<figure class="tw-avatar">
|
<figure class="bd-tw-avatar">
|
||||||
<img src="{{ include.avatar }}">
|
<img src="{{ include.avatar }}">
|
||||||
</figure>
|
</figure>
|
||||||
<div class="tw-name">
|
<div class="bd-tw-name">
|
||||||
<strong class="tw-fullname">
|
<strong class="bd-tw-fullname">
|
||||||
{{ include.fullname }}
|
{{ include.fullname }}
|
||||||
</strong>
|
</strong>
|
||||||
<span class="tw-username">
|
<span class="bd-tw-username">
|
||||||
@{{ include.username }}
|
@{{ include.username }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="tw-content">
|
<div class="bd-tw-content">
|
||||||
{{ include.content }}
|
{{ include.content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="tw-date">
|
<p class="bd-tw-date">
|
||||||
<a href="{{ twUrl }}" target="_blank">
|
<a href="{{ twUrl }}" target="_blank">
|
||||||
{{ include.date }}
|
{{ include.date }}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -75,9 +75,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="more-loves">
|
<div class="bd-more-loves">
|
||||||
<p class="more-loves-container">
|
<p class="bd-more-loves-container">
|
||||||
<a class="button is-medium is-danger rainbow" href="{{ site.url }}/love/">
|
<a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
|
||||||
<span>See more <strong>love</strong> 🤗</span>
|
<span>See more <strong>love</strong> 🤗</span>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -9,24 +9,24 @@ route: blog
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-offset-2 is-8">
|
<div class="column is-offset-2 is-8">
|
||||||
<div class="article-image is-single is-{{ page.color }}">
|
<div class="bd-article-image is-single is-{{ page.color }}">
|
||||||
<span class="article-overlay"></span>
|
<span class="bd-article-overlay"></span>
|
||||||
<span class="article-icon">
|
<span class="bd-article-icon">
|
||||||
<i class="fa fa-{{ page.icon }}"></i>
|
<i class="fa fa-{{ page.icon }}"></i>
|
||||||
</span>
|
</span>
|
||||||
<strong class="article-info">
|
<strong class="bd-article-info">
|
||||||
<span>
|
<span>
|
||||||
<time class="article-date" datetime="{{ page.date | date_to_xmlschema }}">
|
<time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
|
||||||
{{ page.date | date_to_string }}
|
{{ page.date | date_to_string }}
|
||||||
</time>
|
</time>
|
||||||
<strong class="article-title">
|
<strong class="bd-article-title">
|
||||||
{{ page.name }}
|
{{ page.name }}
|
||||||
</strong>
|
</strong>
|
||||||
</span>
|
</span>
|
||||||
</strong>
|
</strong>
|
||||||
</div>
|
</div>
|
||||||
<p class="subtitle is-6">
|
<p class="subtitle is-6">
|
||||||
<a class="article-back" href="{{ site.url }}/blog">Back</a>
|
<a class="bd-article-back" href="{{ site.url }}/blog">Back</a>
|
||||||
</p>
|
</p>
|
||||||
<h1 class="title is-2">
|
<h1 class="title is-2">
|
||||||
{{ page.title }}
|
{{ page.title }}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
$bootstrap: #6f5499
|
$bootstrap: #6f5499
|
||||||
$bootstrap-invert: #fff
|
$bootstrap-invert: #fff
|
||||||
|
|
||||||
.bootstrap
|
.bd-bootstrap
|
||||||
.hero
|
.hero
|
||||||
background-color: $bootstrap
|
background-color: $bootstrap
|
||||||
color: $bootstrap-invert
|
color: $bootstrap-invert
|
||||||
@ -16,49 +16,49 @@ $bootstrap-invert: #fff
|
|||||||
&:hover
|
&:hover
|
||||||
color: $bootstrap-invert
|
color: $bootstrap-invert
|
||||||
|
|
||||||
.pros-heading
|
.bd-pros-heading
|
||||||
padding: 0 2rem
|
padding: 0 2rem
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.pros-icon
|
.bd-pros-icon
|
||||||
margin-bottom: 3rem
|
margin-bottom: 3rem
|
||||||
text-align: center
|
text-align: center
|
||||||
svg
|
svg
|
||||||
height: 3rem
|
height: 3rem
|
||||||
width: auto
|
width: auto
|
||||||
|
|
||||||
.pros-list
|
.bd-pros-list
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
max-width: 540px
|
max-width: 540px
|
||||||
|
|
||||||
.pro
|
.bd-pro
|
||||||
.icon
|
.icon
|
||||||
position: relative
|
position: relative
|
||||||
top: -1px
|
top: -1px
|
||||||
.title
|
.title
|
||||||
margin-bottom: 0.5rem
|
margin-bottom: 0.5rem
|
||||||
|
|
||||||
.pro + .pro
|
.bd-pro + .pro
|
||||||
margin-top: 2rem
|
margin-top: 2rem
|
||||||
padding-top: 2rem
|
padding-top: 2rem
|
||||||
|
|
||||||
.pro-content
|
.bd-pro-content
|
||||||
p:not(:last-child)
|
p:not(:last-child)
|
||||||
margin-bottom: 0.5rem
|
margin-bottom: 0.5rem
|
||||||
|
|
||||||
.pro.is-bulma
|
.bd-pro.is-bulma
|
||||||
.icon
|
.icon
|
||||||
color: $primary
|
color: $primary
|
||||||
|
|
||||||
.pro.is-bootstrap
|
.bd-pro.is-bootstrap
|
||||||
.icon
|
.icon
|
||||||
color: $bootstrap
|
color: $bootstrap
|
||||||
|
|
||||||
.separator
|
.bd-separator
|
||||||
color: $border
|
color: $border
|
||||||
margin: 0 0.25em
|
margin: 0 0.25em
|
||||||
|
|
||||||
.comparison
|
.bd-comparison
|
||||||
margin: 0 auto
|
margin: 0 auto
|
||||||
max-width: 42rem
|
max-width: 42rem
|
||||||
.table
|
.table
|
||||||
@ -93,5 +93,5 @@ $bootstrap-invert: #fff
|
|||||||
color: $text-strong
|
color: $text-strong
|
||||||
font-weight: $weight-bold
|
font-weight: $weight-bold
|
||||||
|
|
||||||
.comparison-header
|
.bd-comparison-header
|
||||||
margin-bottom: 3rem
|
margin-bottom: 3rem
|
||||||
@ -1,4 +1,4 @@
|
|||||||
.callout
|
.bd-callout
|
||||||
+block
|
+block
|
||||||
background-color: $background
|
background-color: $background
|
||||||
border-radius: $radius
|
border-radius: $radius
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.example,
|
.bd-example,
|
||||||
.structure
|
.bd-structure
|
||||||
border: 1px solid $warning
|
border: 1px solid $warning
|
||||||
border-top-right-radius: $radius
|
border-top-right-radius: $radius
|
||||||
color: $warning-invert
|
color: $warning-invert
|
||||||
@ -29,7 +29,7 @@
|
|||||||
border-right: none
|
border-right: none
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
.example
|
.bd-example
|
||||||
& + .highlight
|
& + .highlight
|
||||||
border: 1px solid $warning
|
border: 1px solid $warning
|
||||||
border-radius: 0 0 $radius $radius
|
border-radius: 0 0 $radius $radius
|
||||||
@ -53,7 +53,7 @@
|
|||||||
$structure: $danger
|
$structure: $danger
|
||||||
$structure-invert: $danger-invert
|
$structure-invert: $danger-invert
|
||||||
|
|
||||||
.structure
|
.bd-structure
|
||||||
border-color: $structure
|
border-color: $structure
|
||||||
border-radius: $radius
|
border-radius: $radius
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
@ -62,7 +62,7 @@ $structure-invert: $danger-invert
|
|||||||
color: $structure-invert
|
color: $structure-invert
|
||||||
content: "Structure"
|
content: "Structure"
|
||||||
|
|
||||||
.structure-item
|
.bd-structure-item
|
||||||
position: relative
|
position: relative
|
||||||
&:before
|
&:before
|
||||||
+overlay
|
+overlay
|
||||||
@ -82,7 +82,7 @@ $structure-invert: $danger-invert
|
|||||||
justify-content: center
|
justify-content: center
|
||||||
padding: 3px 5px
|
padding: 3px 5px
|
||||||
z-index: 2
|
z-index: 2
|
||||||
&.is-structure-container
|
&.bd-is-structure-container
|
||||||
padding: 1.5rem 0.75rem 0.75rem
|
padding: 1.5rem 0.75rem 0.75rem
|
||||||
&:after
|
&:after
|
||||||
align-items: flex-start
|
align-items: flex-start
|
||||||
@ -114,7 +114,7 @@ $structure-invert: $danger-invert
|
|||||||
white-space: pre-wrap
|
white-space: pre-wrap
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
|
||||||
margin-left: 1.5rem
|
margin-left: 1.5rem
|
||||||
margin-right: 1.5rem
|
margin-right: 1.5rem
|
||||||
& + .highlight
|
& + .highlight
|
||||||
@ -123,7 +123,7 @@ $structure-invert: $danger-invert
|
|||||||
|
|
||||||
.section.is-fullwidth
|
.section.is-fullwidth
|
||||||
padding: 0 !important
|
padding: 0 !important
|
||||||
.example
|
.bd-example
|
||||||
border-left: none
|
border-left: none
|
||||||
border-radius: 0
|
border-radius: 0
|
||||||
border-right: none
|
border-right: none
|
||||||
|
|||||||
@ -1,49 +1,49 @@
|
|||||||
.expo
|
.bd-expo
|
||||||
background-color: $background
|
background-color: $background
|
||||||
background-color: $white
|
background-color: $white
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
|
|
||||||
.website
|
.bd-website
|
||||||
display: block
|
display: block
|
||||||
position: relative
|
position: relative
|
||||||
text-align: center
|
text-align: center
|
||||||
&:last-child
|
&:last-child
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
|
|
||||||
.website-image
|
.bd-website-image
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
position: relative
|
position: relative
|
||||||
&:hover
|
&:hover
|
||||||
.website-overlay
|
.bd-website-overlay
|
||||||
opacity: 0.25
|
opacity: 0.25
|
||||||
|
|
||||||
.website-overlay
|
.bd-website-overlay
|
||||||
background-color: $black
|
background-color: $black
|
||||||
opacity: 0
|
opacity: 0
|
||||||
transition: opacity 200ms $easing
|
transition: opacity 200ms $easing
|
||||||
|
|
||||||
+mobile
|
+mobile
|
||||||
.website:not(:last-child)
|
.bd-website:not(:last-child)
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.expo
|
.bd-expo
|
||||||
padding-bottom: 3rem
|
padding-bottom: 3rem
|
||||||
padding-top: 3rem
|
padding-top: 3rem
|
||||||
.websites
|
.bd-websites
|
||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
justify-content: space-between
|
justify-content: space-between
|
||||||
.website
|
.bd-website
|
||||||
margin-top: 3rem
|
margin-top: 3rem
|
||||||
width: calc(50% - 3rem)
|
width: calc(50% - 3rem)
|
||||||
&:nth-child(1),
|
&:nth-child(1),
|
||||||
&:nth-child(2)
|
&:nth-child(2)
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
&.is-highlighted
|
&.bd-is-highlighted
|
||||||
width: 100%
|
width: 100%
|
||||||
.website-image
|
.bd-website-image
|
||||||
margin-bottom: 3rem
|
margin-bottom: 3rem
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
border-color: $github
|
border-color: $github
|
||||||
color: $white
|
color: $white
|
||||||
|
|
||||||
.tw-button
|
.bd-tw-button
|
||||||
background-color: $twitter
|
background-color: $twitter
|
||||||
color: $white
|
color: $white
|
||||||
border-color: transparent !important
|
border-color: transparent !important
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
.testimonials
|
.bd-testimonials
|
||||||
background-color: $background
|
background-color: $background
|
||||||
|
|
||||||
.testimonial
|
.bd-testimonial
|
||||||
align-items: flex-start
|
align-items: flex-start
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
|
||||||
.testimonial-tweet
|
.bd-testimonial-tweet
|
||||||
background-color: $white
|
background-color: $white
|
||||||
|
|
||||||
.more-loves
|
.bd-more-loves
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
@ -26,35 +26,35 @@
|
|||||||
transform: scale(1.04)
|
transform: scale(1.04)
|
||||||
|
|
||||||
+mobile
|
+mobile
|
||||||
.testimonials
|
.bd-testimonials
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
.testimonial
|
.bd-testimonial
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.testimonials
|
.bd-testimonials
|
||||||
padding: 3rem
|
padding: 3rem
|
||||||
.testimonial + .testimonial
|
.bd-testimonial + .bd-testimonial
|
||||||
margin-top: 1.5rem
|
margin-top: 1.5rem
|
||||||
|
|
||||||
+desktop
|
+desktop
|
||||||
.testimonials
|
.bd-testimonials
|
||||||
min-height: 595px
|
min-height: 595px
|
||||||
|
|
||||||
+widescreen
|
+widescreen
|
||||||
.testimonials
|
.bd-testimonials
|
||||||
min-height: 653px
|
min-height: 653px
|
||||||
|
|
||||||
+fullhd
|
+fullhd
|
||||||
.testimonials
|
.bd-testimonials
|
||||||
min-height: 632px
|
min-height: 632px
|
||||||
|
|
||||||
.rainbow
|
.bd-rainbow
|
||||||
animation: rainbow 8s ease infinite
|
animation: rainbow 8s ease infinite
|
||||||
background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
|
background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
|
||||||
background-size: 800% 800%
|
background-size: 800% 800%
|
||||||
|
|
||||||
.hero.is-love
|
.hero.bd-is-love
|
||||||
.title,
|
.title,
|
||||||
.subtitle
|
.subtitle
|
||||||
color: $white
|
color: $white
|
||||||
@ -67,35 +67,35 @@
|
|||||||
100%
|
100%
|
||||||
background-position: 0% 80%
|
background-position: 0% 80%
|
||||||
|
|
||||||
.hug
|
.bd-hug
|
||||||
align-items: flex-start
|
align-items: flex-start
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
|
||||||
.embrace
|
.bd-embrace
|
||||||
background-color: $background
|
background-color: $background
|
||||||
border-radius: $radius
|
border-radius: $radius
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
|
|
||||||
+mobile
|
+mobile
|
||||||
.love
|
.bd-love
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
.hug
|
.bd-hug
|
||||||
margin: 1.5rem
|
margin: 1.5rem
|
||||||
.embrace
|
.bd-embrace
|
||||||
text-align: center
|
text-align: center
|
||||||
&:not(:first-child)
|
&:not(:first-child)
|
||||||
margin-top: 1.5rem
|
margin-top: 1.5rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
.embrace-button
|
.bd-embrace-button
|
||||||
margin-top: 0.75rem
|
margin-top: 0.75rem
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.love
|
.bd-love
|
||||||
padding-bottom: 3rem
|
padding-bottom: 3rem
|
||||||
padding-top: 3rem
|
padding-top: 3rem
|
||||||
.embrace
|
.bd-embrace
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
@ -103,13 +103,13 @@
|
|||||||
margin-top: 3rem
|
margin-top: 3rem
|
||||||
&:not(:last-child)
|
&:not(:last-child)
|
||||||
margin-bottom: 3rem
|
margin-bottom: 3rem
|
||||||
.embrace-button
|
.bd-embrace-button
|
||||||
margin-left: 1.5rem
|
margin-left: 1.5rem
|
||||||
.hugs
|
.bd-hugs
|
||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
padding-bottom: 3rem
|
padding-bottom: 3rem
|
||||||
.hug
|
.bd-hug
|
||||||
margin-top: 1.5rem
|
margin-top: 1.5rem
|
||||||
width: calc(33.3333% - 1rem)
|
width: calc(33.3333% - 1rem)
|
||||||
&:nth-child(1),
|
&:nth-child(1),
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
td:nth-child(2)
|
td:nth-child(2)
|
||||||
width: 320px
|
width: 320px
|
||||||
|
|
||||||
.color
|
.bd-color
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
|
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)
|
||||||
display: inline-block
|
display: inline-block
|
||||||
@ -12,7 +12,7 @@
|
|||||||
margin-right: 8px
|
margin-right: 8px
|
||||||
width: 24px
|
width: 24px
|
||||||
|
|
||||||
.button.is-rss
|
.button.bd-is-rss
|
||||||
background-color: #f26522
|
background-color: #f26522
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
color: #fff
|
color: #fff
|
||||||
@ -21,12 +21,12 @@
|
|||||||
&:active
|
&:active
|
||||||
background-color: darken(#f26522, 10%)
|
background-color: darken(#f26522, 10%)
|
||||||
|
|
||||||
.view-all-versions
|
.bd-view-all-versions
|
||||||
color: $text-light
|
color: $text-light
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
|
||||||
.feature-title
|
.bd-feature-title
|
||||||
color: $text-light
|
color: $text-light
|
||||||
a
|
a
|
||||||
border-bottom: 1px solid transparent
|
border-bottom: 1px solid transparent
|
||||||
@ -34,20 +34,20 @@
|
|||||||
&:hover
|
&:hover
|
||||||
border-bottom-color: $primary
|
border-bottom-color: $primary
|
||||||
|
|
||||||
.anchor-title
|
.bd-anchor-title
|
||||||
padding-top: 1.5rem
|
padding-top: 1.5rem
|
||||||
position: relative
|
position: relative
|
||||||
+until($widescreen)
|
+until($widescreen)
|
||||||
padding-left: 2rem
|
padding-left: 2rem
|
||||||
|
|
||||||
.anchor-link
|
.bd-anchor-link
|
||||||
position: absolute
|
position: absolute
|
||||||
right: calc(100% + 1rem)
|
right: calc(100% + 1rem)
|
||||||
+until($widescreen)
|
+until($widescreen)
|
||||||
left: 0
|
left: 0
|
||||||
right: auto
|
right: auto
|
||||||
|
|
||||||
.article-image
|
.bd-article-image
|
||||||
background-color: $primary
|
background-color: $primary
|
||||||
display: block
|
display: block
|
||||||
height: 240px
|
height: 240px
|
||||||
@ -64,19 +64,19 @@
|
|||||||
&.is-orange
|
&.is-orange
|
||||||
background-color: $orange
|
background-color: $orange
|
||||||
&:hover
|
&:hover
|
||||||
.article-overlay
|
.bd-article-overlay
|
||||||
opacity: 0.25
|
opacity: 0.25
|
||||||
.article-icon
|
.bd-article-icon
|
||||||
transform: scale(1.4)
|
transform: scale(1.4)
|
||||||
.article-date
|
.bd-article-date
|
||||||
transform: scale(0.9)
|
transform: scale(0.9)
|
||||||
.article-title
|
.bd-article-title
|
||||||
transform: scale(1.1)
|
transform: scale(1.1)
|
||||||
&.is-single
|
&.is-single
|
||||||
margin-bottom: 2rem
|
margin-bottom: 2rem
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
.article-overlay
|
.bd-article-overlay
|
||||||
+overlay
|
+overlay
|
||||||
background-color: $black
|
background-color: $black
|
||||||
opacity: 0
|
opacity: 0
|
||||||
@ -84,21 +84,21 @@
|
|||||||
transition-property: opacity
|
transition-property: opacity
|
||||||
transition-timing-function: $easing
|
transition-timing-function: $easing
|
||||||
|
|
||||||
.article-icon,
|
.bd-article-icon,
|
||||||
.article-info
|
.bd-article-info
|
||||||
+overlay
|
+overlay
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
|
||||||
.article-icon,
|
.bd-article-icon,
|
||||||
.article-date,
|
.bd-article-date,
|
||||||
.article-title
|
.bd-article-title
|
||||||
transition-duration: $speed
|
transition-duration: $speed
|
||||||
transition-property: transform
|
transition-property: transform
|
||||||
transition-timing-function: $easing
|
transition-timing-function: $easing
|
||||||
|
|
||||||
.article-icon
|
.bd-article-icon
|
||||||
color: $black
|
color: $black
|
||||||
opacity: 0.25
|
opacity: 0.25
|
||||||
& > span
|
& > span
|
||||||
@ -106,14 +106,14 @@
|
|||||||
.fa
|
.fa
|
||||||
font-size: 56px
|
font-size: 56px
|
||||||
|
|
||||||
.article-info
|
.bd-article-info
|
||||||
padding: 20px
|
padding: 20px
|
||||||
|
|
||||||
.article-date
|
.bd-article-date
|
||||||
color: rgba(#000, 0.5)
|
color: rgba(#000, 0.5)
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
.article-title
|
.bd-article-title
|
||||||
color: $white
|
color: $white
|
||||||
display: block
|
display: block
|
||||||
font-size: 2.5rem
|
font-size: 2.5rem
|
||||||
@ -121,6 +121,6 @@
|
|||||||
line-height: 1.25
|
line-height: 1.25
|
||||||
padding: 0 20px
|
padding: 0 20px
|
||||||
|
|
||||||
.emoji
|
.bd-emoji
|
||||||
margin-right: 0.5em
|
margin-right: 0.5em
|
||||||
margin-top: 2px
|
margin-top: 2px
|
||||||
@ -2,14 +2,14 @@ $tw-black: #1c2022
|
|||||||
$tw-blue: #2b7bb9
|
$tw-blue: #2b7bb9
|
||||||
$tw-grey: #697882
|
$tw-grey: #697882
|
||||||
|
|
||||||
.tws
|
.bd-tws
|
||||||
background-color: $background
|
background-color: $background
|
||||||
display: flex
|
display: flex
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap
|
||||||
overflow: auto
|
overflow: auto
|
||||||
padding: 20px
|
padding: 20px
|
||||||
|
|
||||||
.tw
|
.bd-tw
|
||||||
background-color: #fff
|
background-color: #fff
|
||||||
border: 1px solid #e1e8ed
|
border: 1px solid #e1e8ed
|
||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
@ -19,12 +19,12 @@ $tw-grey: #697882
|
|||||||
font-size: 16px
|
font-size: 16px
|
||||||
padding: 20px
|
padding: 20px
|
||||||
|
|
||||||
.tw-header
|
.bd-tw-header
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
display: flex
|
display: flex
|
||||||
justify-content: flex-start
|
justify-content: flex-start
|
||||||
|
|
||||||
.tw-author
|
.bd-tw-author
|
||||||
align-items: center
|
align-items: center
|
||||||
color: $tw-black
|
color: $tw-black
|
||||||
display: flex
|
display: flex
|
||||||
@ -32,7 +32,7 @@ $tw-grey: #697882
|
|||||||
&:hover
|
&:hover
|
||||||
color: $tw-blue
|
color: $tw-blue
|
||||||
|
|
||||||
.tw-avatar
|
.bd-tw-avatar
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
height: 36px
|
height: 36px
|
||||||
margin-right: 9px
|
margin-right: 9px
|
||||||
@ -43,18 +43,18 @@ $tw-grey: #697882
|
|||||||
height: 36px
|
height: 36px
|
||||||
width: 36px
|
width: 36px
|
||||||
|
|
||||||
.tw-fullname
|
.bd-tw-fullname
|
||||||
color: currentColor
|
color: currentColor
|
||||||
display: block
|
display: block
|
||||||
font-size: 16px
|
font-size: 16px
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
|
|
||||||
.tw-username
|
.bd-tw-username
|
||||||
color: $tw-grey
|
color: $tw-grey
|
||||||
display: block
|
display: block
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
|
|
||||||
.tw-content
|
.bd-tw-content
|
||||||
color: $tw-black
|
color: $tw-black
|
||||||
font-size: 16px
|
font-size: 16px
|
||||||
line-height: 1.4
|
line-height: 1.4
|
||||||
@ -67,7 +67,7 @@ $tw-grey: #697882
|
|||||||
vertical-align: -.2em
|
vertical-align: -.2em
|
||||||
width: 1.25em
|
width: 1.25em
|
||||||
|
|
||||||
.tw-date
|
.bd-tw-date
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
line-height: 1.4
|
line-height: 1.4
|
||||||
margin-top: 3.2px
|
margin-top: 3.2px
|
||||||
@ -126,27 +126,27 @@ $tw-grey: #697882
|
|||||||
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E)
|
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E)
|
||||||
|
|
||||||
+mobile
|
+mobile
|
||||||
.tws
|
.bd-tws
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
.tw
|
.bd-tw
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.tws
|
.bd-tws
|
||||||
padding: 3rem
|
padding: 3rem
|
||||||
.tw + .tw
|
.bd-tw + .bd-tw
|
||||||
margin-top: 1.5rem
|
margin-top: 1.5rem
|
||||||
|
|
||||||
+desktop
|
+desktop
|
||||||
.tws
|
.bd-tws
|
||||||
min-height: 595px
|
min-height: 595px
|
||||||
|
|
||||||
+widescreen
|
+widescreen
|
||||||
.tws
|
.bd-tws
|
||||||
min-height: 653px
|
min-height: 653px
|
||||||
|
|
||||||
+fullhd
|
+fullhd
|
||||||
.tws
|
.bd-tws
|
||||||
min-height: 632px
|
min-height: 632px
|
||||||
|
|
||||||
.twitter-tweet:not(.twitter-tweet-rendered)
|
.twitter-tweet:not(.twitter-tweet-rendered)
|
||||||
|
|||||||
@ -89,7 +89,7 @@ bootstrap:
|
|||||||
{% include navbar.html id="Documentation" %}
|
{% include navbar.html id="Documentation" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="bootstrap">
|
<main class="bd-bootstrap">
|
||||||
<section class="hero is-medium">
|
<section class="hero is-medium">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -127,10 +127,10 @@ bootstrap:
|
|||||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||||
Why choose <strong>Bulma</strong>
|
Why choose <strong>Bulma</strong>
|
||||||
</h3>
|
</h3>
|
||||||
<figure class="pros-icon">
|
<figure class="bd-pros-icon">
|
||||||
{% include svg/bulma-b.svg %}
|
{% include svg/bulma-b.svg %}
|
||||||
</figure>
|
</figure>
|
||||||
<div class="pros-list">
|
<div class="bd-pros-list">
|
||||||
{% for pro in page.bulma %}
|
{% for pro in page.bulma %}
|
||||||
{%
|
{%
|
||||||
include pro.html
|
include pro.html
|
||||||
@ -147,10 +147,10 @@ bootstrap:
|
|||||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||||
Why choose <strong>Bootstrap</strong>
|
Why choose <strong>Bootstrap</strong>
|
||||||
</h3>
|
</h3>
|
||||||
<figure class="pros-icon">
|
<figure class="bd-pros-icon">
|
||||||
{% include svg/bootstrap-icon.svg %}
|
{% include svg/bootstrap-icon.svg %}
|
||||||
</figure>
|
</figure>
|
||||||
<div class="pros-list">
|
<div class="bd-pros-list">
|
||||||
{% for pro in page.bootstrap %}
|
{% for pro in page.bootstrap %}
|
||||||
{%
|
{%
|
||||||
include pro.html
|
include pro.html
|
||||||
@ -171,8 +171,8 @@ bootstrap:
|
|||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="comparison">
|
<div class="bd-comparison">
|
||||||
<header class="comparison-header has-text-centered">
|
<header class="bd-comparison-header has-text-centered">
|
||||||
<h2 class="title">
|
<h2 class="title">
|
||||||
Comparison table
|
Comparison table
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -10,17 +10,17 @@ route: blog
|
|||||||
<div class="columns is-multiline">
|
<div class="columns is-multiline">
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
<article class="column is-4">
|
<article class="column is-4">
|
||||||
<a class="article-image is-{{ post.color }}" href="{{ post.url }}">
|
<a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
|
||||||
<span class="article-overlay"></span>
|
<span class="bd-article-overlay"></span>
|
||||||
<span class="article-icon">
|
<span class="bd-article-icon">
|
||||||
<i class="fa fa-{{ post.icon }}"></i>
|
<i class="fa fa-{{ post.icon }}"></i>
|
||||||
</span>
|
</span>
|
||||||
<strong class="article-info">
|
<strong class="bd-article-info">
|
||||||
<span>
|
<span>
|
||||||
<time class="article-date" datetime="{{ post.date | date_to_xmlschema }}">
|
<time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
|
||||||
{{ post.date | date_to_string }}
|
{{ post.date | date_to_string }}
|
||||||
</time>
|
</time>
|
||||||
<strong class="article-title">
|
<strong class="bd-article-title">
|
||||||
{{ post.name }}
|
{{ post.name }}
|
||||||
</strong>
|
</strong>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -160,7 +160,7 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_example}}
|
{{breadcrumb_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -174,14 +174,14 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_centered_example}}
|
{{breadcrumb_centered_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_right_example}}
|
{{breadcrumb_right_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -195,7 +195,7 @@ variables:
|
|||||||
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_icons_example}}
|
{{breadcrumb_icons_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -208,25 +208,25 @@ variables:
|
|||||||
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_arrow_example}}
|
{{breadcrumb_arrow_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_bullet_example}}
|
{{breadcrumb_bullet_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_dot_example}}
|
{{breadcrumb_dot_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_succeeds_example}}
|
{{breadcrumb_succeeds_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -238,19 +238,19 @@ variables:
|
|||||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_small_example}}
|
{{breadcrumb_small_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_medium_example}}
|
{{breadcrumb_medium_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{breadcrumb_large_example}}
|
{{breadcrumb_large_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -38,9 +38,9 @@ doc-subtab: level
|
|||||||
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="structure">
|
<div class="bd-structure">
|
||||||
<nav class="level structure-item is-structure-container" title="level">
|
<nav class="level bd-structure-item bd-is-structure-container" title="level">
|
||||||
<div class="level-left structure-item" title="level-left">
|
<div class="level-left bd-structure-item" title="level-left">
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
<p class="subtitle is-5">
|
<p class="subtitle is-5">
|
||||||
<strong>123</strong> posts
|
<strong>123</strong> posts
|
||||||
@ -59,7 +59,7 @@ doc-subtab: level
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="level-right structure-item" title="level-right">
|
<div class="level-right bd-structure-item" title="level-right">
|
||||||
<p class="level-item">
|
<p class="level-item">
|
||||||
<strong>All</strong>
|
<strong>All</strong>
|
||||||
</p>
|
</p>
|
||||||
@ -115,7 +115,7 @@ doc-subtab: level
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{nav_example}}
|
{{nav_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
@ -175,13 +175,13 @@ doc-subtab: level
|
|||||||
</p>
|
</p>
|
||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{nav_centered_example}}
|
{{nav_centered_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
{{nav_centered_example}}
|
{{nav_centered_example}}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{nav_centered_bis_example}}
|
{{nav_centered_bis_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
@ -222,7 +222,7 @@ doc-subtab: level
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{nav_mobile_example}}
|
{{nav_mobile_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
|
|||||||
@ -23,14 +23,14 @@ doc-subtab: media-object
|
|||||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="structure">
|
<div class="bd-structure">
|
||||||
<article class="media">
|
<article class="media">
|
||||||
<figure class="media-left structure-item" title="media-left">
|
<figure class="media-left bd-structure-item" title="media-left">
|
||||||
<p class="image is-64x64">
|
<p class="image is-64x64">
|
||||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||||
</p>
|
</p>
|
||||||
</figure>
|
</figure>
|
||||||
<div class="media-content structure-item is-structure-right" title="media-content">
|
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||||
@ -52,7 +52,7 @@ doc-subtab: media-object
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-right structure-item" title="media-right">
|
<div class="media-right bd-structure-item" title="media-right">
|
||||||
<button class="delete"></button>
|
<button class="delete"></button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
@ -92,7 +92,7 @@ doc-subtab: media-object
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{media_example}}
|
{{media_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
@ -133,7 +133,7 @@ doc-subtab: media-object
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{media_bis_example}}
|
{{media_bis_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
@ -231,7 +231,7 @@ doc-subtab: media-object
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{media_nested_example}}
|
{{media_nested_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
|
|||||||
@ -118,7 +118,7 @@ doc-subtab: nav
|
|||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{nav_example}}
|
{{nav_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -176,7 +176,7 @@ doc-subtab: nav
|
|||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{nav_tabs_example}}
|
{{nav_tabs_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -62,7 +62,7 @@ variables:
|
|||||||
{% include subnav-components.html %}
|
{% include subnav-components.html %}
|
||||||
|
|
||||||
{% capture navbar_example %}
|
{% capture navbar_example %}
|
||||||
{% include navbar.html id="Example" %}
|
{% include navbar.html id="bd-example" %}
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture navbar_brand_example %}
|
{% capture navbar_brand_example %}
|
||||||
@ -591,7 +591,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{navbar_example}}
|
{{navbar_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -621,7 +621,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{navbar_brand_items_example}}
|
{{navbar_brand_items_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -641,7 +641,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
<div class="navbar-burger" style="display: flex;">
|
<div class="navbar-burger" style="display: flex;">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
@ -657,7 +657,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
<div class="navbar-burger is-active" style="display: flex;">
|
<div class="navbar-burger is-active" style="display: flex;">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
@ -798,7 +798,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{navbar_transparent_example}}
|
{{navbar_transparent_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -825,7 +825,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_example }}
|
{{ navbar_dropdown_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -866,7 +866,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_hover_example }}
|
{{ navbar_dropdown_hover_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -880,7 +880,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_active_example }}
|
{{ navbar_dropdown_active_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -905,7 +905,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_right_example }}
|
{{ navbar_dropdown_right_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -935,7 +935,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_default_example }}
|
{{ navbar_dropdown_default_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -967,7 +967,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_boxed_example }}
|
{{ navbar_dropdown_boxed_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -983,7 +983,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_dropdown_item_active_example }}
|
{{ navbar_dropdown_item_active_example }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -209,7 +209,7 @@ variables:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_example}}
|
{{pagination_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -221,7 +221,7 @@ variables:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_options_example}}
|
{{pagination_options_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -233,13 +233,13 @@ variables:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_centered_example}}
|
{{pagination_centered_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
|
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_right_example}}
|
{{pagination_right_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -256,15 +256,15 @@ variables:
|
|||||||
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
|
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_small_example}}
|
{{pagination_small_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_medium_example}}
|
{{pagination_medium_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{pagination_large_example}}
|
{{pagination_large_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -382,7 +382,7 @@ variables:
|
|||||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_example}}
|
{{tabs_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_example}}{% endhighlight %}
|
||||||
@ -396,12 +396,12 @@ variables:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_centered_example}}
|
{{tabs_centered_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_right_example}}
|
{{tabs_right_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_right_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_right_example}}{% endhighlight %}
|
||||||
@ -413,7 +413,7 @@ variables:
|
|||||||
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
<p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_icons_example}}
|
{{tabs_icons_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_icons_example}}{% endhighlight %}
|
||||||
@ -423,17 +423,17 @@ variables:
|
|||||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_small_example}}
|
{{tabs_small_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_medium_example}}
|
{{tabs_medium_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_large_example}}
|
{{tabs_large_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_large_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_large_example}}{% endhighlight %}
|
||||||
@ -445,7 +445,7 @@ variables:
|
|||||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_boxed_example}}
|
{{tabs_boxed_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
|
||||||
@ -454,7 +454,7 @@ variables:
|
|||||||
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_toggle_example}}
|
{{tabs_toggle_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
|
||||||
@ -463,7 +463,7 @@ variables:
|
|||||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_fullwidth_example}}
|
{{tabs_fullwidth_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
|
||||||
@ -475,22 +475,22 @@ variables:
|
|||||||
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_centered_boxed_example}}
|
{{tabs_centered_boxed_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_toggle_fullwidth_example}}
|
{{tabs_toggle_fullwidth_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_centered_boxed_medium_example}}
|
{{tabs_centered_boxed_medium_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{tabs_toggle_fullwidth_large_example}}
|
{{tabs_toggle_fullwidth_large_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
|
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
|
||||||
|
|||||||
@ -466,7 +466,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="callout is-primary">
|
<div class="bd-callout is-primary">
|
||||||
{{button_inverted_example}}
|
{{button_inverted_example}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -479,7 +479,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="callout is-primary">
|
<div class="bd-callout is-primary">
|
||||||
{{button_inverted_outlined_example}}
|
{{button_inverted_outlined_example}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -620,7 +620,7 @@ variables:
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{button_group_example}}
|
{{button_group_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{button_group_example}}{% endhighlight %}
|
{% highlight html %}{{button_group_example}}{% endhighlight %}
|
||||||
@ -632,7 +632,7 @@ variables:
|
|||||||
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{button_addons_example}}
|
{{button_addons_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{button_addons_example}}{% endhighlight %}
|
{% highlight html %}{{button_addons_example}}{% endhighlight %}
|
||||||
@ -644,7 +644,7 @@ variables:
|
|||||||
<p>You can group together addons as well:</p>
|
<p>You can group together addons as well:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{button_group_addons_example}}
|
{{button_group_addons_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}
|
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}
|
||||||
|
|||||||
@ -164,7 +164,7 @@ variables:
|
|||||||
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{content_example}}
|
{{content_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -175,7 +175,7 @@ variables:
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<div class="content is-small">
|
<div class="content is-small">
|
||||||
<h1>Hello World</h1>
|
<h1>Hello World</h1>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||||
@ -189,7 +189,7 @@ variables:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<div class="content is-medium">
|
<div class="content is-medium">
|
||||||
<h1>Hello World</h1>
|
<h1>Hello World</h1>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||||
@ -203,7 +203,7 @@ variables:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<div class="content is-large">
|
<div class="content is-large">
|
||||||
<h1>Hello World</h1>
|
<h1>Hello World</h1>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
|
||||||
|
|||||||
@ -1096,7 +1096,7 @@ doc-subtab: form
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
<p>If you want to <strong>attach</strong> controls together, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_example}}
|
{{addons_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_example}}{% endhighlight %}
|
{% highlight html %}{{addons_example}}{% endhighlight %}
|
||||||
@ -1112,7 +1112,7 @@ doc-subtab: form
|
|||||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_static_example}}
|
{{addons_static_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||||
@ -1120,7 +1120,7 @@ doc-subtab: form
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_expanded_example}}
|
{{addons_expanded_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||||
@ -1128,7 +1128,7 @@ doc-subtab: form
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_expanded_fullwidth_example}}
|
{{addons_expanded_fullwidth_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
||||||
@ -1136,11 +1136,11 @@ doc-subtab: form
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_center_example}}
|
{{addons_center_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_right_example}}
|
{{addons_right_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_right_example}}{% endhighlight %}
|
{% highlight html %}{{addons_right_example}}{% endhighlight %}
|
||||||
@ -1158,7 +1158,7 @@ doc-subtab: form
|
|||||||
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
|
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{group_example}}
|
{{group_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{group_example}}{% endhighlight %}
|
{% highlight html %}{{group_example}}{% endhighlight %}
|
||||||
@ -1178,7 +1178,7 @@ doc-subtab: form
|
|||||||
</ul>
|
</ul>
|
||||||
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{horizontal_form_example}}
|
{{horizontal_form_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
||||||
@ -1205,7 +1205,7 @@ doc-subtab: form
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{field_label_example}}
|
{{field_label_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{field_label_example}}{% endhighlight %}
|
{% highlight html %}{{field_label_example}}{% endhighlight %}
|
||||||
|
|||||||
@ -42,7 +42,7 @@ variables:
|
|||||||
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{icon_example}}
|
{{icon_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -49,7 +49,7 @@ variables:
|
|||||||
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
|
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<figure class="image is-128x128">
|
<figure class="image is-128x128">
|
||||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||||
</figure>
|
</figure>
|
||||||
@ -82,7 +82,7 @@ variables:
|
|||||||
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
|
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<figure class="image is-128x128">
|
<figure class="image is-128x128">
|
||||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||||
</figure>
|
</figure>
|
||||||
|
|||||||
@ -46,21 +46,21 @@ variables:
|
|||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ progress }}
|
{{ progress }}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{ progress }}{% endhighlight %}
|
{% highlight html %}{{ progress }}{% endhighlight %}
|
||||||
|
|
||||||
{% include heading.html name="Colors" %}
|
{% include heading.html name="Colors" %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ progress_colors }}
|
{{ progress_colors }}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{ progress_colors }}{% endhighlight %}
|
{% highlight html %}{{ progress_colors }}{% endhighlight %}
|
||||||
|
|
||||||
{% include heading.html name="Sizes" %}
|
{% include heading.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ progress_sizes }}
|
{{ progress_sizes }}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{ progress_sizes }}{% endhighlight %}
|
{% highlight html %}{{ progress_sizes }}{% endhighlight %}
|
||||||
|
|||||||
@ -393,7 +393,7 @@ variables:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{table_example}}
|
{{table_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -364,7 +364,7 @@ variables:
|
|||||||
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
|
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ tags }}
|
{{ tags }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -380,7 +380,7 @@ variables:
|
|||||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
|
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ tags_multiple }}
|
{{ tags_multiple }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -396,7 +396,7 @@ variables:
|
|||||||
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
|
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ tags_addons }}
|
{{ tags_addons }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -412,7 +412,7 @@ variables:
|
|||||||
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
|
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ tags_delete_addons }}
|
{{ tags_delete_addons }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -428,7 +428,7 @@ variables:
|
|||||||
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
|
If you want to attach <code>.tags</code> containers <strong>together</strong>, simply use the <code>.field</code> element with the <code>.is-grouped</code> and <code>.is-grouped-multiline</code> modifiers.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ tags_field_addons }}
|
{{ tags_field_addons }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -444,7 +444,7 @@ variables:
|
|||||||
This can be useful for a long list of <strong>blog tags</strong>.
|
This can be useful for a long list of <strong>blog tags</strong>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ tags_blog_addons }}
|
{{ tags_blog_addons }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -593,7 +593,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file }}
|
{{ file }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -611,7 +611,7 @@ variables:
|
|||||||
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_name }}
|
{{ file_name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -627,7 +627,7 @@ variables:
|
|||||||
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
|
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_name_right }}
|
{{ file_name_right }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -643,7 +643,7 @@ variables:
|
|||||||
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
|
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_name_fullwidth }}
|
{{ file_name_fullwidth }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -659,7 +659,7 @@ variables:
|
|||||||
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
|
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_boxed }}
|
{{ file_boxed }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -675,7 +675,7 @@ variables:
|
|||||||
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
|
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_boxed_name }}
|
{{ file_boxed_name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -700,7 +700,7 @@ variables:
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_colors }}
|
{{ file_colors }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -730,7 +730,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_sizes }}
|
{{ file_sizes }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -741,7 +741,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_sizes_name }}
|
{{ file_sizes_name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -752,7 +752,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_sizes_boxed }}
|
{{ file_sizes_boxed }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -763,7 +763,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_sizes_boxed_name }}
|
{{ file_sizes_boxed_name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -790,7 +790,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_centered }}
|
{{ file_centered }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -801,7 +801,7 @@ variables:
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{ file_right }}
|
{{ file_right }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -993,7 +993,7 @@ doc-subtab: general
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_example}}
|
{{addons_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_example}}{% endhighlight %}
|
{% highlight html %}{{addons_example}}{% endhighlight %}
|
||||||
@ -1009,7 +1009,7 @@ doc-subtab: general
|
|||||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_static_example}}
|
{{addons_static_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||||
@ -1017,7 +1017,7 @@ doc-subtab: general
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_expanded_example}}
|
{{addons_expanded_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||||
@ -1025,7 +1025,7 @@ doc-subtab: general
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_expanded_fullwidth_example}}
|
{{addons_expanded_fullwidth_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
||||||
@ -1033,11 +1033,11 @@ doc-subtab: general
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifers to alter the <strong>alignment</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_center_example}}
|
{{addons_center_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{addons_right_example}}
|
{{addons_right_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{addons_right_example}}{% endhighlight %}
|
{% highlight html %}{{addons_right_example}}{% endhighlight %}
|
||||||
@ -1051,7 +1051,7 @@ doc-subtab: general
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{group_example}}
|
{{group_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{group_example}}{% endhighlight %}
|
{% highlight html %}{{group_example}}{% endhighlight %}
|
||||||
@ -1061,12 +1061,12 @@ doc-subtab: general
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{group_centered_example}}
|
{{group_centered_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{group_centered_example}}{% endhighlight %}
|
{% highlight html %}{{group_centered_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{group_right_example}}
|
{{group_right_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{group_right_example}}{% endhighlight %}
|
{% highlight html %}{{group_right_example}}{% endhighlight %}
|
||||||
@ -1077,7 +1077,7 @@ doc-subtab: general
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{group_expanded_example}}
|
{{group_expanded_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
|
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
|
||||||
@ -1094,7 +1094,7 @@ doc-subtab: general
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{group_multiline_example}}
|
{{group_multiline_example}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1118,7 +1118,7 @@ doc-subtab: general
|
|||||||
</ul>
|
</ul>
|
||||||
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{horizontal_form_example}}
|
{{horizontal_form_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
||||||
@ -1142,7 +1142,7 @@ doc-subtab: general
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
{{field_label_example}}
|
{{field_label_example}}
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{field_label_example}}{% endhighlight %}
|
{% highlight html %}{{field_label_example}}{% endhighlight %}
|
||||||
|
|||||||
@ -73,7 +73,7 @@ doc-subtab: container
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="example is-fullwidth">
|
<div class="bd-example is-fullwidth">
|
||||||
{{container_example}}
|
{{container_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -88,7 +88,7 @@ doc-subtab: container
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="example is-fullwidth">
|
<div class="bd-example is-fullwidth">
|
||||||
{{container_fluid_example}}
|
{{container_fluid_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -109,13 +109,13 @@ doc-subtab: container
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="example is-fullwidth">
|
<div class="bd-example is-fullwidth">
|
||||||
{{container_widescreen_example}}
|
{{container_widescreen_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
|
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
|
||||||
|
|
||||||
<div class="example is-fullwidth">
|
<div class="bd-example is-fullwidth">
|
||||||
{{container_fullhd_example}}
|
{{container_fullhd_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@ doc-subtab: footer
|
|||||||
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
|
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="content has-text-centered">
|
<div class="content has-text-centered">
|
||||||
|
|||||||
@ -17,7 +17,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -58,7 +58,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -88,7 +88,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-info">
|
<section class="hero is-info">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -103,7 +103,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-success">
|
<section class="hero is-success">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -118,7 +118,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-warning">
|
<section class="hero is-warning">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -133,7 +133,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-danger">
|
<section class="hero is-danger">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -148,7 +148,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-light">
|
<section class="hero is-light">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -163,7 +163,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-dark">
|
<section class="hero is-dark">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -192,7 +192,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-primary is-bold">
|
<section class="hero is-medium is-primary is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -220,7 +220,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-info is-bold">
|
<section class="hero is-medium is-info is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -234,7 +234,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-success is-bold">
|
<section class="hero is-medium is-success is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -248,7 +248,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-warning is-bold">
|
<section class="hero is-medium is-warning is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -262,7 +262,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-danger is-bold">
|
<section class="hero is-medium is-danger is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -276,7 +276,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-light is-bold">
|
<section class="hero is-medium is-light is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -290,7 +290,7 @@ doc-subtab: hero
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-medium is-dark is-bold">
|
<section class="hero is-medium is-dark is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -316,7 +316,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-primary is-medium">
|
<section class="hero is-primary is-medium">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -346,7 +346,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-info is-large">
|
<section class="hero is-info is-large">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -376,7 +376,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="example is-fullwidth">
|
<div class="bd-example is-fullwidth">
|
||||||
<section class="hero is-success is-fullheight">
|
<section class="hero is-success is-fullheight">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -428,7 +428,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-primary is-medium">
|
<section class="hero is-primary is-medium">
|
||||||
<div class="hero-head">
|
<div class="hero-head">
|
||||||
<header class="nav">
|
<header class="nav">
|
||||||
@ -575,7 +575,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="example">
|
<div class="bd-example">
|
||||||
<section class="hero is-info is-large">
|
<section class="hero is-info is-large">
|
||||||
<div class="hero-head">
|
<div class="hero-head">
|
||||||
<header class="nav">
|
<header class="nav">
|
||||||
@ -722,7 +722,7 @@ doc-subtab: hero
|
|||||||
</section>
|
</section>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="example is-fullwidth">
|
<div class="bd-example is-fullwidth">
|
||||||
<section class="hero is-success is-fullheight">
|
<section class="hero is-success is-fullheight">
|
||||||
<div class="hero-head">
|
<div class="hero-head">
|
||||||
<header class="nav">
|
<header class="nav">
|
||||||
|
|||||||
@ -166,10 +166,10 @@ shades:
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{% if color.invert_hex == "black" %}
|
{% if color.invert_hex == "black" %}
|
||||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||||
<code>rgba(0, 0, 0, 0.7)</code>
|
<code>rgba(0, 0, 0, 0.7)</code>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="color" style="background: #fff;"></span>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
<code>#fff</code>
|
<code>#fff</code>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -46,14 +46,14 @@ doc-subtab: functions
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #00d1b2;"></span>
|
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||||
<code>#00d1b2</code>
|
<code>#00d1b2</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.52831</code>
|
<code>0.52831</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #fff;"></span>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
<code>#fff</code>
|
<code>#fff</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -64,14 +64,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #3273dc;"></span>
|
<span class="bd-color" style="background: #3273dc;"></span>
|
||||||
<code>#3273dc</code>
|
<code>#3273dc</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.23119</code>
|
<code>0.23119</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #fff;"></span>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
<code>#fff</code>
|
<code>#fff</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -82,14 +82,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #23d160;"></span>
|
<span class="bd-color" style="background: #23d160;"></span>
|
||||||
<code>#23d160</code>
|
<code>#23d160</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.51067</code>
|
<code>0.51067</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #fff;"></span>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
<code>#fff</code>
|
<code>#fff</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -100,14 +100,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #ffdd57;"></span>
|
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||||
<code>#ffdd57</code>
|
<code>#ffdd57</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.76863</code>
|
<code>0.76863</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||||
<code>rgba(0, 0, 0, 0.7)</code>
|
<code>rgba(0, 0, 0, 0.7)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -118,14 +118,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #ff3860;"></span>
|
<span class="bd-color" style="background: #ff3860;"></span>
|
||||||
<code>#ff3860</code>
|
<code>#ff3860</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.27313</code>
|
<code>0.27313</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #fff;"></span>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
<code>#fff</code>
|
<code>#fff</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -136,14 +136,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #ffb3b3;"></span>
|
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||||
<code>#ffb3b3</code>
|
<code>#ffb3b3</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.61796</code>
|
<code>0.61796</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<code>rgba(0,0,0,0.7)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -154,14 +154,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #ffbc6b;"></span>
|
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||||
<code>#ffbc6b</code>
|
<code>#ffbc6b</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.63053</code>
|
<code>0.63053</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<code>rgba(0,0,0,0.7)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -172,14 +172,14 @@ doc-subtab: functions
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: hsl(294, 71%, 79%);"></span>
|
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||||
<code>hsl(294, 71%, 79%)</code>
|
<code>hsl(294, 71%, 79%)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<code>0.5529</code>
|
<code>0.5529</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<code>rgba(0,0,0,0.7)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -193,7 +193,7 @@ doc-subtab: functions
|
|||||||
<p>
|
<p>
|
||||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||||
<br>
|
<br>
|
||||||
For example, this shade of <span class="color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||||
</p>
|
</p>
|
||||||
<table class="table is-bordered">
|
<table class="table is-bordered">
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -205,7 +205,7 @@ doc-subtab: functions
|
|||||||
<code>$purple-invert: findColorInvert($purple)</code>
|
<code>$purple-invert: findColorInvert($purple)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: rgba(0,0,0,0.7);"></span>
|
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||||
<code>rgba(0,0,0,0.7)</code>
|
<code>rgba(0,0,0,0.7)</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -222,7 +222,7 @@ doc-subtab: functions
|
|||||||
<code>$purple-invert: #fff</code>
|
<code>$purple-invert: #fff</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: #fff;"></span>
|
<span class="bd-color" style="background: #fff;"></span>
|
||||||
<code>#fff</code>
|
<code>#fff</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
|||||||
@ -89,7 +89,7 @@ doc-subtab: start
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="example highlight-full">
|
<div class="bd-example highlight-full">
|
||||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -264,7 +264,7 @@ derived_variables:
|
|||||||
<code style="white-space: nowrap;">{{ color.name }}</code>
|
<code style="white-space: nowrap;">{{ color.name }}</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="color" style="background: {{ color.value }};"></span>
|
<span class="bd-color" style="background: {{ color.value }};"></span>
|
||||||
<code>{{ color.value }}</code>
|
<code>{{ color.value }}</code>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@ -48,12 +48,12 @@ websites:
|
|||||||
---
|
---
|
||||||
|
|
||||||
{% capture embrace_expo %}
|
{% capture embrace_expo %}
|
||||||
<div class="embrace is-expo">
|
<div class="bd-embrace is-expo">
|
||||||
<p class="embrace-text">
|
<p class="bd-embrace-text">
|
||||||
Did you design a gorgeous website with Bulma too? <strong>Tell us about it!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
|
Did you design a gorgeous website with Bulma too? <strong>Tell us about it!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="embrace-button">
|
<p class="bd-embrace-button">
|
||||||
<a class="tw-button button"
|
<a class="bd-tw-button button"
|
||||||
data-social-network="Twitter"
|
data-social-network="Twitter"
|
||||||
data-social-action="tweet"
|
data-social-action="tweet"
|
||||||
data-social-target="{{ site.url }}"
|
data-social-target="{{ site.url }}"
|
||||||
@ -94,16 +94,16 @@ websites:
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<main class="expo">
|
<main class="bd-expo">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{{ embrace_expo }}
|
{{ embrace_expo }}
|
||||||
|
|
||||||
<div class="websites">
|
<div class="bd-websites">
|
||||||
{% for website in page.websites %}
|
{% for website in page.websites %}
|
||||||
{% assign imageName = website.name | slugify %}
|
{% assign imageName = website.name | slugify %}
|
||||||
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
||||||
<article class="website {% if website.highlighted %}is-highlighted{% endif %}">
|
<article class="bd-website {% if website.highlighted %}bd-is-highlighted{% endif %}">
|
||||||
<a class="website-image" href="{{ website.url }}" target="_blank">
|
<a class="bd-website-image" href="{{ website.url }}" target="_blank">
|
||||||
{% if website.highlighted %}
|
{% if website.highlighted %}
|
||||||
{% assign size1x = "1344x840" %}
|
{% assign size1x = "1344x840" %}
|
||||||
{% assign size2x = "2688x1680" %}
|
{% assign size2x = "2688x1680" %}
|
||||||
@ -127,12 +127,12 @@ websites:
|
|||||||
width="672"
|
width="672"
|
||||||
height="420">
|
height="420">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<span class="website-overlay is-overlay"></span>
|
<span class="bd-website-overlay is-overlay"></span>
|
||||||
</a>
|
</a>
|
||||||
<h2 class="title is-5 website-name is-marginless">
|
<h2 class="title is-5 bd-website-name is-marginless">
|
||||||
{{ website.name }}
|
{{ website.name }}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="has-text-grey-light website-date">
|
<p class="has-text-grey-light bd-website-date">
|
||||||
{{ website.date }}
|
{{ website.date }}
|
||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
@ -85,7 +85,7 @@ route: index
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="tws">
|
<section class="bd-tws">
|
||||||
{% include tws.html %}
|
{% include tws.html %}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
102
docs/love.html
102
docs/love.html
@ -8,7 +8,7 @@ route: love
|
|||||||
{% include navbar.html id="LoveHero" %}
|
{% include navbar.html id="LoveHero" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="hero is-love rainbow">
|
<section class="hero bd-is-love bd-rainbow">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns is-vcentered">
|
<div class="columns is-vcentered">
|
||||||
@ -28,111 +28,111 @@ route: love
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<main class="love">
|
<main class="bd-love">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="embrace">
|
<div class="bd-embrace">
|
||||||
<p class="embrace-text">
|
<p class="bd-embrace-text">
|
||||||
Are you a Bulma fan too? <strong>Show your support!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
|
Are you a Bulma fan too? <strong>Show your support!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
|
||||||
</p>
|
</p>
|
||||||
<p class="embrace-button">
|
<p class="bd-embrace-button">
|
||||||
{% include elements/tw-button.html label="Tweet #bulmaio" %}
|
{% include elements/tw-button.html label="Tweet #bulmaio" %}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hugs">
|
<div class="bd-hugs">
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Relaunched my personal site with <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a>. The best css framework I've used yet. Thanks <a href="https://twitter.com/jgthms">@jgthms</a> 🤜</p>— L A N C E (@lancepadgett) <a href="https://twitter.com/lancepadgett/status/893193878685220864">August 3, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Relaunched my personal site with <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a>. The best css framework I've used yet. Thanks <a href="https://twitter.com/jgthms">@jgthms</a> 🤜</p>— L A N C E (@lancepadgett) <a href="https://twitter.com/lancepadgett/status/893193878685220864">August 3, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Decided to use Bulma on this project I’m working on. I am happy to use it and happy to see the docs in tact too. Great work <a href="https://twitter.com/jgthms">@jgthms</a> !</p>— Jay Wilburn (@jay_wilburn) <a href="https://twitter.com/jay_wilburn/status/893176202210553857">August 3, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Decided to use Bulma on this project I’m working on. I am happy to use it and happy to see the docs in tact too. Great work <a href="https://twitter.com/jgthms">@jgthms</a> !</p>— Jay Wilburn (@jay_wilburn) <a href="https://twitter.com/jay_wilburn/status/893176202210553857">August 3, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Actually making my own website easily & entirely with <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for a great framework <a href="https://t.co/27dMWIozmi">https://t.co/27dMWIozmi</a></p>— Chinux Paribus (@ch1nux) <a href="https://twitter.com/ch1nux/status/893112719519481856">August 3, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Actually making my own website easily & entirely with <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for a great framework <a href="https://t.co/27dMWIozmi">https://t.co/27dMWIozmi</a></p>— Chinux Paribus (@ch1nux) <a href="https://twitter.com/ch1nux/status/893112719519481856">August 3, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The new file input styles with <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> were introduced just before i thought i have to do it on my own. Perfect timing <a href="https://twitter.com/jgthms">@jgthms</a></p>— Stefan Schwaighofer (@StefSchwai) <a href="https://twitter.com/StefSchwai/status/892798375753592836">August 2, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The new file input styles with <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> were introduced just before i thought i have to do it on my own. Perfect timing <a href="https://twitter.com/jgthms">@jgthms</a></p>— Stefan Schwaighofer (@StefSchwai) <a href="https://twitter.com/StefSchwai/status/892798375753592836">August 2, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Well, because of <a href="https://twitter.com/jgthms">@jgthms</a>, now all my websites are using <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a> Thank you <3</p>— Cadox8🔸 (@cadox8) <a href="https://twitter.com/cadox8/status/892691375715745792">August 2, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Well, because of <a href="https://twitter.com/jgthms">@jgthms</a>, now all my websites are using <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a> Thank you <3</p>— Cadox8🔸 (@cadox8) <a href="https://twitter.com/cadox8/status/892691375715745792">August 2, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Finally had some free time to start, but I've really been enjoying converting my personal site to <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> by <a href="https://twitter.com/jgthms">@jgthms</a>. Can't wait to finish.</p>— Andrew Fomera (@AndrewFomera) <a href="https://twitter.com/AndrewFomera/status/892588073950773248">August 2, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Finally had some free time to start, but I've really been enjoying converting my personal site to <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> by <a href="https://twitter.com/jgthms">@jgthms</a>. Can't wait to finish.</p>— Andrew Fomera (@AndrewFomera) <a href="https://twitter.com/AndrewFomera/status/892588073950773248">August 2, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/Bulma?src=hash">#Bulma</a> helps make front-end dev fun again :) Great job <a href="https://twitter.com/jgthms">@jgthms</a>!</p>— Marco Petersen (@ocrampete16) <a href="https://twitter.com/ocrampete16/status/892362154610917378">August 1, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/Bulma?src=hash">#Bulma</a> helps make front-end dev fun again :) Great job <a href="https://twitter.com/jgthms">@jgthms</a>!</p>— Marco Petersen (@ocrampete16) <a href="https://twitter.com/ocrampete16/status/892362154610917378">August 1, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> makes me so happy. Thank you <a href="https://twitter.com/jgthms">@jgthms</a>!</p>— Yokim Pillay (@YokimPillay) <a href="https://twitter.com/YokimPillay/status/892273691563896832">August 1, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> makes me so happy. Thank you <a href="https://twitter.com/jgthms">@jgthms</a>!</p>— Yokim Pillay (@YokimPillay) <a href="https://twitter.com/YokimPillay/status/892273691563896832">August 1, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">in all honesty, i heart bulma simple and getting better <a href="https://t.co/YRrzTt9wew">https://t.co/YRrzTt9wew</a> <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Scalla (@itsscalla) <a href="https://twitter.com/itsscalla/status/892184654501076994">August 1, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">in all honesty, i heart bulma simple and getting better <a href="https://t.co/YRrzTt9wew">https://t.co/YRrzTt9wew</a> <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Scalla (@itsscalla) <a href="https://twitter.com/itsscalla/status/892184654501076994">August 1, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a>, redesigning my website with it 😃</p>— Daniel Harrin (@danjharrin) <a href="https://twitter.com/danjharrin/status/892083375196037124">July 31, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a>, redesigning my website with it 😃</p>— Daniel Harrin (@danjharrin) <a href="https://twitter.com/danjharrin/status/892083375196037124">July 31, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Love using Bulma for my last <a href="https://twitter.com/rails">@rails</a> project. What I like the most is that it shipped without js so it works easily with Turbolinks.</p>— Thomas Galibert (@thomasgalibert) <a href="https://twitter.com/thomasgalibert/status/889499262136045569">July 24, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Love using Bulma for my last <a href="https://twitter.com/rails">@rails</a> project. What I like the most is that it shipped without js so it works easily with Turbolinks.</p>— Thomas Galibert (@thomasgalibert) <a href="https://twitter.com/thomasgalibert/status/889499262136045569">July 24, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> I got to know about Bulma today and love it already. Thank you for your work! Exactly I was looking for to build a landing page.</p>— Raathigeshan (@Raathigesh) <a href="https://twitter.com/Raathigesh/status/888602569148211203">July 22, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> I got to know about Bulma today and love it already. Thank you for your work! Exactly I was looking for to build a landing page.</p>— Raathigeshan (@Raathigesh) <a href="https://twitter.com/Raathigesh/status/888602569148211203">July 22, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Thanks for the dropdowns man, I love 'em</p>— Oliver Dvorski (@oliverdvorski) <a href="https://twitter.com/oliverdvorski/status/884449239291580416">July 10, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Thanks for the dropdowns man, I love 'em</p>— Oliver Dvorski (@oliverdvorski) <a href="https://twitter.com/oliverdvorski/status/884449239291580416">July 10, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Updated my Bulma css framework to the latest and used the new Navbar! Good stuff! <a href="https://twitter.com/jgthms">@jgthms</a></p>— Josh Weaver (@3cordguy) <a href="https://twitter.com/3cordguy/status/884443272948658176">July 10, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Updated my Bulma css framework to the latest and used the new Navbar! Good stuff! <a href="https://twitter.com/jgthms">@jgthms</a></p>— Josh Weaver (@3cordguy) <a href="https://twitter.com/3cordguy/status/884443272948658176">July 10, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">New bulma release solves like 7 things I was building from scratch. Thank you! <a href="https://t.co/xwMKTXd68G">https://t.co/xwMKTXd68G</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Sarah C (@sarahsellaphix) <a href="https://twitter.com/sarahsellaphix/status/882772930194747392">July 6, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">New bulma release solves like 7 things I was building from scratch. Thank you! <a href="https://t.co/xwMKTXd68G">https://t.co/xwMKTXd68G</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Sarah C (@sarahsellaphix) <a href="https://twitter.com/sarahsellaphix/status/882772930194747392">July 6, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">today I've created a reasonable static website via bulma.io by <a href="https://twitter.com/jgthms">@jgthms</a><br>I've used 3 little JS scripts to handle classes and it was smooth AF!</p>— Andrea Giammarchi (@WebReflection) <a href="https://twitter.com/WebReflection/status/880554577187266560">June 29, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">today I've created a reasonable static website via bulma.io by <a href="https://twitter.com/jgthms">@jgthms</a><br>I've used 3 little JS scripts to handle classes and it was smooth AF!</p>— Andrea Giammarchi (@WebReflection) <a href="https://twitter.com/WebReflection/status/880554577187266560">June 29, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I'm really liking <a href="https://twitter.com/hashtag/bulma?src=hash">#bulma</a> CSS from <a href="https://twitter.com/jgthms">@jgthms</a> - way less fragile to theme yourself than a lot of CSS frameworks. <a href="https://t.co/VX9s6VuUKX">https://t.co/VX9s6VuUKX</a></p>— Joe B (@JoeBlubaugh) <a href="https://twitter.com/JoeBlubaugh/status/879918120143540224">June 28, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I'm really liking <a href="https://twitter.com/hashtag/bulma?src=hash">#bulma</a> CSS from <a href="https://twitter.com/jgthms">@jgthms</a> - way less fragile to theme yourself than a lot of CSS frameworks. <a href="https://t.co/VX9s6VuUKX">https://t.co/VX9s6VuUKX</a></p>— Joe B (@JoeBlubaugh) <a href="https://twitter.com/JoeBlubaugh/status/879918120143540224">June 28, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">This looks awesome. Espec. horiz. & vert. alignments Bulma: a modern CSS framework based on Flexbox : <a href="https://t.co/iF8LQye3TD">https://t.co/iF8LQye3TD</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Brentley Broughton (@babroughton) <a href="https://twitter.com/babroughton/status/879725003306147840">June 27, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">This looks awesome. Espec. horiz. & vert. alignments Bulma: a modern CSS framework based on Flexbox : <a href="https://t.co/iF8LQye3TD">https://t.co/iF8LQye3TD</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Brentley Broughton (@babroughton) <a href="https://twitter.com/babroughton/status/879725003306147840">June 27, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Been spending an inordinate amount of time playing w/ various css frameworks for my <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a> site. Settled on <a href="https://t.co/KoRlyeoaI1">https://t.co/KoRlyeoaI1</a></p>— Julian Currie (@julian_currie) <a href="https://twitter.com/julian_currie/status/879294487301718016">June 26, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Been spending an inordinate amount of time playing w/ various css frameworks for my <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a> site. Settled on <a href="https://t.co/KoRlyeoaI1">https://t.co/KoRlyeoaI1</a></p>— Julian Currie (@julian_currie) <a href="https://twitter.com/julian_currie/status/879294487301718016">June 26, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I just discovered <a href="https://t.co/5xcp1Bwfpz">https://t.co/5xcp1Bwfpz</a> by <a href="https://twitter.com/jgthms">@jgthms</a> - looks great. I'm gonna take it out for a test drive <a href="https://t.co/E5bbXjCD5H">pic.twitter.com/E5bbXjCD5H</a></p>— Jeff Kelley (@JeffKelleyBV) <a href="https://twitter.com/JeffKelleyBV/status/878220062007504897">June 23, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I just discovered <a href="https://t.co/5xcp1Bwfpz">https://t.co/5xcp1Bwfpz</a> by <a href="https://twitter.com/jgthms">@jgthms</a> - looks great. I'm gonna take it out for a test drive <a href="https://t.co/E5bbXjCD5H">pic.twitter.com/E5bbXjCD5H</a></p>— Jeff Kelley (@JeffKelleyBV) <a href="https://twitter.com/JeffKelleyBV/status/878220062007504897">June 23, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Best framework on the web right now. Well done, please keep it up. World needs it!</p>— Anders (@anders0x) <a href="https://twitter.com/anders0x/status/877764422466322432">June 22, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Best framework on the web right now. Well done, please keep it up. World needs it!</p>— Anders (@anders0x) <a href="https://twitter.com/anders0x/status/877764422466322432">June 22, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Best Flexbox CSS Framework:<br>Bulma <a href="https://t.co/3BtGymZWMB">https://t.co/3BtGymZWMB</a><br><br>Thank you <a href="https://twitter.com/jgthms">@jgthms</a>, thank you.</p>— Seth Davis (@Setholito) <a href="https://twitter.com/Setholito/status/877691760226562048">June 22, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Best Flexbox CSS Framework:<br>Bulma <a href="https://t.co/3BtGymZWMB">https://t.co/3BtGymZWMB</a><br><br>Thank you <a href="https://twitter.com/jgthms">@jgthms</a>, thank you.</p>— Seth Davis (@Setholito) <a href="https://twitter.com/Setholito/status/877691760226562048">June 22, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Really Appreciate <a href="https://twitter.com/jgthms">@jgthms</a>. <br>As I beginner, because of bulma.io, I could write the code and I get self‐confidence! <a href="https://twitter.com/hashtag/bulma?src=hash">#bulma</a> <a href="https://twitter.com/hashtag/css?src=hash">#css</a> <a href="https://twitter.com/hashtag/framework?src=hash">#framework</a></p>— b_y (@by_snm) <a href="https://twitter.com/by_snm/status/877010184463294465">June 20, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Really Appreciate <a href="https://twitter.com/jgthms">@jgthms</a>. <br>As I beginner, because of bulma.io, I could write the code and I get self‐confidence! <a href="https://twitter.com/hashtag/bulma?src=hash">#bulma</a> <a href="https://twitter.com/hashtag/css?src=hash">#css</a> <a href="https://twitter.com/hashtag/framework?src=hash">#framework</a></p>— b_y (@by_snm) <a href="https://twitter.com/by_snm/status/877010184463294465">June 20, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Bulma might be Bootstrap killer. I'm really liking it.</p>— Umar Farooq Khawaja (@UmarFKhawaja) <a href="https://twitter.com/UmarFKhawaja/status/875511410008219649">June 16, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Bulma might be Bootstrap killer. I'm really liking it.</p>— Umar Farooq Khawaja (@UmarFKhawaja) <a href="https://twitter.com/UmarFKhawaja/status/875511410008219649">June 16, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>— mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>— mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Bulma framework just made my weekend better :) <a href="https://twitter.com/jgthms">@jgthms</a></p>— Victor Heid K.Miko (@victorheid) <a href="https://twitter.com/victorheid/status/874200312378269696">June 12, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Bulma framework just made my weekend better :) <a href="https://twitter.com/jgthms">@jgthms</a></p>— Victor Heid K.Miko (@victorheid) <a href="https://twitter.com/victorheid/status/874200312378269696">June 12, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Redesigning a website with 500K+ visitors/yr, going to give a Bulma a try <a href="https://twitter.com/jgthms">@jgthms</a> <a href="https://t.co/IcuGfvTQrI">https://t.co/IcuGfvTQrI</a></p>— Anand Chowdhary (@AnandChowdhary) <a href="https://twitter.com/AnandChowdhary/status/871410394622865408">June 4, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Redesigning a website with 500K+ visitors/yr, going to give a Bulma a try <a href="https://twitter.com/jgthms">@jgthms</a> <a href="https://t.co/IcuGfvTQrI">https://t.co/IcuGfvTQrI</a></p>— Anand Chowdhary (@AnandChowdhary) <a href="https://twitter.com/AnandChowdhary/status/871410394622865408">June 4, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Having a lot of fun building a website with <a href="https://twitter.com/GoHugoIO">@GoHugoIO</a> and <a href="https://twitter.com/jgthms">@jgthms</a> 's bulma!</p>— Martin Angers (@___mna___) <a href="https://twitter.com/___mna___/status/871163877622460417">June 4, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Having a lot of fun building a website with <a href="https://twitter.com/GoHugoIO">@GoHugoIO</a> and <a href="https://twitter.com/jgthms">@jgthms</a> 's bulma!</p>— Martin Angers (@___mna___) <a href="https://twitter.com/___mna___/status/871163877622460417">June 4, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I'm in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I'm in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Just found <a href="https://twitter.com/jgthms">@jgthms</a>'s <a href="https://t.co/sa8Hy25rDH">https://t.co/sa8Hy25rDH</a>, an amazing css framework. Officially switching all new front-end work to this, this is amazing</p>— Alexander H. Black (@alexanderhblack) <a href="https://twitter.com/alexanderhblack/status/868730725926711296">May 28, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Just found <a href="https://twitter.com/jgthms">@jgthms</a>'s <a href="https://t.co/sa8Hy25rDH">https://t.co/sa8Hy25rDH</a>, an amazing css framework. Officially switching all new front-end work to this, this is amazing</p>— Alexander H. Black (@alexanderhblack) <a href="https://twitter.com/alexanderhblack/status/868730725926711296">May 28, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The more I use <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a> from the <a href="https://twitter.com/jgthms">@jgthms</a> combined with <a href="https://twitter.com/vuejs">@vuejs</a> it's truly a joy to code <a href="https://twitter.com/hashtag/webdev?src=hash">#webdev</a></p>— Kieran Glover (@kierglover) <a href="https://twitter.com/kierglover/status/864788587493154816">May 17, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The more I use <a href="https://twitter.com/hashtag/bulmacss?src=hash">#bulmacss</a> from the <a href="https://twitter.com/jgthms">@jgthms</a> combined with <a href="https://twitter.com/vuejs">@vuejs</a> it's truly a joy to code <a href="https://twitter.com/hashtag/webdev?src=hash">#webdev</a></p>— Kieran Glover (@kierglover) <a href="https://twitter.com/kierglover/status/864788587493154816">May 17, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Simple, beautiful and most importantly, very light. Bulma: a modern CSS framework based on Flexbox <a href="https://t.co/uv6JF2dDGJ">https://t.co/uv6JF2dDGJ</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Anas Red (@AnasAhmar) <a href="https://twitter.com/AnasAhmar/status/862586112770023425">May 11, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Simple, beautiful and most importantly, very light. Bulma: a modern CSS framework based on Flexbox <a href="https://t.co/uv6JF2dDGJ">https://t.co/uv6JF2dDGJ</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Anas Red (@AnasAhmar) <a href="https://twitter.com/AnasAhmar/status/862586112770023425">May 11, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/vY1ZsRScYM">https://t.co/vY1ZsRScYM</a> -- a CSS framework by <a href="https://twitter.com/jgthms">@jgthms</a> -- is lovely! No JS included, which means no JS opinions included!</p>— Robert Stuttaford (@RobStuttaford) <a href="https://twitter.com/RobStuttaford/status/860885116909998080">May 6, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/vY1ZsRScYM">https://t.co/vY1ZsRScYM</a> -- a CSS framework by <a href="https://twitter.com/jgthms">@jgthms</a> -- is lovely! No JS included, which means no JS opinions included!</p>— Robert Stuttaford (@RobStuttaford) <a href="https://twitter.com/RobStuttaford/status/860885116909998080">May 6, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Loving Bulma! This is making my day right now. Imported it into the starter theme I'm using.</p>— Scott Stewart (@CarlisleStewart) <a href="https://twitter.com/CarlisleStewart/status/857590406724243456">April 27, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Loving Bulma! This is making my day right now. Imported it into the starter theme I'm using.</p>— Scott Stewart (@CarlisleStewart) <a href="https://twitter.com/CarlisleStewart/status/857590406724243456">April 27, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">.<a href="https://twitter.com/jgthms">@jgthms</a> I've just discovered your suite of tools for web development: bulma.io & cssreference.io among others. Fabulous work - thanks!</p>— Victor Verhaegen (@vicver82) <a href="https://twitter.com/vicver82/status/839423865205977088">March 8, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">.<a href="https://twitter.com/jgthms">@jgthms</a> I've just discovered your suite of tools for web development: bulma.io & cssreference.io among others. Fabulous work - thanks!</p>— Victor Verhaegen (@vicver82) <a href="https://twitter.com/vicver82/status/839423865205977088">March 8, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href="https://twitter.com/jgthms">@jgthms</a>.</p>— scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href="https://twitter.com/jgthms">@jgthms</a>.</p>— scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>— Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>— Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Reply to <a href="https://twitter.com/jgthms">@jgthms</a> Your framework is very good and lightweight compared to Twitter Bootstrap. I really like it.</p>— Ranie Santos (@raniesantos32) <a href="https://twitter.com/raniesantos32/status/834030605847326726">February 21, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Reply to <a href="https://twitter.com/jgthms">@jgthms</a> Your framework is very good and lightweight compared to Twitter Bootstrap. I really like it.</p>— Ranie Santos (@raniesantos32) <a href="https://twitter.com/raniesantos32/status/834030605847326726">February 21, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Jeremys reference sites are just so friendly. Love them. <a href="https://t.co/FhNs944XH6">https://t.co/FhNs944XH6</a></p>— Ville V. Vanninen (@sakamies) <a href="https://twitter.com/sakamies/status/831866770755579904">February 15, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Jeremys reference sites are just so friendly. Love them. <a href="https://t.co/FhNs944XH6">https://t.co/FhNs944XH6</a></p>— Ville V. Vanninen (@sakamies) <a href="https://twitter.com/sakamies/status/831866770755579904">February 15, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Are you the one behind Bulma? I am using it in one project and I am completely delightful. Thank you so much!!</p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/824053457527209984">January 25, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Are you the one behind Bulma? I am using it in one project and I am completely delightful. Thank you so much!!</p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/824053457527209984">January 25, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>— juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>— juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote></article>
|
||||||
|
|
||||||
<!-- 2016 -->
|
<!-- 2016 -->
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Bulma is badass. Nice work all around!</p>— Shaimoom Newaz (@shaimoomn) <a href="https://twitter.com/shaimoomn/status/808825432233558016">December 14, 2016</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Bulma is badass. Nice work all around!</p>— Shaimoom Newaz (@shaimoomn) <a href="https://twitter.com/shaimoomn/status/808825432233558016">December 14, 2016</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> love your work on bulma, you rock</p>— Andrew Cantos (@andrewcantos) <a href="https://twitter.com/andrewcantos/status/783630950718504960">October 5, 2016</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> love your work on bulma, you rock</p>— Andrew Cantos (@andrewcantos) <a href="https://twitter.com/andrewcantos/status/783630950718504960">October 5, 2016</a></blockquote></article>
|
||||||
|
|
||||||
<article class="hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for updating my favourite css framework <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a></p>— Juampe Ruiz (@juampe84) <a href="https://twitter.com/juampe84/status/779966186121560064">September 25, 2016</a></blockquote></article>
|
<article class="bd-hug"><blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Thanks <a href="https://twitter.com/jgthms">@jgthms</a> for updating my favourite css framework <a href="https://twitter.com/hashtag/bulmaio?src=hash">#bulmaio</a></p>— Juampe Ruiz (@juampe84) <a href="https://twitter.com/juampe84/status/779966186121560064">September 25, 2016</a></blockquote></article>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user