Add Bootstrap comparison

This commit is contained in:
Jeremy Thomas 2017-07-31 20:58:30 +01:00
parent d14a703b5e
commit 9648eafd89
6 changed files with 1863 additions and 588 deletions

View File

@ -5,7 +5,7 @@ route: blog
{% include blog-hero.html %}
<section class="section">
<section class="section is-medium">
<div class="container">
<div class="columns">
<div class="column is-offset-2 is-8">
@ -21,7 +21,7 @@ route: blog
</strong>
</div>
<p class="subtitle is-6">
<a class="article-back href="{{ site.url }}/blog">Back</a>
<a class="article-back" href="{{ site.url }}/blog">Back</a>
</p>
<p class="subtitle is-4">
{{ page.date | date_to_string }}

View File

@ -0,0 +1,14 @@
---
layout: post
title: "Bulma / Bootstrap comparison"
introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](http://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have."
color: "bootstrap"
name: "Bulma over Bootstrap?"
icon: "heart"
---
Bulma has always been a Bootstrap fan, inspired by its goal and purpose.
Some users ask why they should use Bulma over Bootstrap, and there is **no definite answer**, because while both CSS frameworks share _similarities_, they also **differ** in many ways.
The new page [\"Alternative to Bootstrap\"](http://bulma.io/alternative-to-bootstrap/) draws a **feature comparison** to help undecided users choose the right tool for their web design needs, which can be either Bulma or Bootstrap.

View File

@ -60,6 +60,8 @@
$color: nth($pair, 1)
&.is-#{$name}
background-color: $color
&.is-bootstrap
background-color: $bootstrap
&:hover
.article-overlay
opacity: 0.25

View File

@ -29,6 +29,10 @@ bootstrap:
icon: "plug"
title: "jQuery plugins"
content: "Bootstrap includes useful jQuery plugins to add **interaction** to your website."
- type: "bootstrap"
icon: "users"
title: "Big community"
content: "Considering how long it has been around, Bootstrap has a **larger community** than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet."
- type: "bootstrap"
icon: "internet-explorer"
title: "Internet Explorer compatibility"
@ -36,7 +40,7 @@ bootstrap:
- type: "bootstrap"
icon: "list"
title: "Additional elements"
content: "Bootstrap has a few more **elements** like the [list group](http://getbootstrap.com/components/#list-group), [wells](http://getbootstrap.com/components/#wells), or the [page header](http://getbootstrap.com/components/#page-header)."
content: "Bootstrap has a some **elements** like the [list group](http://getbootstrap.com/components/#list-group), [wells](http://getbootstrap.com/components/#wells), or the [page header](http://getbootstrap.com/components/#page-header) that Bulma doesn't have."
---
<!DOCTYPE html>

View File

@ -1,5 +1,6 @@
@charset "utf-8"
$bootstrap: #6f5499
$github: #333333
$twitter: #55acee

File diff suppressed because one or more lines are too long