mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add pro include
This commit is contained in:
Jeremy Thomas
parent
db006fba23
commit
754b8bf081
15
docs/_includes/pro.html
Normal file
15
docs/_includes/pro.html
Normal file
@ -0,0 +1,15 @@
|
||||
<article class="media pro is-{{ include.type }}">
|
||||
<aside class="media-left">
|
||||
<span class="icon">
|
||||
<i class="fa fa-{{ include.icon }}"></i>
|
||||
</span>
|
||||
</aside>
|
||||
<div class="media-content">
|
||||
<p class="title is-5 pro-title">
|
||||
{{ include.title }}
|
||||
</p>
|
||||
<div class="pro-content">
|
||||
{{ include.content | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
14
docs/_includes/svg/bootstrap-icon.svg
Normal file
14
docs/_includes/svg/bootstrap-icon.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve">
|
||||
<g id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
|
||||
<path id="bg" fill="#563D7C" d="M612,510c0,56.1-45.9,102-102,102H102C45.9,612,0,566.1,0,510V102C0,45.9,45.9,0,102,0h408
|
||||
c56.1,0,102,45.9,102,102V510z"/>
|
||||
<g id="B" enable-background="new ">
|
||||
<path fill="#FFFFFF" d="M166.3,133h173.5c32,0,57.7,7.3,77,22s29,36.8,29,66.5c0,18-4.4,33.4-13.2,46.2
|
||||
c-8.8,12.8-21.4,22.8-37.8,29.8v1c22,4.7,38.7,15.1,50,31.2c11.3,16.2,17,36.4,17,60.8c0,14-2.5,27.1-7.5,39.2
|
||||
c-5,12.2-12.8,22.7-23.5,31.5s-24.3,15.8-41,21s-36.5,7.8-59.5,7.8h-164L166.3,133L166.3,133z M228.8,282.5h102
|
||||
c15,0,27.5-4.2,37.5-12.8s15-20.8,15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8,282.5L228.8,282.5z M228.8,439h110.5
|
||||
c19,0,33.8-4.9,44.2-14.8c10.5-9.8,15.8-23.8,15.8-41.8c0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
7
docs/_includes/svg/bulma-b.svg
Normal file
7
docs/_includes/svg/bulma-b.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="220px" height="320px" viewBox="0 0 220 320" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g fill="#00D1B2">
|
||||
<polygon id="Path" points="0 220 20 80 100 0 200 100 140 160 220 240 100 320"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 376 B |
@ -1,4 +1,3 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="480px" height="480px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="#00d1b2" fill-rule="evenodd">
|
||||
<polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
|
||||
|
||||
|
Before Width: | Height: | Size: 394 B After Width: | Height: | Size: 339 B |
@ -14,4 +14,47 @@ $bootstrap-invert: #fff
|
||||
border-bottom: 1px solid currentColor
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $bootstrap-invert
|
||||
color: $bootstrap-invert
|
||||
|
||||
.pros-heading
|
||||
padding: 2rem
|
||||
padding-bottom: 0
|
||||
text-align: center
|
||||
|
||||
.pros-icon
|
||||
margin-bottom: 2rem
|
||||
text-align: center
|
||||
svg
|
||||
height: 3rem
|
||||
width: auto
|
||||
|
||||
.pros-list
|
||||
margin: 0 auto
|
||||
max-width: 540px
|
||||
|
||||
.pro
|
||||
.icon
|
||||
position: relative
|
||||
top: -1px
|
||||
.title
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.pro + .pro
|
||||
margin-top: 2rem
|
||||
padding-top: 2rem
|
||||
|
||||
.pro-content
|
||||
p:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.pro.is-bulma
|
||||
.icon
|
||||
color: $primary
|
||||
|
||||
.pro.is-bootstrap
|
||||
.icon
|
||||
color: $bootstrap
|
||||
|
||||
.separator
|
||||
color: $border
|
||||
margin: 0 0.25em
|
||||
@ -34,6 +34,18 @@
|
||||
.testimonial + .testimonial
|
||||
margin-top: 1.5rem
|
||||
|
||||
+desktop
|
||||
.testimonials
|
||||
min-height: 595px
|
||||
|
||||
+widescreen
|
||||
.testimonials
|
||||
min-height: 653px
|
||||
|
||||
+fullhd
|
||||
.testimonials
|
||||
min-height: 632px
|
||||
|
||||
.rainbow
|
||||
animation: rainbow 8s ease infinite
|
||||
background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
|
||||
|
||||
@ -1,4 +1,42 @@
|
||||
---
|
||||
bulma:
|
||||
- type: "bulma"
|
||||
icon: "css3"
|
||||
title: "Modern features"
|
||||
content: "By using the latest CSS3 features such as **Flexbox**, and planning on using **CSS Variables** and **CSS Grid**, Bulma aims to stay on the bleeding edge of browser technology."
|
||||
- type: "bulma"
|
||||
icon: "pause"
|
||||
title: "Simple grid system"
|
||||
content: "To build a Bulma grid, you only need a single `.columns` container to wrap as many `.column` items as you want."
|
||||
- type: "bulma"
|
||||
icon: "heart"
|
||||
title: "Easy-to-learn syntax"
|
||||
content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/modifiers/syntax/)"
|
||||
- type: "bulma"
|
||||
icon: "fa"
|
||||
title: "Font Awesome support"
|
||||
content: "Bulma is compatible with [Font Awesome](http://fontawesome.io/) thanks to the `.icon` element."
|
||||
- type: "bulma"
|
||||
icon: "plus"
|
||||
title: "100+ useful CSS helpers"
|
||||
content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/modifiers/responsive-helpers/) <span class="separator">–</span> [Typography helpers](/documentation/modifiers/typography-helpers/) <span class="separator">–</span> [Other helpers](/documentation/modifiers/helpers/)'
|
||||
- type: "bulma"
|
||||
icon: "code"
|
||||
title: "No JavaScript"
|
||||
content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p><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>'
|
||||
bootstrap:
|
||||
- type: "bootstrap"
|
||||
icon: "plug"
|
||||
title: "jQuery plugins"
|
||||
content: "Bootstrap includes useful jQuery plugins to add **interaction** to your website."
|
||||
- type: "bootstrap"
|
||||
icon: "internet-explorer"
|
||||
title: "Internet Explorer compatibility"
|
||||
content: "While 90% of Bulma works in IE11, Bootstrap has a better **compatibility** with this browser."
|
||||
- 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)."
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@ -69,6 +107,56 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="subtitle">
|
||||
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
|
||||
</h2>
|
||||
|
||||
<div class="columns is-desktop">
|
||||
<div class="column is-half-desktop">
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bulma</strong>
|
||||
</h3>
|
||||
<figure class="pros-icon">
|
||||
{% include svg/bulma-b.svg %}
|
||||
</figure>
|
||||
<div class="pros-list">
|
||||
{% for pro in page.bulma %}
|
||||
{%
|
||||
include pro.html
|
||||
type=pro.type
|
||||
icon=pro.icon
|
||||
title=pro.title
|
||||
content=pro.content
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-half-desktop">
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bootstrap</strong>
|
||||
</h3>
|
||||
<figure class="pros-icon">
|
||||
{% include svg/bootstrap-icon.svg %}
|
||||
</figure>
|
||||
<div class="pros-list">
|
||||
{% for pro in page.bootstrap %}
|
||||
{%
|
||||
include pro.html
|
||||
type=pro.type
|
||||
icon=pro.icon
|
||||
title=pro.title
|
||||
content=pro.content
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user