mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Jeremy Thomas
GitHub
commit
a9433f1f83
@ -1,5 +1,12 @@
|
||||
# Bulma Changelog
|
||||
|
||||
## 0.2.0
|
||||
|
||||
* Added: new branding
|
||||
* Added: modularity
|
||||
* Added: grid folder
|
||||
* Added: .github folder
|
||||
|
||||
## 0.1.1
|
||||
|
||||
* Remove `flex: 1` shorthand
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
|
||||
|
||||
[](http://bulma.io)
|
||||
[](http://bulma.io)
|
||||
|
||||
## Quick install
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.1.2",
|
||||
"version": "0.2.0",
|
||||
"homepage": "http://bulma.io",
|
||||
"authors": [
|
||||
"jgthms <bbxdesign@gmail.com>"
|
||||
|
||||
10
bulma.sass
vendored
10
bulma.sass
vendored
@ -1,7 +1,7 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "sass/utilities/utilities"
|
||||
@import "sass/base/base"
|
||||
@import "sass/elements/elements"
|
||||
@import "sass/components/components"
|
||||
@import "sass/layout/layout"
|
||||
@import "sass/base/base.sass"
|
||||
@import "sass/elements/elements.sass"
|
||||
@import "sass/components/components.sass"
|
||||
@import "sass/grid/grid.sass"
|
||||
@import "sass/layout/layout.sass"
|
||||
|
||||
4511
css/bulma.css
vendored
4511
css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
2
docs/.gitignore
vendored
2
docs/.gitignore
vendored
@ -1,6 +1,8 @@
|
||||
# Files
|
||||
.DS_Store
|
||||
_config.local.yml
|
||||
css/bulma-test.css
|
||||
bulma-test.sass
|
||||
bulma-website-local.sass
|
||||
npm-debug.log
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Meta
|
||||
|
||||
title: "Bulma: a modern CSS framework based on Flexbox"
|
||||
description: "Bulma is a CSS framework based on Flexbox and built with Sass"
|
||||
description: "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free."
|
||||
|
||||
# Build
|
||||
|
||||
@ -13,6 +13,6 @@ url: http://bulma.io
|
||||
|
||||
baseurl: ""
|
||||
documentation: "/documentation/overview/start/"
|
||||
download: https://github.com/jgthms/bulma/archive/0.1.2.zip
|
||||
download: https://github.com/jgthms/bulma/archive/0.2.0.zip
|
||||
github: https://github.com/jgthms/bulma
|
||||
version: 0.1.2
|
||||
version: 0.2.0
|
||||
|
||||
@ -68,26 +68,21 @@
|
||||
|
||||
{% if page.route == 'index' %}
|
||||
<style type="text/css">
|
||||
@media screen and (max-width: 979px) {
|
||||
.title.is-2 .icon.is-large {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title.is-2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title.is-2 a {
|
||||
color: #222324;
|
||||
color: #242424;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.title.is-2 a:hover {
|
||||
color: #1fc8db;
|
||||
color: #11e4c4;
|
||||
}
|
||||
|
||||
.title.is-2 .icon.is-large {
|
||||
left: -72px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
}
|
||||
@ -99,6 +94,25 @@
|
||||
.hero .title.is-2 a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero.is-primary a.column,
|
||||
.hero.is-primary a.column:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero.is-primary a.column:hover .title strong {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 979px) {
|
||||
.title.is-2 a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.title.is-2 .icon.is-large {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@ -12,24 +12,28 @@
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/favicons/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/favicons/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{{ site.baseurl }}/favicons/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/favicons/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{{ site.baseurl }}/favicons/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/favicons/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="{{ site.baseurl }}/favicons/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/favicons/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/favicons/apple-touch-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="{{ site.baseurl }}/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#1fc8db">
|
||||
<link rel="shortcut icon" href="{{ site.baseurl }}/favicons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#1fc8db">
|
||||
<meta name="msapplication-TileImage" content="{{ site.baseurl }}/favicons/mstile-144x144.png">
|
||||
<meta name="msapplication-config" content="{{ site.baseurl }}/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta property="og:url" content="{{site.url}}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="{{site.title}}">
|
||||
<meta property="og:image" content="{{site.url}}/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="{{site.description}}">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="{{site.title}}">
|
||||
<meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="{{site.description}}">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201609241700">
|
||||
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201609241700" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201609241700" sizes="16x16">
|
||||
<link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201609241700">
|
||||
<link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201609241700" color="#11e4c4">
|
||||
<link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201609241700">
|
||||
<meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201609241700">
|
||||
<meta name="theme-color" content="#11e4c4">
|
||||
</head>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="{{ site.baseurl }}/">
|
||||
{% if page.route == 'index' %}
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="{{ site.title }}">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="{{ site.title }}">
|
||||
{% else %}
|
||||
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="{{ site.title }}">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="{{ site.title }}">
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -7,12 +7,15 @@
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/variables/">
|
||||
Variables
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
|
||||
Responsiveness
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/modular/">
|
||||
Modular
|
||||
</a>
|
||||
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.baseurl }}/documentation/overview/classes/">
|
||||
Classes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
6
docs/_includes/svg/bulma-icon.svg
Normal file
6
docs/_includes/svg/bulma-icon.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?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="#11E4C4" fill-rule="evenodd">
|
||||
<polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 394 B |
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
|
||||
{% include head.html %}
|
||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||
{{ content }}
|
||||
|
||||
@ -3,9 +3,9 @@ layout: post
|
||||
title: "Metro UI CSS grid with Bulma tiles"
|
||||
---
|
||||
|
||||
Have you ever wanted to build a **Metro-UI-like grid in CSS**?
|
||||
Have you ever wanted to build a **Metro-UI-like grid in CSS**?
|
||||
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.
|
||||
|
||||
[](http://bulma.io/documentation/grid/tiles/)
|
||||
[](http://bulma.io/documentation/grid/tiles/)
|
||||
|
||||
Check out the [documentation](http://bulma.io/documentation/grid/tiles/)!
|
||||
|
||||
@ -9,7 +9,7 @@ route: blog
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<div class="column is-4">
|
||||
<p class="subtitle4">
|
||||
{{ post.date | date_to_string }}
|
||||
</p>
|
||||
@ -18,6 +18,8 @@ route: blog
|
||||
{{ post.title }}
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="content">
|
||||
{{ post.content }}
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "../bulma.sass"
|
||||
@import "../sass/utilities/mixins.sass"
|
||||
|
||||
// Override
|
||||
|
||||
@ -52,7 +53,6 @@ $carbon-space: 15px
|
||||
.carbon-text
|
||||
display: block
|
||||
color: $text-strong
|
||||
margin-bottom: 5px
|
||||
margin-left: 130px + $carbon-space
|
||||
.carbon-poweredby
|
||||
font-size: $size-small
|
||||
@ -77,20 +77,117 @@ $twitter: #55acee
|
||||
border-color: $twitter
|
||||
color: $white
|
||||
|
||||
@keyframes floatUp
|
||||
0%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
100%
|
||||
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes strokePath
|
||||
from
|
||||
stroke-dashoffset: 880
|
||||
to
|
||||
stroke-dashoffset: 0
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
transform: scale(0.86)
|
||||
to
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes fadeOut
|
||||
0%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
67%
|
||||
opacity: 1
|
||||
transform: scale(0.86)
|
||||
100%
|
||||
opacity: 0
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes slideDown
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes slideUp
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(10px)
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
$curve: cubic-bezier(0, 0.71, 0.29, 1)
|
||||
|
||||
#b
|
||||
animation-delay: 1s
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: floatUp
|
||||
animation-timing-function: $curve
|
||||
border-radius: 20px
|
||||
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
|
||||
display: inline-block
|
||||
height: 240px
|
||||
margin-bottom: 40px
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 240px
|
||||
svg
|
||||
+overlay
|
||||
display: block
|
||||
height: 240px
|
||||
width: 240px
|
||||
&:first-child
|
||||
animation-duration: 1.5s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeOut
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: strokePath
|
||||
animation-timing-function: $curve
|
||||
fill: none
|
||||
stroke: $turquoise
|
||||
stroke-dasharray: 880
|
||||
stroke-width: 2px
|
||||
&:last-child
|
||||
animation-delay: 1s
|
||||
animation-duration: 1s
|
||||
animation-fill-mode: both
|
||||
animation-name: fadeIn
|
||||
animation-timing-function: $curve
|
||||
g
|
||||
fill: $turquoise
|
||||
|
||||
+mobile
|
||||
border-radius: 10px
|
||||
height: 120px
|
||||
width: 120px
|
||||
|
||||
#bulma
|
||||
animation: slideDown 500ms both
|
||||
animation-delay: 1s
|
||||
|
||||
#modern-framework
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 1.2s
|
||||
|
||||
#npm
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 1.4s
|
||||
background: none
|
||||
margin: -10px 0 20px
|
||||
code
|
||||
@ -100,6 +197,18 @@ $twitter: #55acee
|
||||
font-size: 16px
|
||||
padding: 16px 32px
|
||||
|
||||
#ghbtns
|
||||
animation: slideDown 500ms both
|
||||
animation-delay: 1.6s
|
||||
|
||||
html.route-index #carbon
|
||||
animation: slideUp 500ms both
|
||||
animation-delay: 1.8s
|
||||
|
||||
#download
|
||||
animation: fadeIn 500ms both
|
||||
animation-delay: 2s
|
||||
|
||||
#grid
|
||||
.notification
|
||||
padding-left: 0
|
||||
@ -231,11 +340,12 @@ $structure-invert: $danger-invert
|
||||
position: relative
|
||||
.copy,
|
||||
.expand
|
||||
@extend .unselectable
|
||||
+unselectable
|
||||
background: $white
|
||||
border: solid $border
|
||||
border-width: 0 0 1px 1px
|
||||
color: $text-light
|
||||
cursor: pointer
|
||||
outline: none
|
||||
position: absolute
|
||||
right: 0
|
||||
@ -271,3 +381,11 @@ $structure-invert: $danger-invert
|
||||
.input
|
||||
border-color: $white
|
||||
box-shadow: none
|
||||
|
||||
html
|
||||
\::-moz-selection
|
||||
background: $primary
|
||||
color: $primary-invert
|
||||
\::selection
|
||||
background: $primary
|
||||
color: $primary-invert
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
5887
docs/css/bulma.css
vendored
Normal file
5887
docs/css/bulma.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
175
docs/css/utilities.css
Normal file
175
docs/css/utilities.css
Normal file
@ -0,0 +1,175 @@
|
||||
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
article, aside, figure, footer, header, nav, section, details, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
object,
|
||||
embed {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
abbr[title], dfn[title] {
|
||||
border-bottom: 1px dotted #000;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: normal;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input, select {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-line;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
select, input, textarea {
|
||||
font: 99% sans-serif;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: inherit;
|
||||
font: 100%;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td, td img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
pre, code, kbd, samp {
|
||||
font-family: monospace, sans-serif;
|
||||
}
|
||||
|
||||
label,
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=file],
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=button] {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@keyframes spin-around {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
0
docs/css/variables.css
Normal file
0
docs/css/variables.css
Normal file
@ -199,7 +199,7 @@ doc-subtab: level
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
@ -219,7 +219,7 @@ doc-subtab: level
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
|
||||
@ -37,7 +37,7 @@ doc-subtab: nav
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="#">
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -93,7 +93,7 @@ doc-subtab: nav
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="#">
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="Bulma logo">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -479,7 +479,7 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
<input class="input is-expanded" type="text" placeholder="Amount of money">
|
||||
<a class="button is-success">
|
||||
<a class="button">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
@ -494,7 +494,7 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
<input class="input is-expanded" type="text" placeholder="Amount of money">
|
||||
<a class="button is-success">
|
||||
<a class="button">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
@ -512,7 +512,7 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
<a class="button is-success">
|
||||
<a class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
@ -527,7 +527,7 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
<a class="button is-success">
|
||||
<a class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
@ -542,7 +542,7 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
<a class="button is-success">
|
||||
<a class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
@ -557,7 +557,7 @@ doc-subtab: form
|
||||
</select>
|
||||
</span>
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
<a class="button is-success">
|
||||
<a class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -102,6 +102,7 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-dark is-small">Small</span>
|
||||
<span class="tag is-primary is-medium">Medium</span>
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
{% endhighlight %}
|
||||
@ -116,19 +117,19 @@ doc-subtab: tag
|
||||
<p class="control">
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-warning is-medium">
|
||||
Hello
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
@ -140,16 +141,20 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-success">
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-warning is-medium">
|
||||
Bar
|
||||
<button class="delete"></button>
|
||||
Hello
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-danger is-large">
|
||||
Foo bar
|
||||
World
|
||||
<button class="delete"></button>
|
||||
</span>
|
||||
{% endhighlight %}
|
||||
|
||||
@ -434,7 +434,7 @@ doc-subtab: hero
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
@ -513,7 +513,7 @@ doc-subtab: hero
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="images/bulma-white.png" alt="Logo">
|
||||
<img src="images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
@ -581,7 +581,7 @@ doc-subtab: hero
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
@ -660,7 +660,7 @@ doc-subtab: hero
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="images/bulma-white.png" alt="Logo">
|
||||
<img src="images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
@ -728,7 +728,7 @@ doc-subtab: hero
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.baseurl }}/images/bulma-white.png" alt="Logo">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
@ -807,7 +807,7 @@ doc-subtab: hero
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="images/bulma-white.png" alt="Logo">
|
||||
<img src="images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
|
||||
@ -196,7 +196,7 @@ doc-tab: navbar
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
@ -216,7 +216,7 @@ doc-tab: navbar
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<img src="{{ site.baseurl }}/images/bulma.png" alt="" style="height: 33px;">
|
||||
<img src="{{ site.baseurl }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
|
||||
97
docs/documentation/overview/modular.html
Normal file
97
docs/documentation/overview/modular.html
Normal file
@ -0,0 +1,97 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: modular
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Modular</h1>
|
||||
<h2 class="subtitle">Just import what you <strong>need</strong></h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma consists of <strong>29</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||
</p>
|
||||
<p>
|
||||
For example, let's say you only want the Bulma <strong>columns.</strong>
|
||||
<br>
|
||||
The file is located in the <code>bulma/sass/grid</code> folder.
|
||||
<br>
|
||||
Simply <strong>import</strong> it directly:
|
||||
</p>
|
||||
{% highlight sass %}
|
||||
@import "bulma/sass/grid/columns.sass"
|
||||
{% endhighlight %}
|
||||
<p>
|
||||
Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
|
||||
</p>
|
||||
{% highlight html %}
|
||||
<div class="columns">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
What if you only want the <strong>button</strong> styles instead?
|
||||
</p>
|
||||
{% highlight sass %}
|
||||
@import "bulma/sass/elements/button.sass"
|
||||
{% endhighlight %}
|
||||
<p>
|
||||
You can now use the <code>.button</code> class, and all its modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-active</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-primary</code>,
|
||||
<code>.is-info</code>,
|
||||
<code>.is-success</code>...
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-small</code>,
|
||||
<code>.is-medium</code>,
|
||||
<code>.is-large</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-outlined</code>,
|
||||
<code>.is-inverted</code>,
|
||||
<code>.is-link</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-disabled</code>,
|
||||
<code>.is-loading</code>
|
||||
</li>
|
||||
</ul>
|
||||
{% highlight html %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
|
||||
<a class="button is-primary">
|
||||
Primary button
|
||||
</a>
|
||||
|
||||
<a class="button is-large">
|
||||
Large button
|
||||
</a>
|
||||
|
||||
<a class="button is-loading">
|
||||
Loading button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -189,12 +189,6 @@ doc-subtab: variables
|
||||
<tr><td><code>$desktop</code></td><td>980px</td></tr>
|
||||
<tr><td><code>$widescreen</code></td><td>1180px</td></tr>
|
||||
|
||||
<tr><th colspan="2">Dimensions</th></tr>
|
||||
|
||||
<tr><td><code>$column-gap</code></td><td>20px</td></tr>
|
||||
|
||||
<tr><td><code>$nav-height</code></td><td>50px</td></tr>
|
||||
|
||||
<tr><th colspan="2">Miscellaneous</th></tr>
|
||||
|
||||
<tr><td><code>$easing</code></td><td>ease-out</td></tr>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 1.9 KiB |
@ -2,11 +2,8 @@
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="/favicons/mstile-70x70.png"/>
|
||||
<square150x150logo src="/favicons/mstile-150x150.png"/>
|
||||
<square310x310logo src="/favicons/mstile-310x310.png"/>
|
||||
<wide310x150logo src="/favicons/mstile-310x150.png"/>
|
||||
<TileColor>#1fc8db</TileColor>
|
||||
<square150x150logo src="/favicons/mstile-150x150.png?v=201609241700"/>
|
||||
<TileColor>#11e4c4</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 710 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 917 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -1,41 +1,12 @@
|
||||
{
|
||||
"name": "Bulma",
|
||||
"name": "bulma.io",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image\/png",
|
||||
"density": 0.75
|
||||
},
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"density": 1
|
||||
},
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image\/png",
|
||||
"density": 1.5
|
||||
},
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"density": 2
|
||||
},
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"density": 3
|
||||
},
|
||||
{
|
||||
"src": "\/favicons\/android-chrome-192x192.png",
|
||||
"src": "\/favicons\/android-chrome-192x192.png?v=201609241700",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"density": 4
|
||||
"type": "image\/png"
|
||||
}
|
||||
]
|
||||
],
|
||||
"theme_color": "#11e4c4",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@ -2,18 +2,21 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="320.000000pt" height="320.000000pt" viewBox="0 0 320.000000 320.000000"
|
||||
width="480.000000pt" height="480.000000pt" viewBox="0 0 480.000000 480.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,320.000000) scale(0.100000,-0.100000)"
|
||||
<g transform="translate(0.000000,480.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M1105 2807 c-214 -215 -394 -397 -398 -404 -5 -8 -17 -74 -27 -146
|
||||
-11 -73 -22 -148 -24 -167 -3 -19 -26 -179 -51 -355 -57 -403 -54 -385 -60
|
||||
-415 -2 -14 -6 -41 -9 -60 -11 -84 -27 -198 -32 -227 -5 -31 12 -49 496 -533
|
||||
l500 -500 600 400 600 400 -395 395 c-217 217 -395 399 -395 405 0 6 133 143
|
||||
295 305 l295 295 -500 500 c-275 275 -501 500 -503 499 -1 0 -177 -177 -392
|
||||
-392z"/>
|
||||
<path d="M1760 4200 c-330 -330 -600 -603 -601 -607 0 -5 -2 -15 -3 -23 -2 -8
|
||||
-7 -40 -11 -70 -4 -30 -8 -62 -10 -70 -1 -8 -6 -40 -10 -70 -4 -30 -8 -64 -10
|
||||
-75 -4 -21 -13 -88 -21 -145 -6 -44 -13 -90 -19 -132 -4 -27 -95 -667 -110
|
||||
-773 -2 -16 -11 -79 -20 -140 -9 -60 -18 -126 -21 -145 -2 -20 -6 -46 -9 -59
|
||||
-2 -13 -7 -44 -10 -70 -3 -25 -7 -59 -10 -76 -2 -16 -7 -47 -10 -68 -3 -20 -7
|
||||
-54 -10 -75 -3 -20 -8 -51 -11 -69 -5 -31 18 -55 746 -783 l750 -750 673 447
|
||||
c369 247 674 450 677 453 3 3 105 71 228 153 l222 147 -595 595 c-327 327
|
||||
-595 599 -595 605 0 6 198 208 440 450 242 242 440 444 440 450 0 6 -335 345
|
||||
-745 755 l-745 745 -600 -600z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 901 B After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 461 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 142 KiB |
BIN
docs/images/bulma-banner.png
Normal file
BIN
docs/images/bulma-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
docs/images/bulma-icon.png
Normal file
BIN
docs/images/bulma-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
docs/images/bulma-type-white.png
Normal file
BIN
docs/images/bulma-type-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
docs/images/bulma-type.png
Normal file
BIN
docs/images/bulma-type.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
@ -1,129 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468
|
||||
C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>
|
||||
<path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
|
||||
c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528
|
||||
c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196
|
||||
c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.553,2.355,3.287,4.016,3.226c1.625-0.067,2.232-1.036,4.193-1.036
|
||||
c1.943,0,2.513,1.036,4.207,0.997c1.744-0.028,2.842-1.56,3.89-3.127c1.255-1.78,1.759-3.533,1.779-3.623
|
||||
C33.507,24.924,30.161,23.647,30.128,19.784z"/>
|
||||
<path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944
|
||||
c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M53.645,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909h-2.211l4.284-13.308h2.646L53.645,31.504z
|
||||
M49.755,25.955L48.63,22.48c-0.119-0.355-0.342-1.191-0.671-2.507h-0.04c-0.131,0.566-0.342,1.402-0.632,2.507l-1.105,3.475
|
||||
H49.755z"/>
|
||||
<path fill="#FFFFFF" d="M64.662,26.588c0,1.632-0.441,2.922-1.323,3.869c-0.79,0.843-1.771,1.264-2.942,1.264
|
||||
c-1.264,0-2.172-0.454-2.725-1.362h-0.04v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
|
||||
c0.711-1.146,1.79-1.718,3.238-1.718c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.662,25.127,64.662,26.588z M62.49,26.666
|
||||
c0-0.934-0.21-1.704-0.632-2.31c-0.461-0.632-1.08-0.948-1.856-0.948c-0.526,0-1.004,0.176-1.431,0.523
|
||||
c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.642,1.768
|
||||
s0.984,0.721,1.668,0.721c0.803,0,1.428-0.31,1.875-0.928C62.266,28.496,62.49,27.68,62.49,26.666z"/>
|
||||
<path fill="#FFFFFF" d="M75.699,26.588c0,1.632-0.441,2.922-1.324,3.869c-0.789,0.843-1.77,1.264-2.941,1.264
|
||||
c-1.264,0-2.172-0.454-2.724-1.362H68.67v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
|
||||
c0.71-1.146,1.789-1.718,3.238-1.718c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.699,25.127,75.699,26.588z M73.527,26.666
|
||||
c0-0.934-0.211-1.704-0.633-2.31c-0.461-0.632-1.078-0.948-1.855-0.948c-0.527,0-1.004,0.176-1.432,0.523
|
||||
c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.64,1.768
|
||||
c0.428,0.48,0.984,0.721,1.67,0.721c0.803,0,1.428-0.31,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>
|
||||
<path fill="#FFFFFF" d="M88.039,27.772c0,1.132-0.393,2.053-1.182,2.764c-0.867,0.777-2.074,1.165-3.625,1.165
|
||||
c-1.432,0-2.58-0.276-3.449-0.829l0.494-1.777c0.936,0.566,1.963,0.85,3.082,0.85c0.803,0,1.428-0.182,1.877-0.544
|
||||
c0.447-0.362,0.67-0.848,0.67-1.454c0-0.54-0.184-0.995-0.553-1.364c-0.367-0.369-0.98-0.712-1.836-1.029
|
||||
c-2.33-0.869-3.494-2.142-3.494-3.816c0-1.094,0.408-1.991,1.225-2.689c0.814-0.699,1.9-1.048,3.258-1.048
|
||||
c1.211,0,2.217,0.211,3.02,0.632l-0.533,1.738c-0.75-0.408-1.598-0.612-2.547-0.612c-0.75,0-1.336,0.185-1.756,0.553
|
||||
c-0.355,0.329-0.533,0.73-0.533,1.205c0,0.526,0.203,0.961,0.611,1.303c0.355,0.316,1,0.658,1.936,1.027
|
||||
c1.145,0.461,1.986,1,2.527,1.618C87.77,26.081,88.039,26.852,88.039,27.772z"/>
|
||||
<path fill="#FFFFFF" d="M95.088,23.508h-2.35v4.659c0,1.185,0.414,1.777,1.244,1.777c0.381,0,0.697-0.033,0.947-0.099l0.059,1.619
|
||||
c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.77c-0.473-0.514-0.711-1.376-0.711-2.587v-4.837h-1.4v-1.6h1.4
|
||||
v-1.757l2.094-0.632v2.389h2.35V23.508z"/>
|
||||
<path fill="#FFFFFF" d="M105.691,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.883,0.975-2.055,1.461-3.516,1.461
|
||||
c-1.408,0-2.529-0.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487,0.43-2.705,1.293-3.652c0.861-0.948,2.023-1.422,3.484-1.422
|
||||
c1.408,0,2.541,0.467,3.396,1.402C105.283,24.021,105.691,25.192,105.691,26.627z M103.479,26.696
|
||||
c0-0.885-0.189-1.644-0.572-2.277c-0.447-0.766-1.086-1.148-1.914-1.148c-0.857,0-1.508,0.383-1.955,1.148
|
||||
c-0.383,0.634-0.572,1.405-0.572,2.317c0,0.885,0.189,1.644,0.572,2.276c0.461,0.766,1.105,1.148,1.936,1.148
|
||||
c0.814,0,1.453-0.39,1.914-1.168C103.281,28.347,103.479,27.58,103.479,26.696z"/>
|
||||
<path fill="#FFFFFF" d="M112.621,23.783c-0.211-0.039-0.436-0.059-0.672-0.059c-0.75,0-1.33,0.283-1.738,0.85
|
||||
c-0.355,0.5-0.533,1.132-0.533,1.895v5.035h-2.131l0.02-6.574c0-1.106-0.027-2.113-0.08-3.021h1.857l0.078,1.836h0.059
|
||||
c0.225-0.631,0.58-1.139,1.066-1.52c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039V23.783z"/>
|
||||
<path fill="#FFFFFF" d="M122.156,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.025,0.948,0.334,1.673,0.928,2.173
|
||||
c0.539,0.447,1.236,0.671,2.092,0.671c0.947,0,1.811-0.151,2.588-0.454l0.334,1.48c-0.908,0.396-1.98,0.593-3.217,0.593
|
||||
c-1.488,0-2.656-0.438-3.506-1.313c-0.848-0.875-1.273-2.05-1.273-3.524c0-1.447,0.395-2.652,1.186-3.613
|
||||
c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.873,24.047,122.156,25.055,122.156,26.252z
|
||||
M120.123,25.699c0.014-0.632-0.125-1.178-0.414-1.639c-0.369-0.593-0.936-0.889-1.699-0.889c-0.697,0-1.264,0.289-1.697,0.869
|
||||
c-0.355,0.461-0.566,1.014-0.631,1.658H120.123z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M49.05,10.009c0,1.177-0.353,2.063-1.058,2.658c-0.653,0.549-1.581,0.824-2.783,0.824
|
||||
c-0.596,0-1.106-0.026-1.533-0.078V6.982c0.557-0.09,1.157-0.136,1.805-0.136c1.145,0,2.008,0.249,2.59,0.747
|
||||
C48.723,8.156,49.05,8.961,49.05,10.009z M47.945,10.038c0-0.763-0.202-1.348-0.606-1.756c-0.404-0.407-0.994-0.611-1.771-0.611
|
||||
c-0.33,0-0.611,0.022-0.844,0.068v4.889c0.129,0.02,0.365,0.029,0.708,0.029c0.802,0,1.421-0.223,1.857-0.669
|
||||
S47.945,10.892,47.945,10.038z"/>
|
||||
<path fill="#FFFFFF" d="M54.909,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.009,0.718-1.727,0.718
|
||||
c-0.692,0-1.243-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.712-0.698
|
||||
c0.692,0,1.248,0.229,1.669,0.688C54.708,9.757,54.909,10.333,54.909,11.037z M53.822,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||
c-0.22-0.376-0.533-0.564-0.94-0.564c-0.421,0-0.741,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.714-0.191,0.94-0.574
|
||||
C53.725,11.882,53.822,11.506,53.822,11.071z"/>
|
||||
<path fill="#FFFFFF" d="M62.765,8.719l-1.475,4.714h-0.96l-0.611-2.047c-0.155-0.511-0.281-1.019-0.379-1.523h-0.019
|
||||
c-0.091,0.518-0.217,1.025-0.379,1.523l-0.649,2.047h-0.971l-1.387-4.714h1.077l0.533,2.241c0.129,0.53,0.235,1.035,0.32,1.513
|
||||
h0.019c0.078-0.394,0.207-0.896,0.389-1.503l0.669-2.25h0.854l0.641,2.202c0.155,0.537,0.281,1.054,0.378,1.552h0.029
|
||||
c0.071-0.485,0.178-1.002,0.32-1.552l0.572-2.202H62.765z"/>
|
||||
<path fill="#FFFFFF" d="M68.198,13.433H67.15v-2.7c0-0.832-0.316-1.248-0.95-1.248c-0.311,0-0.562,0.114-0.757,0.343
|
||||
c-0.193,0.229-0.291,0.499-0.291,0.808v2.796h-1.048v-3.366c0-0.414-0.013-0.863-0.038-1.349h0.921l0.049,0.737h0.029
|
||||
c0.122-0.229,0.304-0.418,0.543-0.569c0.284-0.176,0.602-0.265,0.95-0.265c0.44,0,0.806,0.142,1.097,0.427
|
||||
c0.362,0.349,0.543,0.87,0.543,1.562V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M71.088,13.433h-1.047V6.556h1.047V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M77.258,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.01,0.718-1.727,0.718
|
||||
c-0.693,0-1.244-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.711-0.698
|
||||
c0.693,0,1.248,0.229,1.67,0.688C77.057,9.757,77.258,10.333,77.258,11.037z M76.17,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||
c-0.219-0.376-0.533-0.564-0.939-0.564c-0.422,0-0.742,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.713-0.191,0.939-0.574
|
||||
C76.074,11.882,76.17,11.506,76.17,11.071z"/>
|
||||
<path fill="#FFFFFF" d="M82.33,13.433h-0.941l-0.078-0.543h-0.029c-0.322,0.433-0.781,0.65-1.377,0.65
|
||||
c-0.445,0-0.805-0.143-1.076-0.427c-0.246-0.258-0.369-0.579-0.369-0.96c0-0.576,0.24-1.015,0.723-1.319
|
||||
c0.482-0.304,1.16-0.453,2.033-0.446V10.3c0-0.621-0.326-0.931-0.979-0.931c-0.465,0-0.875,0.117-1.229,0.349l-0.213-0.688
|
||||
c0.438-0.271,0.979-0.407,1.617-0.407c1.232,0,1.85,0.65,1.85,1.95v1.736C82.262,12.78,82.285,13.155,82.33,13.433z
|
||||
M81.242,11.813v-0.727c-1.156-0.02-1.734,0.297-1.734,0.95c0,0.246,0.066,0.43,0.201,0.553c0.135,0.123,0.307,0.184,0.512,0.184
|
||||
c0.23,0,0.445-0.073,0.641-0.218c0.197-0.146,0.318-0.331,0.363-0.558C81.236,11.946,81.242,11.884,81.242,11.813z"/>
|
||||
<path fill="#FFFFFF" d="M88.285,13.433h-0.93l-0.049-0.757h-0.029c-0.297,0.576-0.803,0.864-1.514,0.864
|
||||
c-0.568,0-1.041-0.223-1.416-0.669s-0.562-1.025-0.562-1.736c0-0.763,0.203-1.381,0.611-1.853c0.395-0.44,0.879-0.66,1.455-0.66
|
||||
c0.633,0,1.076,0.213,1.328,0.64h0.02V6.556h1.049v5.607C88.248,12.622,88.26,13.045,88.285,13.433z M87.199,11.445v-0.786
|
||||
c0-0.136-0.01-0.246-0.029-0.33c-0.059-0.252-0.186-0.464-0.379-0.635c-0.195-0.171-0.43-0.257-0.701-0.257
|
||||
c-0.391,0-0.697,0.155-0.922,0.466c-0.223,0.311-0.336,0.708-0.336,1.193c0,0.466,0.107,0.844,0.322,1.135
|
||||
c0.227,0.31,0.533,0.465,0.916,0.465c0.344,0,0.619-0.129,0.828-0.388C87.1,12.069,87.199,11.781,87.199,11.445z"/>
|
||||
<path fill="#FFFFFF" d="M97.248,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.008,0.718-1.727,0.718
|
||||
c-0.691,0-1.242-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.713-0.698
|
||||
c0.691,0,1.248,0.229,1.668,0.688C97.047,9.757,97.248,10.333,97.248,11.037z M96.162,11.071c0-0.435-0.094-0.808-0.281-1.119
|
||||
c-0.221-0.376-0.533-0.564-0.941-0.564c-0.42,0-0.74,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
|
||||
c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.715-0.191,0.941-0.574
|
||||
C96.064,11.882,96.162,11.506,96.162,11.071z"/>
|
||||
<path fill="#FFFFFF" d="M102.883,13.433h-1.047v-2.7c0-0.832-0.316-1.248-0.951-1.248c-0.311,0-0.562,0.114-0.756,0.343
|
||||
s-0.291,0.499-0.291,0.808v2.796h-1.049v-3.366c0-0.414-0.012-0.863-0.037-1.349h0.92l0.049,0.737h0.029
|
||||
c0.123-0.229,0.305-0.418,0.543-0.569c0.285-0.176,0.602-0.265,0.951-0.265c0.439,0,0.805,0.142,1.096,0.427
|
||||
c0.363,0.349,0.543,0.87,0.543,1.562V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M109.936,9.504h-1.154v2.29c0,0.582,0.205,0.873,0.611,0.873c0.188,0,0.344-0.016,0.467-0.049
|
||||
l0.027,0.795c-0.207,0.078-0.479,0.117-0.814,0.117c-0.414,0-0.736-0.126-0.969-0.378c-0.234-0.252-0.35-0.676-0.35-1.271V9.504
|
||||
h-0.689V8.719h0.689V7.855l1.027-0.31v1.173h1.154V9.504z"/>
|
||||
<path fill="#FFFFFF" d="M115.484,13.433h-1.049v-2.68c0-0.845-0.316-1.268-0.949-1.268c-0.486,0-0.818,0.245-1,0.735
|
||||
c-0.031,0.103-0.049,0.229-0.049,0.377v2.835h-1.047V6.556h1.047v2.841h0.02c0.33-0.517,0.803-0.775,1.416-0.775
|
||||
c0.434,0,0.793,0.142,1.078,0.427c0.355,0.355,0.533,0.883,0.533,1.581V13.433z"/>
|
||||
<path fill="#FFFFFF" d="M121.207,10.853c0,0.188-0.014,0.346-0.039,0.475h-3.143c0.014,0.466,0.164,0.821,0.455,1.067
|
||||
c0.266,0.22,0.609,0.33,1.029,0.33c0.465,0,0.889-0.074,1.271-0.223l0.164,0.728c-0.447,0.194-0.973,0.291-1.582,0.291
|
||||
c-0.73,0-1.305-0.215-1.721-0.645c-0.418-0.43-0.625-1.007-0.625-1.731c0-0.711,0.193-1.303,0.582-1.775
|
||||
c0.406-0.504,0.955-0.756,1.648-0.756c0.678,0,1.193,0.252,1.541,0.756C121.068,9.77,121.207,10.265,121.207,10.853z
|
||||
M120.207,10.582c0.008-0.311-0.061-0.579-0.203-0.805c-0.182-0.291-0.459-0.437-0.834-0.437c-0.342,0-0.621,0.142-0.834,0.427
|
||||
c-0.174,0.227-0.277,0.498-0.311,0.815H120.207z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
@ -13,21 +13,22 @@ route: index
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p id="b">
|
||||
<img src="{{ site.baseurl }}/images/b.png" alt="{{ site.title }}">
|
||||
{% include svg/bulma-icon.svg %}
|
||||
{% include svg/bulma-icon.svg %}
|
||||
</p>
|
||||
<h1 class="title">
|
||||
<h1 id="bulma" class="title">
|
||||
Bulma
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
<h2 id="modern-framework" class="subtitle">
|
||||
A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
|
||||
</h2>
|
||||
<pre id="npm"><code>npm install bulma</code></pre>
|
||||
<div class="block">
|
||||
<div id="ghbtns" class="block">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
|
||||
</div>
|
||||
{% include carbon.html %}
|
||||
<p class="hero-buttons">
|
||||
<p id="download" class="hero-buttons">
|
||||
<a class="button is-primary is-large" href="{{ site.download }}">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
@ -47,7 +48,7 @@ route: index
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<nav class="columns">
|
||||
<div class="column has-text-centered">
|
||||
<a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/responsiveness/">
|
||||
<span class="icon is-large" style="margin-right: -15px;">
|
||||
<i class="fa fa-mobile"></i>
|
||||
</span>
|
||||
@ -57,20 +58,30 @@ route: index
|
||||
<span class="icon is-large" style="margin-right: 10px;">
|
||||
<i class="fa fa-desktop"></i>
|
||||
</span>
|
||||
<p class="title is-4"><strong>Responsive</strong> design</p>
|
||||
</div>
|
||||
<div class="column has-text-centered">
|
||||
<p class="title is-4"><strong>Responsive</strong></p>
|
||||
<p class="subtitle">Designed for <strong>mobile</strong>-first</p>
|
||||
</a>
|
||||
<a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/modular/">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-cubes"></i>
|
||||
</span>
|
||||
<p class="title is-4"><strong>Modular</strong></p>
|
||||
<p class="subtitle">Just import what you <strong>need</strong></p>
|
||||
</a>
|
||||
<a class="column has-text-centered" href="{{ site.baseurl }}/documentation/grid/columns/">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-css3"></i>
|
||||
</span>
|
||||
<p class="title is-4">Built with <strong>Flexbox</strong></p>
|
||||
</div>
|
||||
<div class="column has-text-centered">
|
||||
<p class="title is-4"><strong>Modern</strong></p>
|
||||
<p class="subtitle">Built with <strong>Flexbox</strong></p>
|
||||
</a>
|
||||
<a class="column has-text-centered" href="{{ site.github }}">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<p class="title is-4">Open source on <strong><a href="{{ site.github }}">GitHub</a></strong></p>
|
||||
</div>
|
||||
<p class="title is-4"><strong>Free</strong></p>
|
||||
<p class="subtitle">Open source on <strong>GitHub</strong></p>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@ -220,14 +231,12 @@ route: index
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-success">
|
||||
<p class="title">Tall tile</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p class="title">Tall tile</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -287,7 +296,7 @@ route: index
|
||||
</p>
|
||||
</div>
|
||||
<p class="level-item">
|
||||
<a class="button is-success">
|
||||
<a class="button is-primary">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
@ -337,7 +346,7 @@ route: index
|
||||
<h3 class="title is-2">
|
||||
<a href="{{ site.baseurl }}/documentation/components/media-object/">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-cubes"></i>
|
||||
<i class="fa fa-magic"></i>
|
||||
</span>
|
||||
Versatile <strong>media object</strong>
|
||||
</a>
|
||||
@ -568,9 +577,9 @@ route: index
|
||||
</ul>
|
||||
</div>
|
||||
<p class="block">
|
||||
<span class="tag is-dark">Tag<button class="delete"></button></span>
|
||||
<span class="tag is-info">Two<button class="delete"></button></span>
|
||||
<span class="tag is-danger">Three<button class="delete"></button></span>
|
||||
<span class="tag is-dark">Tag<button class="delete is-small"></button></span>
|
||||
<span class="tag is-info">Two<button class="delete is-small"></button></span>
|
||||
<span class="tag is-danger">Three<button class="delete is-small"></button></span>
|
||||
</p>
|
||||
<div class="message is-warning">
|
||||
<div class="message-header">
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
18
package.json
18
package.json
@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "bulma",
|
||||
"version": "0.1.2",
|
||||
"version": "0.2.0",
|
||||
"homepage": "http://bulma.io",
|
||||
"author": "jgthms <bbxdesign@gmail.com>",
|
||||
"author": "Jeremy Thomas <bbxdesign@gmail.com> (http://jgthms.com)",
|
||||
"description": "Modern CSS framework based on Flexbox",
|
||||
"main": "bulma.sass",
|
||||
"repository": {
|
||||
@ -30,17 +30,21 @@
|
||||
"build": "npm run build-clean && npm run build-sass && npm run build-autoprefix",
|
||||
"build-autoprefix": "postcss --use autoprefixer --output css/bulma.css css/bulma.css",
|
||||
"build-clean": "rm -rf css",
|
||||
"build-sass": "node-sass --output-style expanded --source-map true --output css/ bulma.sass --outFile css/bulma.css",
|
||||
"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
|
||||
"deploy": "npm run build && npm run docs",
|
||||
"docs": "npm run docs-sass && npm run docs-autoprefix",
|
||||
"docs-autoprefix": "postcss --use autoprefixer --output docs/css/bulma-docs.css docs/css/bulma-docs.css",
|
||||
"docs-sass": "node-sass --output-style expanded --output docs/css/ docs/bulma-docs.sass --outFile docs/css/bulma-docs.css",
|
||||
"pre-push": "npm run build && git add css && git commit --amend --no-edit",
|
||||
"docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css",
|
||||
"start": "npm run build-sass -- --watch",
|
||||
"start-docs": "npm run docs-sass -- --watch"
|
||||
"start-docs": "npm run docs-sass -- --watch",
|
||||
"start-test": "npm run test-sass -- --watch",
|
||||
"test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css"
|
||||
},
|
||||
"files": [
|
||||
"css",
|
||||
"sass",
|
||||
"bulma.sass"
|
||||
"bulma.sass",
|
||||
"LICENSE",
|
||||
"README.md"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "generic"
|
||||
@import "classes"
|
||||
@import "helpers"
|
||||
@import "minireset.sass"
|
||||
@import "generic.sass"
|
||||
@import "helpers.sass"
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
.block
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
|
||||
.container
|
||||
position: relative
|
||||
+desktop
|
||||
margin: 0 auto
|
||||
max-width: 960px
|
||||
// Modifiers
|
||||
&.is-fluid
|
||||
margin: 0 20px
|
||||
max-width: none
|
||||
+widescreen
|
||||
max-width: 1200px
|
||||
|
||||
.fa
|
||||
font-size: 21px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
@ -1,3 +1,8 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
$body-background: $white-ter !default
|
||||
|
||||
html
|
||||
background-color: $body-background
|
||||
font-size: $size-normal
|
||||
@ -55,8 +60,11 @@ code
|
||||
padding: 1px 2px 2px
|
||||
|
||||
hr
|
||||
border-top-color: $border
|
||||
margin: 40px 0
|
||||
background-color: $border
|
||||
border: none
|
||||
display: block
|
||||
height: 1px
|
||||
margin: 20px 0
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
|
||||
// Display
|
||||
|
||||
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
@ -104,4 +106,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
|
||||
padding: 0 !important
|
||||
|
||||
.is-unselectable
|
||||
@extend .unselectable
|
||||
+unselectable
|
||||
|
||||
81
sass/base/minireset.sass
Normal file
81
sass/base/minireset.sass
Normal file
@ -0,0 +1,81 @@
|
||||
/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
|
||||
// Blocks
|
||||
html,
|
||||
body,
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
blockquote,
|
||||
figure,
|
||||
fieldset,
|
||||
legend,
|
||||
textarea,
|
||||
pre,
|
||||
iframe,
|
||||
hr,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-size: 100%
|
||||
font-weight: normal
|
||||
|
||||
// List
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
// Form
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea
|
||||
margin: 0
|
||||
|
||||
// Box sizing
|
||||
html
|
||||
box-sizing: border-box
|
||||
|
||||
*
|
||||
box-sizing: inherit
|
||||
&:before,
|
||||
&:after
|
||||
box-sizing: inherit
|
||||
|
||||
// Media
|
||||
img,
|
||||
embed,
|
||||
object,
|
||||
audio,
|
||||
video
|
||||
height: auto
|
||||
max-width: 100%
|
||||
|
||||
// Iframe
|
||||
iframe
|
||||
border: 0
|
||||
|
||||
// Table
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
|
||||
td,
|
||||
th
|
||||
padding: 0
|
||||
text-align: left
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.card-header
|
||||
align-items: stretch
|
||||
box-shadow: 0 1px 2px rgba($black, 0.1)
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "card"
|
||||
@import "grid"
|
||||
@import "highlight"
|
||||
@import "level"
|
||||
@import "media"
|
||||
@import "menu"
|
||||
@import "message"
|
||||
@import "modal"
|
||||
@import "nav"
|
||||
@import "pagination"
|
||||
@import "panel"
|
||||
@import "tabs"
|
||||
@import "card.sass"
|
||||
@import "highlight.sass"
|
||||
@import "level.sass"
|
||||
@import "media.sass"
|
||||
@import "menu.sass"
|
||||
@import "message.sass"
|
||||
@import "modal.sass"
|
||||
@import "nav.sass"
|
||||
@import "pagination.sass"
|
||||
@import "panel.sass"
|
||||
@import "tabs.sass"
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.level-item
|
||||
.title,
|
||||
.subtitle
|
||||
@ -33,7 +36,7 @@
|
||||
justify-content: flex-end
|
||||
|
||||
.level
|
||||
@extend .block
|
||||
+block
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
code
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.media-number
|
||||
background-color: $background
|
||||
border-radius: 290486px
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.menu-nav
|
||||
a
|
||||
display: block
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import "../utilities/functions.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.message-body
|
||||
border: 1px solid $border
|
||||
border-radius: $radius
|
||||
@ -17,7 +20,7 @@
|
||||
border-top: none
|
||||
|
||||
.message
|
||||
@extend .block
|
||||
+block
|
||||
background-color: $background
|
||||
border-radius: $radius
|
||||
// Colors
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.modal-background
|
||||
+overlay
|
||||
background-color: rgba($black, 0.86)
|
||||
|
||||
.modal-content
|
||||
.modal-content,
|
||||
.modal-card
|
||||
margin: 0 20px
|
||||
max-height: calc(100vh - 160px)
|
||||
overflow: auto
|
||||
@ -15,7 +19,7 @@
|
||||
width: 640px
|
||||
|
||||
.modal-close
|
||||
@extend .delete
|
||||
+delete
|
||||
background: none
|
||||
height: 40px
|
||||
position: fixed
|
||||
@ -24,7 +28,6 @@
|
||||
width: 40px
|
||||
|
||||
.modal-card
|
||||
@extend .modal-content
|
||||
display: flex
|
||||
flex-direction: column
|
||||
max-height: calc(100vh - 40px)
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
$nav-height: 50px !default
|
||||
|
||||
// Components
|
||||
|
||||
.nav-toggle
|
||||
@extend .hamburger
|
||||
+hamburger($nav-height)
|
||||
// Responsiveness
|
||||
+tablet
|
||||
display: none
|
||||
@ -29,7 +34,7 @@
|
||||
|
||||
.nav-item a,
|
||||
a.nav-item
|
||||
color: $text
|
||||
color: $text-light
|
||||
&:hover
|
||||
color: $link-hover
|
||||
// Modifiers
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.pagination
|
||||
align-items: center
|
||||
display: flex
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.panel-icon
|
||||
+fa(14px, 16px)
|
||||
color: $text-light
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
@import "../utilities/mixins.sass"
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.tabs
|
||||
@extend .block
|
||||
@extend .unselectable
|
||||
+block
|
||||
+unselectable
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
@import "../utilities/variables.sass"
|
||||
|
||||
.box
|
||||
@extend .block
|
||||
+block
|
||||
background-color: $white
|
||||
border-radius: $radius-large
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user