Add bd classes

This commit is contained in:
Jeremy Thomas
2017-08-14 12:44:24 +01:00
parent 88fb510d93
commit cd2f886df2
66 changed files with 1184 additions and 2456 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>&mdash; 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>&mdash; 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&#39;m in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>

View File

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

View File

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