<section class="section">
<div class="container">
- <article class="article {{ page.category | downcase }}{% if page.recommended == true %} recommended{% endif %}">
- <p class="subtitle">
- <a href="{{ site.url }}/blog">Back</a>
- </p>
- <p class="subtitle is-4">
- {{ page.date | date_to_string }}
- </p>
- <h1 class="title is-2">
- {{ page.title }}
- </h1>
- <hr>
- <div class="content is-medium">
- {{ content }}
+ <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">
+ <span class="icon">
+ <i class="fa fa-{{ page.icon }}"></i>
+ </span>
+ </span>
+ <strong class="article-title">
+ {{ page.name }}
+ </strong>
+ </div>
+ <p class="subtitle is-6">
+ <a class="article-back href="{{ site.url }}/blog">Back</a>
+ </p>
+ <p class="subtitle is-4">
+ {{ page.date | date_to_string }}
+ </p>
+ <h1 class="title is-2">
+ {{ page.title }}
+ </h1>
+ </article>
+ <hr>
+ <div class="content is-medium">
+ {{ content }}
+ </div>
</div>
- </article>
+ </div>
</div>
</section>
---
layout: post
title: "Blog launched, new responsive columns, new helpers"
+introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
+color: "danger"
+name: "Launch!"
+icon: "rocket"
---
First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes.
---
layout: post
title: "Metro UI CSS grid with Bulma tiles"
+introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
+color: "info"
+name: "Metro UI"
+icon: "th-large"
---
Have you ever wanted to build a **Metro-UI-like grid in CSS**?
title: "New field element (for better controls)"
published: true
introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
+color: "success"
+name: "Field element"
+icon: "square-o"
---
**TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**
---
layout: post
title: "Access previous Bulma versions"
+introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/)"
+color: "primary"
+name: "Versions"
+icon: "undo"
---
It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/)
+<figure>
+ <a href="/versions/">
+ <img src="/images/blog/bulma-previous-versions.png" alt="Previous versions of Bulma" width="520" height="240">
+ </a>
+</figure>
+
While only version [0.4.4](http://bulma.io/versions/0.4.4) is accessible now, each **new release** will remain available forever.
color: $text-strong
&:hover
border-bottom-color: $primary
+
+.article-image
+ background-color: $primary
+ display: block
+ height: 240px
+ margin-left: auto
+ margin-right: auto
+ width: 320px
+ position: relative
+ text-align: center
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ background-color: $color
+ &:hover
+ .article-overlay
+ opacity: 0.25
+ .article-icon
+ transform: scale(1.1)
+ .article-title
+ transform: scale(0.9)
+ &.is-single
+ margin-bottom: 2rem
+ width: 100%
+ +mobile
+ height: 180px
+ width: 240px
+
+
+.article-overlay
+ +overlay
+ background-color: $black
+ opacity: 0
+ transition-duration: $speed
+ transition-property: opacity
+ transition-timing-function: $easing
+
+.article-icon,
+.article-title
+ +overlay
+ align-items: center
+ display: flex
+ justify-content: center
+ transition-duration: $speed
+ transition-property: transform
+ transition-timing-function: $easing
+
+.article-icon
+ color: $black
+ opacity: 0.25
+ .fa
+ font-size: 56px
+
+.article-title
+ color: $white
+ font-size: 2.5rem
+ font-weight: $weight-bold
+ line-height: 1.25
{% include blog-hero.html %}
-{% for post in site.posts %}
<section class="section">
<div class="container">
- <div class="columns">
- <div class="column is-4">
- <p class="subtitle">
- {{ post.date | date_to_string }}
- </p>
- <h2 class="title">
- <a href="{{ post.url }}">
- {{ post.title }}
- </a>
- </h2>
- </div>
- <div class="column is-8">
- <div class="content">
- {{ post.content }}
+ {% for post in site.posts %}
+ <article class="box article">
+ <div class="columns">
+ <div class="column is-narrow">
+ <a class="article-image is-{{ post.color }}" href="{{ post.url }}">
+ <span class="article-overlay"></span>
+ <span class="article-icon">
+ <span class="icon">
+ <i class="fa fa-{{ post.icon }}"></i>
+ </span>
+ </span>
+ <strong class="article-title">
+ {{ post.name }}
+ </strong>
+ </a>
+ </div>
+ <div class="column">
+ <div class="columns">
+ <div class="column">
+ <p class="subtitle">
+ {{ post.date | date_to_string }}
+ </p>
+ <h2 class="title">
+ <a href="{{ post.url }}">
+ {{ post.title }}
+ </a>
+ </h2>
+ </div>
+ <div class="column">
+ <div class="content is-medium">
+ {{ post.introduction | markdownify }}
+ </div>
+ </div>
+ </div>
+ </div>
</div>
- </div>
- </div>
+ </article>
+ {% endfor %}
</div>
</section>
-{% endfor %}
border-bottom-color: #00d1b2;
}
+.article-image {
+ background-color: #00d1b2;
+ display: block;
+ height: 240px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 320px;
+ position: relative;
+ text-align: center;
+}
+
+.article-image.is-white {
+ background-color: white;
+}
+
+.article-image.is-black {
+ background-color: #0a0a0a;
+}
+
+.article-image.is-light {
+ background-color: whitesmoke;
+}
+
+.article-image.is-dark {
+ background-color: #363636;
+}
+
+.article-image.is-primary {
+ background-color: #00d1b2;
+}
+
+.article-image.is-info {
+ background-color: #3273dc;
+}
+
+.article-image.is-success {
+ background-color: #23d160;
+}
+
+.article-image.is-warning {
+ background-color: #ffdd57;
+}
+
+.article-image.is-danger {
+ background-color: #ff3860;
+}
+
+.article-image:hover .article-overlay {
+ opacity: 0.25;
+}
+
+.article-image:hover .article-icon {
+ transform: scale(1.1);
+}
+
+.article-image:hover .article-title {
+ transform: scale(0.9);
+}
+
+.article-image.is-single {
+ margin-bottom: 2rem;
+ width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+ .article-image {
+ height: 180px;
+ width: 240px;
+ }
+}
+
+.article-overlay {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ background-color: #0a0a0a;
+ opacity: 0;
+ transition-duration: 86ms;
+ transition-property: opacity;
+ transition-timing-function: ease-out;
+}
+
+.article-icon,
+.article-title {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ transition-duration: 86ms;
+ transition-property: transform;
+ transition-timing-function: ease-out;
+}
+
+.article-icon {
+ color: #0a0a0a;
+ opacity: 0.25;
+}
+
+.article-icon .fa {
+ font-size: 56px;
+}
+
+.article-title {
+ color: white;
+ font-size: 2.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+}
+
.example,
.structure {
border: 1px solid #ffdd57;
projects / thirdparty / bulma.git / commitdiff
