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">
|
||||
Stay updated about new features, bug fixes, and releases
|
||||
</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">
|
||||
<i class="fa fa-rss"></i>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<a class="tw-button button"
|
||||
<a class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="{{ site.url }}"
|
||||
@ -10,4 +10,4 @@
|
||||
<span>
|
||||
{{ include.label }}
|
||||
</span>
|
||||
</a>
|
||||
</a>
|
||||
|
||||
@ -439,7 +439,7 @@
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Form
|
||||
</a>
|
||||
@ -452,7 +452,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Box
|
||||
</a>
|
||||
@ -465,7 +465,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Button
|
||||
</a>
|
||||
@ -478,7 +478,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Notification
|
||||
</a>
|
||||
@ -491,7 +491,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Progress bar
|
||||
</a>
|
||||
@ -504,7 +504,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Tags
|
||||
</a>
|
||||
@ -528,7 +528,7 @@
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Card
|
||||
</a>
|
||||
@ -541,7 +541,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Dropdown
|
||||
</a>
|
||||
@ -554,7 +554,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Message
|
||||
</a>
|
||||
@ -567,7 +567,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Pagination
|
||||
</a>
|
||||
@ -580,7 +580,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Tabs
|
||||
</a>
|
||||
@ -593,7 +593,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Media object
|
||||
</a>
|
||||
@ -606,7 +606,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<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/">
|
||||
Menu
|
||||
</a>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<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 }}
|
||||
<a class="anchor-link" href="#{{ include.name | slugify }}">
|
||||
<a class="bd-anchor-link" href="#{{ include.name | slugify }}">
|
||||
#
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
</p>
|
||||
{{#unless site.deprecated}}
|
||||
<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>
|
||||
{{/unless}}
|
||||
</div>
|
||||
@ -101,7 +101,7 @@
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<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">
|
||||
<i class="fa fa-rss"></i>
|
||||
</span>
|
||||
@ -142,11 +142,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
</a>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<article class="media pro is-{{ include.type }}">
|
||||
<article class="media bd-pro is-{{ include.type }}">
|
||||
<aside class="media-left">
|
||||
<span class="icon">
|
||||
<i class="fa fa-{{ include.icon }}"></i>
|
||||
@ -8,8 +8,8 @@
|
||||
<p class="title is-5 pro-title">
|
||||
{{ include.title }}
|
||||
</p>
|
||||
<div class="pro-content">
|
||||
<div class="bd-pro-content">
|
||||
{{ include.content | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<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>
|
||||
</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>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-loves">
|
||||
<p class="more-loves-container">
|
||||
<a class="button is-medium is-danger rainbow" href="{{ site.url }}/love/">
|
||||
<div class="bd-more-loves">
|
||||
<p class="bd-more-loves-container">
|
||||
<a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
|
||||
<span>See more <strong>love</strong> 🤗</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
{% assign twUrl = "https://twitter.com/" | append: include.username | append: "/status/" | append: include.id %}
|
||||
|
||||
<article class="tw">
|
||||
<header class="tw-header">
|
||||
<a class="tw-author" href="{{ twUrl }}" target="_blank">
|
||||
<figure class="tw-avatar">
|
||||
<article class="bd-tw">
|
||||
<header class="bd-tw-header">
|
||||
<a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
|
||||
<figure class="bd-tw-avatar">
|
||||
<img src="{{ include.avatar }}">
|
||||
</figure>
|
||||
<div class="tw-name">
|
||||
<strong class="tw-fullname">
|
||||
<div class="bd-tw-name">
|
||||
<strong class="bd-tw-fullname">
|
||||
{{ include.fullname }}
|
||||
</strong>
|
||||
<span class="tw-username">
|
||||
<span class="bd-tw-username">
|
||||
@{{ include.username }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="tw-content">
|
||||
<div class="bd-tw-content">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
|
||||
<p class="tw-date">
|
||||
<p class="bd-tw-date">
|
||||
<a href="{{ twUrl }}" target="_blank">
|
||||
{{ include.date }}
|
||||
</a>
|
||||
|
||||
@ -75,9 +75,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-loves">
|
||||
<p class="more-loves-container">
|
||||
<a class="button is-medium is-danger rainbow" href="{{ site.url }}/love/">
|
||||
<div class="bd-more-loves">
|
||||
<p class="bd-more-loves-container">
|
||||
<a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
|
||||
<span>See more <strong>love</strong> 🤗</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -9,24 +9,24 @@ route: blog
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="article-image is-single is-{{ page.color }}">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<div class="bd-article-image is-single is-{{ page.color }}">
|
||||
<span class="bd-article-overlay"></span>
|
||||
<span class="bd-article-icon">
|
||||
<i class="fa fa-{{ page.icon }}"></i>
|
||||
</span>
|
||||
<strong class="article-info">
|
||||
<strong class="bd-article-info">
|
||||
<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 }}
|
||||
</time>
|
||||
<strong class="article-title">
|
||||
<strong class="bd-article-title">
|
||||
{{ page.name }}
|
||||
</strong>
|
||||
</span>
|
||||
</strong>
|
||||
</div>
|
||||
<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>
|
||||
<h1 class="title is-2">
|
||||
{{ page.title }}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
$bootstrap: #6f5499
|
||||
$bootstrap-invert: #fff
|
||||
|
||||
.bootstrap
|
||||
.bd-bootstrap
|
||||
.hero
|
||||
background-color: $bootstrap
|
||||
color: $bootstrap-invert
|
||||
@ -16,49 +16,49 @@ $bootstrap-invert: #fff
|
||||
&:hover
|
||||
color: $bootstrap-invert
|
||||
|
||||
.pros-heading
|
||||
.bd-pros-heading
|
||||
padding: 0 2rem
|
||||
text-align: center
|
||||
|
||||
.pros-icon
|
||||
.bd-pros-icon
|
||||
margin-bottom: 3rem
|
||||
text-align: center
|
||||
svg
|
||||
height: 3rem
|
||||
width: auto
|
||||
|
||||
.pros-list
|
||||
.bd-pros-list
|
||||
margin: 0 auto
|
||||
max-width: 540px
|
||||
|
||||
.pro
|
||||
.bd-pro
|
||||
.icon
|
||||
position: relative
|
||||
top: -1px
|
||||
.title
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.pro + .pro
|
||||
.bd-pro + .pro
|
||||
margin-top: 2rem
|
||||
padding-top: 2rem
|
||||
|
||||
.pro-content
|
||||
.bd-pro-content
|
||||
p:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.pro.is-bulma
|
||||
.bd-pro.is-bulma
|
||||
.icon
|
||||
color: $primary
|
||||
|
||||
.pro.is-bootstrap
|
||||
.bd-pro.is-bootstrap
|
||||
.icon
|
||||
color: $bootstrap
|
||||
|
||||
.separator
|
||||
.bd-separator
|
||||
color: $border
|
||||
margin: 0 0.25em
|
||||
|
||||
.comparison
|
||||
.bd-comparison
|
||||
margin: 0 auto
|
||||
max-width: 42rem
|
||||
.table
|
||||
@ -93,5 +93,5 @@ $bootstrap-invert: #fff
|
||||
color: $text-strong
|
||||
font-weight: $weight-bold
|
||||
|
||||
.comparison-header
|
||||
margin-bottom: 3rem
|
||||
.bd-comparison-header
|
||||
margin-bottom: 3rem
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.callout
|
||||
.bd-callout
|
||||
+block
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.example,
|
||||
.structure
|
||||
.bd-example,
|
||||
.bd-structure
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
@ -29,7 +29,7 @@
|
||||
border-right: none
|
||||
padding: 0
|
||||
|
||||
.example
|
||||
.bd-example
|
||||
& + .highlight
|
||||
border: 1px solid $warning
|
||||
border-radius: 0 0 $radius $radius
|
||||
@ -53,7 +53,7 @@
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
|
||||
.structure
|
||||
.bd-structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 1.5rem
|
||||
@ -62,7 +62,7 @@ $structure-invert: $danger-invert
|
||||
color: $structure-invert
|
||||
content: "Structure"
|
||||
|
||||
.structure-item
|
||||
.bd-structure-item
|
||||
position: relative
|
||||
&:before
|
||||
+overlay
|
||||
@ -82,7 +82,7 @@ $structure-invert: $danger-invert
|
||||
justify-content: center
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.is-structure-container
|
||||
&.bd-is-structure-container
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&:after
|
||||
align-items: flex-start
|
||||
@ -114,7 +114,7 @@ $structure-invert: $danger-invert
|
||||
white-space: pre-wrap
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
@ -123,7 +123,7 @@ $structure-invert: $danger-invert
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
.example
|
||||
.bd-example
|
||||
border-left: none
|
||||
border-radius: 0
|
||||
border-right: none
|
||||
|
||||
@ -1,49 +1,49 @@
|
||||
.expo
|
||||
.bd-expo
|
||||
background-color: $background
|
||||
background-color: $white
|
||||
padding: 1.5rem
|
||||
|
||||
.website
|
||||
.bd-website
|
||||
display: block
|
||||
position: relative
|
||||
text-align: center
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.website-image
|
||||
.bd-website-image
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-bottom: 1.5rem
|
||||
position: relative
|
||||
&:hover
|
||||
.website-overlay
|
||||
.bd-website-overlay
|
||||
opacity: 0.25
|
||||
|
||||
.website-overlay
|
||||
.bd-website-overlay
|
||||
background-color: $black
|
||||
opacity: 0
|
||||
transition: opacity 200ms $easing
|
||||
|
||||
+mobile
|
||||
.website:not(:last-child)
|
||||
.bd-website:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.expo
|
||||
.bd-expo
|
||||
padding-bottom: 3rem
|
||||
padding-top: 3rem
|
||||
.websites
|
||||
.bd-websites
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
.website
|
||||
.bd-website
|
||||
margin-top: 3rem
|
||||
width: calc(50% - 3rem)
|
||||
&:nth-child(1),
|
||||
&:nth-child(2)
|
||||
margin-top: 0
|
||||
&.is-highlighted
|
||||
&.bd-is-highlighted
|
||||
width: 100%
|
||||
.website-image
|
||||
.bd-website-image
|
||||
margin-bottom: 3rem
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
border-color: $github
|
||||
color: $white
|
||||
|
||||
.tw-button
|
||||
.bd-tw-button
|
||||
background-color: $twitter
|
||||
color: $white
|
||||
border-color: transparent !important
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
.testimonials
|
||||
.bd-testimonials
|
||||
background-color: $background
|
||||
|
||||
.testimonial
|
||||
.bd-testimonial
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
.testimonial-tweet
|
||||
.bd-testimonial-tweet
|
||||
background-color: $white
|
||||
|
||||
.more-loves
|
||||
.bd-more-loves
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
@ -26,35 +26,35 @@
|
||||
transform: scale(1.04)
|
||||
|
||||
+mobile
|
||||
.testimonials
|
||||
.bd-testimonials
|
||||
padding: 1.5rem
|
||||
.testimonial
|
||||
.bd-testimonial
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.testimonials
|
||||
.bd-testimonials
|
||||
padding: 3rem
|
||||
.testimonial + .testimonial
|
||||
.bd-testimonial + .bd-testimonial
|
||||
margin-top: 1.5rem
|
||||
|
||||
+desktop
|
||||
.testimonials
|
||||
.bd-testimonials
|
||||
min-height: 595px
|
||||
|
||||
+widescreen
|
||||
.testimonials
|
||||
.bd-testimonials
|
||||
min-height: 653px
|
||||
|
||||
+fullhd
|
||||
.testimonials
|
||||
.bd-testimonials
|
||||
min-height: 632px
|
||||
|
||||
.rainbow
|
||||
.bd-rainbow
|
||||
animation: rainbow 8s ease infinite
|
||||
background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
|
||||
background-size: 800% 800%
|
||||
|
||||
.hero.is-love
|
||||
.hero.bd-is-love
|
||||
.title,
|
||||
.subtitle
|
||||
color: $white
|
||||
@ -67,35 +67,35 @@
|
||||
100%
|
||||
background-position: 0% 80%
|
||||
|
||||
.hug
|
||||
.bd-hug
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
.embrace
|
||||
.bd-embrace
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
padding: 1.5rem
|
||||
|
||||
+mobile
|
||||
.love
|
||||
.bd-love
|
||||
padding: 1.5rem
|
||||
.hug
|
||||
.bd-hug
|
||||
margin: 1.5rem
|
||||
.embrace
|
||||
.bd-embrace
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 1.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
.embrace-button
|
||||
.bd-embrace-button
|
||||
margin-top: 0.75rem
|
||||
|
||||
+tablet
|
||||
.love
|
||||
.bd-love
|
||||
padding-bottom: 3rem
|
||||
padding-top: 3rem
|
||||
.embrace
|
||||
.bd-embrace
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
@ -103,13 +103,13 @@
|
||||
margin-top: 3rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 3rem
|
||||
.embrace-button
|
||||
.bd-embrace-button
|
||||
margin-left: 1.5rem
|
||||
.hugs
|
||||
.bd-hugs
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
padding-bottom: 3rem
|
||||
.hug
|
||||
.bd-hug
|
||||
margin-top: 1.5rem
|
||||
width: calc(33.3333% - 1rem)
|
||||
&:nth-child(1),
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
td:nth-child(2)
|
||||
width: 320px
|
||||
|
||||
.color
|
||||
.bd-color
|
||||
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)
|
||||
display: inline-block
|
||||
@ -12,7 +12,7 @@
|
||||
margin-right: 8px
|
||||
width: 24px
|
||||
|
||||
.button.is-rss
|
||||
.button.bd-is-rss
|
||||
background-color: #f26522
|
||||
border-color: transparent
|
||||
color: #fff
|
||||
@ -21,12 +21,12 @@
|
||||
&:active
|
||||
background-color: darken(#f26522, 10%)
|
||||
|
||||
.view-all-versions
|
||||
.bd-view-all-versions
|
||||
color: $text-light
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.feature-title
|
||||
.bd-feature-title
|
||||
color: $text-light
|
||||
a
|
||||
border-bottom: 1px solid transparent
|
||||
@ -34,20 +34,20 @@
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
|
||||
.anchor-title
|
||||
.bd-anchor-title
|
||||
padding-top: 1.5rem
|
||||
position: relative
|
||||
+until($widescreen)
|
||||
padding-left: 2rem
|
||||
|
||||
.anchor-link
|
||||
.bd-anchor-link
|
||||
position: absolute
|
||||
right: calc(100% + 1rem)
|
||||
+until($widescreen)
|
||||
left: 0
|
||||
right: auto
|
||||
|
||||
.article-image
|
||||
.bd-article-image
|
||||
background-color: $primary
|
||||
display: block
|
||||
height: 240px
|
||||
@ -64,19 +64,19 @@
|
||||
&.is-orange
|
||||
background-color: $orange
|
||||
&:hover
|
||||
.article-overlay
|
||||
.bd-article-overlay
|
||||
opacity: 0.25
|
||||
.article-icon
|
||||
.bd-article-icon
|
||||
transform: scale(1.4)
|
||||
.article-date
|
||||
.bd-article-date
|
||||
transform: scale(0.9)
|
||||
.article-title
|
||||
.bd-article-title
|
||||
transform: scale(1.1)
|
||||
&.is-single
|
||||
margin-bottom: 2rem
|
||||
width: 100%
|
||||
|
||||
.article-overlay
|
||||
.bd-article-overlay
|
||||
+overlay
|
||||
background-color: $black
|
||||
opacity: 0
|
||||
@ -84,21 +84,21 @@
|
||||
transition-property: opacity
|
||||
transition-timing-function: $easing
|
||||
|
||||
.article-icon,
|
||||
.article-info
|
||||
.bd-article-icon,
|
||||
.bd-article-info
|
||||
+overlay
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
.article-icon,
|
||||
.article-date,
|
||||
.article-title
|
||||
.bd-article-icon,
|
||||
.bd-article-date,
|
||||
.bd-article-title
|
||||
transition-duration: $speed
|
||||
transition-property: transform
|
||||
transition-timing-function: $easing
|
||||
|
||||
.article-icon
|
||||
.bd-article-icon
|
||||
color: $black
|
||||
opacity: 0.25
|
||||
& > span
|
||||
@ -106,14 +106,14 @@
|
||||
.fa
|
||||
font-size: 56px
|
||||
|
||||
.article-info
|
||||
.bd-article-info
|
||||
padding: 20px
|
||||
|
||||
.article-date
|
||||
.bd-article-date
|
||||
color: rgba(#000, 0.5)
|
||||
display: block
|
||||
|
||||
.article-title
|
||||
.bd-article-title
|
||||
color: $white
|
||||
display: block
|
||||
font-size: 2.5rem
|
||||
@ -121,6 +121,6 @@
|
||||
line-height: 1.25
|
||||
padding: 0 20px
|
||||
|
||||
.emoji
|
||||
.bd-emoji
|
||||
margin-right: 0.5em
|
||||
margin-top: 2px
|
||||
margin-top: 2px
|
||||
|
||||
@ -2,14 +2,14 @@ $tw-black: #1c2022
|
||||
$tw-blue: #2b7bb9
|
||||
$tw-grey: #697882
|
||||
|
||||
.tws
|
||||
.bd-tws
|
||||
background-color: $background
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
overflow: auto
|
||||
padding: 20px
|
||||
|
||||
.tw
|
||||
.bd-tw
|
||||
background-color: #fff
|
||||
border: 1px solid #e1e8ed
|
||||
border-radius: 5px
|
||||
@ -19,12 +19,12 @@ $tw-grey: #697882
|
||||
font-size: 16px
|
||||
padding: 20px
|
||||
|
||||
.tw-header
|
||||
.bd-tw-header
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
|
||||
.tw-author
|
||||
.bd-tw-author
|
||||
align-items: center
|
||||
color: $tw-black
|
||||
display: flex
|
||||
@ -32,7 +32,7 @@ $tw-grey: #697882
|
||||
&:hover
|
||||
color: $tw-blue
|
||||
|
||||
.tw-avatar
|
||||
.bd-tw-avatar
|
||||
flex-shrink: 0
|
||||
height: 36px
|
||||
margin-right: 9px
|
||||
@ -43,18 +43,18 @@ $tw-grey: #697882
|
||||
height: 36px
|
||||
width: 36px
|
||||
|
||||
.tw-fullname
|
||||
.bd-tw-fullname
|
||||
color: currentColor
|
||||
display: block
|
||||
font-size: 16px
|
||||
font-weight: 700
|
||||
|
||||
.tw-username
|
||||
.bd-tw-username
|
||||
color: $tw-grey
|
||||
display: block
|
||||
font-size: 14px
|
||||
|
||||
.tw-content
|
||||
.bd-tw-content
|
||||
color: $tw-black
|
||||
font-size: 16px
|
||||
line-height: 1.4
|
||||
@ -67,7 +67,7 @@ $tw-grey: #697882
|
||||
vertical-align: -.2em
|
||||
width: 1.25em
|
||||
|
||||
.tw-date
|
||||
.bd-tw-date
|
||||
font-size: 14px
|
||||
line-height: 1.4
|
||||
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)
|
||||
|
||||
+mobile
|
||||
.tws
|
||||
.bd-tws
|
||||
padding: 1.5rem
|
||||
.tw
|
||||
.bd-tw
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
+tablet
|
||||
.tws
|
||||
.bd-tws
|
||||
padding: 3rem
|
||||
.tw + .tw
|
||||
.bd-tw + .bd-tw
|
||||
margin-top: 1.5rem
|
||||
|
||||
+desktop
|
||||
.tws
|
||||
.bd-tws
|
||||
min-height: 595px
|
||||
|
||||
+widescreen
|
||||
.tws
|
||||
.bd-tws
|
||||
min-height: 653px
|
||||
|
||||
+fullhd
|
||||
.tws
|
||||
.bd-tws
|
||||
min-height: 632px
|
||||
|
||||
.twitter-tweet:not(.twitter-tweet-rendered)
|
||||
|
||||
@ -89,7 +89,7 @@ bootstrap:
|
||||
{% include navbar.html id="Documentation" %}
|
||||
</div>
|
||||
|
||||
<main class="bootstrap">
|
||||
<main class="bd-bootstrap">
|
||||
<section class="hero is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -127,10 +127,10 @@ bootstrap:
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bulma</strong>
|
||||
</h3>
|
||||
<figure class="pros-icon">
|
||||
<figure class="bd-pros-icon">
|
||||
{% include svg/bulma-b.svg %}
|
||||
</figure>
|
||||
<div class="pros-list">
|
||||
<div class="bd-pros-list">
|
||||
{% for pro in page.bulma %}
|
||||
{%
|
||||
include pro.html
|
||||
@ -147,10 +147,10 @@ bootstrap:
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bootstrap</strong>
|
||||
</h3>
|
||||
<figure class="pros-icon">
|
||||
<figure class="bd-pros-icon">
|
||||
{% include svg/bootstrap-icon.svg %}
|
||||
</figure>
|
||||
<div class="pros-list">
|
||||
<div class="bd-pros-list">
|
||||
{% for pro in page.bootstrap %}
|
||||
{%
|
||||
include pro.html
|
||||
@ -171,8 +171,8 @@ bootstrap:
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="comparison">
|
||||
<header class="comparison-header has-text-centered">
|
||||
<div class="bd-comparison">
|
||||
<header class="bd-comparison-header has-text-centered">
|
||||
<h2 class="title">
|
||||
Comparison table
|
||||
</h2>
|
||||
|
||||
@ -10,17 +10,17 @@ route: blog
|
||||
<div class="columns is-multiline">
|
||||
{% for post in site.posts %}
|
||||
<article class="column is-4">
|
||||
<a class="article-image is-{{ post.color }}" href="{{ post.url }}">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
|
||||
<span class="bd-article-overlay"></span>
|
||||
<span class="bd-article-icon">
|
||||
<i class="fa fa-{{ post.icon }}"></i>
|
||||
</span>
|
||||
<strong class="article-info">
|
||||
<strong class="bd-article-info">
|
||||
<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 }}
|
||||
</time>
|
||||
<strong class="article-title">
|
||||
<strong class="bd-article-title">
|
||||
{{ post.name }}
|
||||
</strong>
|
||||
</span>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -160,7 +160,7 @@ variables:
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_example}}
|
||||
</div>
|
||||
|
||||
@ -174,14 +174,14 @@ variables:
|
||||
</div>
|
||||
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_centered_example}}
|
||||
</div>
|
||||
|
||||
|
||||
{% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_right_example}}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_icons_example}}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_arrow_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_bullet_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_dot_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_succeeds_example}}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_small_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_medium_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{breadcrumb_large_example}}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="structure">
|
||||
<nav class="level structure-item is-structure-container" title="level">
|
||||
<div class="level-left structure-item" title="level-left">
|
||||
<div class="bd-structure">
|
||||
<nav class="level bd-structure-item bd-is-structure-container" title="level">
|
||||
<div class="level-left bd-structure-item" title="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
@ -59,7 +59,7 @@ doc-subtab: level
|
||||
</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">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
@ -115,7 +115,7 @@ doc-subtab: level
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{nav_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -175,13 +175,13 @@ doc-subtab: level
|
||||
</p>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{nav_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
{{nav_centered_example}}
|
||||
{% endhighlight %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{nav_centered_bis_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -222,7 +222,7 @@ doc-subtab: level
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{nav_mobile_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="structure">
|
||||
<div class="bd-structure">
|
||||
<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">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</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">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
@ -52,7 +52,7 @@ doc-subtab: media-object
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right structure-item" title="media-right">
|
||||
<div class="media-right bd-structure-item" title="media-right">
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
@ -92,7 +92,7 @@ doc-subtab: media-object
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{media_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -133,7 +133,7 @@ doc-subtab: media-object
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{media_bis_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
@ -231,7 +231,7 @@ doc-subtab: media-object
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{media_nested_example}}
|
||||
</div>
|
||||
{% highlight html %}
|
||||
|
||||
@ -118,7 +118,7 @@ doc-subtab: nav
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{nav_example}}
|
||||
</div>
|
||||
|
||||
@ -176,7 +176,7 @@ doc-subtab: nav
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{nav_tabs_example}}
|
||||
</div>
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ variables:
|
||||
{% include subnav-components.html %}
|
||||
|
||||
{% capture navbar_example %}
|
||||
{% include navbar.html id="Example" %}
|
||||
{% include navbar.html id="bd-example" %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_brand_example %}
|
||||
@ -591,7 +591,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{navbar_example}}
|
||||
</div>
|
||||
|
||||
@ -621,7 +621,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{navbar_brand_items_example}}
|
||||
</div>
|
||||
|
||||
@ -641,7 +641,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="navbar-burger" style="display: flex;">
|
||||
<span></span>
|
||||
<span></span>
|
||||
@ -657,7 +657,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
<div class="navbar-burger is-active" style="display: flex;">
|
||||
<span></span>
|
||||
<span></span>
|
||||
@ -798,7 +798,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{navbar_transparent_example}}
|
||||
</div>
|
||||
|
||||
@ -825,7 +825,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_example }}
|
||||
</div>
|
||||
</div>
|
||||
@ -866,7 +866,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_hover_example }}
|
||||
</div>
|
||||
</div>
|
||||
@ -880,7 +880,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_active_example }}
|
||||
</div>
|
||||
</div>
|
||||
@ -905,7 +905,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_right_example }}
|
||||
</div>
|
||||
</div>
|
||||
@ -935,7 +935,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_default_example }}
|
||||
</div>
|
||||
</div>
|
||||
@ -967,7 +967,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_boxed_example }}
|
||||
</div>
|
||||
</div>
|
||||
@ -983,7 +983,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example is-paddingless">
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_dropdown_item_active_example }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -209,7 +209,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_example}}
|
||||
</div>
|
||||
|
||||
@ -221,7 +221,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_options_example}}
|
||||
</div>
|
||||
|
||||
@ -233,13 +233,13 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_centered_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_right_example}}
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_small_example}}
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_medium_example}}
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{pagination_large_example}}
|
||||
</div>
|
||||
|
||||
|
||||
@ -382,7 +382,7 @@ variables:
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_example}}{% endhighlight %}
|
||||
@ -396,12 +396,12 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_right_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_icons_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_small_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_small_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_medium_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_large_example}}
|
||||
</div>
|
||||
{% 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.
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_boxed_example}}
|
||||
</div>
|
||||
{% 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.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_toggle_example}}
|
||||
</div>
|
||||
{% 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>.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_fullwidth_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_centered_boxed_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_toggle_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_centered_boxed_medium_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{tabs_toggle_fullwidth_large_example}}
|
||||
</div>
|
||||
{% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
|
||||
|
||||
@ -466,7 +466,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="callout is-primary">
|
||||
<div class="bd-callout is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
@ -479,7 +479,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="callout is-primary">
|
||||
<div class="bd-callout is-primary">
|
||||
{{button_inverted_outlined_example}}
|
||||
</div>
|
||||
</div>
|
||||
@ -620,7 +620,7 @@ variables:
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{button_group_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{button_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_addons_example}}{% endhighlight %}
|
||||
@ -644,7 +644,7 @@ variables:
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{button_group_addons_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{content_example}}
|
||||
</div>
|
||||
|
||||
@ -175,7 +175,7 @@ variables:
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<div class="content is-small">
|
||||
<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>
|
||||
@ -189,7 +189,7 @@ variables:
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<div class="content is-medium">
|
||||
<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>
|
||||
@ -203,7 +203,7 @@ variables:
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<div class="content is-large">
|
||||
<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>
|
||||
|
||||
@ -1096,7 +1096,7 @@ doc-subtab: form
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_static_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||
@ -1120,7 +1120,7 @@ doc-subtab: form
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||
@ -1128,7 +1128,7 @@ doc-subtab: form
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_expanded_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
||||
@ -1136,11 +1136,11 @@ doc-subtab: form
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_center_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_right_example}}
|
||||
</div>
|
||||
{% 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>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{group_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_example}}{% endhighlight %}
|
||||
@ -1178,7 +1178,7 @@ doc-subtab: form
|
||||
</ul>
|
||||
<p>You can of course use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{horizontal_form_example}}
|
||||
</div>
|
||||
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
||||
@ -1205,7 +1205,7 @@ doc-subtab: form
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{field_label_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{icon_example}}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
</figure>
|
||||
|
||||
@ -46,21 +46,21 @@ variables:
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ progress }}
|
||||
</div>
|
||||
{% highlight html %}{{ progress }}{% endhighlight %}
|
||||
|
||||
{% include heading.html name="Colors" %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ progress_colors }}
|
||||
</div>
|
||||
{% highlight html %}{{ progress_colors }}{% endhighlight %}
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ progress_sizes }}
|
||||
</div>
|
||||
{% highlight html %}{{ progress_sizes }}{% endhighlight %}
|
||||
|
||||
@ -393,7 +393,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{table_example}}
|
||||
</div>
|
||||
|
||||
|
||||
@ -364,7 +364,7 @@ variables:
|
||||
You can now create a <strong>list of tags</strong> with the <code>.tags</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ tags }}
|
||||
</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>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ tags_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
@ -396,7 +396,7 @@ variables:
|
||||
You can <strong>attach tags together</strong> with the <code>.has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ tags_addons }}
|
||||
</div>
|
||||
</div>
|
||||
@ -412,7 +412,7 @@ variables:
|
||||
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ tags_delete_addons }}
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ tags_field_addons }}
|
||||
</div>
|
||||
</div>
|
||||
@ -444,7 +444,7 @@ variables:
|
||||
This can be useful for a long list of <strong>blog tags</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ tags_blog_addons }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -593,7 +593,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file }}
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_name }}
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_name_right }}
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_name_fullwidth }}
|
||||
</div>
|
||||
</div>
|
||||
@ -659,7 +659,7 @@ variables:
|
||||
You can have a <strong>boxed block</strong> with the <code>.is-boxed</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_boxed }}
|
||||
</div>
|
||||
</div>
|
||||
@ -675,7 +675,7 @@ variables:
|
||||
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-boxed</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_boxed_name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -700,7 +700,7 @@ variables:
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_colors }}
|
||||
</div>
|
||||
</div>
|
||||
@ -730,7 +730,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes }}
|
||||
</div>
|
||||
</div>
|
||||
@ -741,7 +741,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes_name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -752,7 +752,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes_boxed }}
|
||||
</div>
|
||||
</div>
|
||||
@ -763,7 +763,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_sizes_boxed_name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -790,7 +790,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_centered }}
|
||||
</div>
|
||||
</div>
|
||||
@ -801,7 +801,7 @@ variables:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{ file_right }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -993,7 +993,7 @@ doc-subtab: general
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_example}}
|
||||
</div>
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_static_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_static_example}}{% endhighlight %}
|
||||
@ -1017,7 +1017,7 @@ doc-subtab: general
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_example}}{% endhighlight %}
|
||||
@ -1025,7 +1025,7 @@ doc-subtab: general
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_expanded_fullwidth_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_expanded_fullwidth_example}}{% endhighlight %}
|
||||
@ -1033,11 +1033,11 @@ doc-subtab: general
|
||||
<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>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_center_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_center_example}}{% endhighlight %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{addons_right_example}}
|
||||
</div>
|
||||
{% highlight html %}{{addons_right_example}}{% endhighlight %}
|
||||
@ -1051,7 +1051,7 @@ doc-subtab: general
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{group_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_example}}{% endhighlight %}
|
||||
@ -1061,12 +1061,12 @@ doc-subtab: general
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{group_centered_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_centered_example}}{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{group_right_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_right_example}}{% endhighlight %}
|
||||
@ -1077,7 +1077,7 @@ doc-subtab: general
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{group_expanded_example}}
|
||||
</div>
|
||||
{% highlight html %}{{group_expanded_example}}{% endhighlight %}
|
||||
@ -1094,7 +1094,7 @@ doc-subtab: general
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{group_multiline_example}}
|
||||
</div>
|
||||
</div>
|
||||
@ -1118,7 +1118,7 @@ doc-subtab: general
|
||||
</ul>
|
||||
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{horizontal_form_example}}
|
||||
</div>
|
||||
{% highlight html %}{{horizontal_form_example}}{% endhighlight %}
|
||||
@ -1142,7 +1142,7 @@ doc-subtab: general
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
{{field_label_example}}
|
||||
</div>
|
||||
{% highlight html %}{{field_label_example}}{% endhighlight %}
|
||||
|
||||
@ -73,7 +73,7 @@ doc-subtab: container
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
@ -88,7 +88,7 @@ doc-subtab: container
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
|
||||
@ -109,13 +109,13 @@ doc-subtab: container
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fullhd_example}}
|
||||
</div>
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ doc-subtab: footer
|
||||
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
|
||||
</h2>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content has-text-centered">
|
||||
|
||||
@ -17,7 +17,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -58,7 +58,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -88,7 +88,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -103,7 +103,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-success">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -118,7 +118,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -133,7 +133,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-danger">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -148,7 +148,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-light">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -163,7 +163,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-dark">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -192,7 +192,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -220,7 +220,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-info is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -234,7 +234,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-success is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -248,7 +248,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-warning is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -262,7 +262,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-danger is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -276,7 +276,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-light is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -290,7 +290,7 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-dark is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -316,7 +316,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -346,7 +346,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -376,7 +376,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth">
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -428,7 +428,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
@ -575,7 +575,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
@ -722,7 +722,7 @@ doc-subtab: hero
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="bd-example is-fullwidth">
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
|
||||
@ -166,10 +166,10 @@ shades:
|
||||
</td>
|
||||
<td>
|
||||
{% 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>
|
||||
{% else %}
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
{% endif %}
|
||||
</td>
|
||||
@ -178,4 +178,4 @@ shades:
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -46,14 +46,14 @@ doc-subtab: functions
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #00d1b2;"></span>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
@ -64,14 +64,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #3273dc;"></span>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
@ -82,14 +82,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #23d160;"></span>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
@ -100,14 +100,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ffdd57;"></span>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
@ -118,14 +118,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ff3860;"></span>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
@ -136,14 +136,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ffb3b3;"></span>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
@ -154,14 +154,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="color" style="background: #ffbc6b;"></span>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
@ -172,14 +172,14 @@ doc-subtab: functions
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
@ -193,7 +193,7 @@ doc-subtab: functions
|
||||
<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>
|
||||
<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>
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
@ -205,7 +205,7 @@ doc-subtab: functions
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</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>
|
||||
</td>
|
||||
<td>
|
||||
@ -222,7 +222,7 @@ doc-subtab: functions
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: #fff;"></span>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
@ -89,7 +89,7 @@ doc-subtab: start
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example highlight-full">
|
||||
<div class="bd-example highlight-full">
|
||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -264,7 +264,7 @@ derived_variables:
|
||||
<code style="white-space: nowrap;">{{ color.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="color" style="background: {{ color.value }};"></span>
|
||||
<span class="bd-color" style="background: {{ color.value }};"></span>
|
||||
<code>{{ color.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -48,12 +48,12 @@ websites:
|
||||
---
|
||||
|
||||
{% capture embrace_expo %}
|
||||
<div class="embrace is-expo">
|
||||
<p class="embrace-text">
|
||||
<div class="bd-embrace is-expo">
|
||||
<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>
|
||||
</p>
|
||||
<p class="embrace-button">
|
||||
<a class="tw-button button"
|
||||
<p class="bd-embrace-button">
|
||||
<a class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="{{ site.url }}"
|
||||
@ -94,16 +94,16 @@ websites:
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="expo">
|
||||
<main class="bd-expo">
|
||||
<div class="container">
|
||||
{{ embrace_expo }}
|
||||
|
||||
<div class="websites">
|
||||
<div class="bd-websites">
|
||||
{% for website in page.websites %}
|
||||
{% assign imageName = website.name | slugify %}
|
||||
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
||||
<article class="website {% if website.highlighted %}is-highlighted{% endif %}">
|
||||
<a class="website-image" href="{{ website.url }}" target="_blank">
|
||||
<article class="bd-website {% if website.highlighted %}bd-is-highlighted{% endif %}">
|
||||
<a class="bd-website-image" href="{{ website.url }}" target="_blank">
|
||||
{% if website.highlighted %}
|
||||
{% assign size1x = "1344x840" %}
|
||||
{% assign size2x = "2688x1680" %}
|
||||
@ -127,12 +127,12 @@ websites:
|
||||
width="672"
|
||||
height="420">
|
||||
{% endif %}
|
||||
<span class="website-overlay is-overlay"></span>
|
||||
<span class="bd-website-overlay is-overlay"></span>
|
||||
</a>
|
||||
<h2 class="title is-5 website-name is-marginless">
|
||||
<h2 class="title is-5 bd-website-name is-marginless">
|
||||
{{ website.name }}
|
||||
</h2>
|
||||
<p class="has-text-grey-light website-date">
|
||||
<p class="has-text-grey-light bd-website-date">
|
||||
{{ website.date }}
|
||||
</p>
|
||||
</article>
|
||||
@ -148,4 +148,4 @@ websites:
|
||||
;(function() {
|
||||
var bLazy = new Blazy();
|
||||
})();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -85,7 +85,7 @@ route: index
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tws">
|
||||
<section class="bd-tws">
|
||||
{% include tws.html %}
|
||||
</section>
|
||||
|
||||
|
||||
104
docs/love.html
104
docs/love.html
@ -8,7 +8,7 @@ route: love
|
||||
{% include navbar.html id="LoveHero" %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-love rainbow">
|
||||
<section class="hero bd-is-love bd-rainbow">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
@ -28,112 +28,112 @@ route: love
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main class="love">
|
||||
<main class="bd-love">
|
||||
<div class="container">
|
||||
|
||||
<div class="embrace">
|
||||
<p class="embrace-text">
|
||||
<div class="bd-embrace">
|
||||
<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>
|
||||
</p>
|
||||
<p class="embrace-button">
|
||||
<p class="bd-embrace-button">
|
||||
{% include elements/tw-button.html label="Tweet #bulmaio" %}
|
||||
</p>
|
||||
</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 -->
|
||||
|
||||
<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>
|
||||
</main>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user