library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:jgthms/bulma

Browse Source
This commit is contained in:
Martin Angers 2016-02-09 19:52:50 -05:00
commit 70a8dd8b64
12 changed files with 451 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "bulma",
"version": "0.0.10",
"version": "0.0.12",
"homepage": "http://bulma.io",
"authors": [
"jgthms <bbxdesign@gmail.com>"

14
bulma.sass vendored
View File

@ -1,9 +1,9 @@
@charset "utf-8"
@import bulma/utilities/utilities
@import bulma/config/variables
@import bulma/config/generated-variables
@import bulma/base/base
@import bulma/elements/elements
@import bulma/components/components
@import bulma/layout/layout
@import "bulma/utilities/utilities"
@import "bulma/config/variables"
@import "bulma/config/generated-variables"
@import "bulma/base/base"
@import "bulma/elements/elements"
@import "bulma/components/components"
@import "bulma/layout/layout"

8
bulma/base/content.sass
View File

@ -1,4 +1,12 @@
.content
&.is-medium
font-size: $size-5
code
font-size: $size-6
&.is-large
font-size: $size-4
code
font-size: $size-5
&:not(:last-child)
margin-bottom: 20px
h1,

50
bulma/base/helpers.sass
View File

@ -1,3 +1,5 @@
// Alignment
.is-centered
text-align: center
@ -7,17 +9,59 @@
.is-right
text-align: right
// Display
.is-block
display: block
.is-disabled
pointer-events: none
.is-inline
display: inline
.is-flex
display: flex
// Pull
.is-clearfix
+clearfix
.is-pulled-left
float: left
.is-pulled-right
float: right
// Size
.is-fullwidth
width: 100%
// Visibility
.is-hidden-mobile
+mobile
display: none !important
.is-hidden-tablet
+tablet
display: none !important
.is-hidden-touch
+touch
display: none !important
.is-hidden-desktop
+desktop
display: none !important
// Other
.is-disabled
pointer-events: none
.is-marginless
margin: 0 !important
.is-unselectable
+unselectable

87
bulma/components/grid.sass
View File

@ -1,39 +1,90 @@
.column
+mobile
& + .column
margin-top: $column-gap
+tablet
flex: 1
& + .column
margin-left: $column-gap
&.is-double
flex: 2
&.is-triple
flex: 3
&.is-quadruple
flex: 4
&.is-half
padding: 10px
.columns.is-mobile > &.is-half
flex: none
width: 50%
&.is-third
.columns.is-mobile > &.is-third
flex: none
width: 33.3333%
&.is-quarter
.columns.is-mobile > &.is-quarter
flex: none
width: 25%
@for $i from 1 through 11
&.is-#{$i}
.columns.is-mobile > &.is-#{$i}-mobile
flex: none
width: ($i / 12) * 100%
+mobile
&.is-half-mobile
flex: none
width: 50%
&.is-third-mobile
flex: none
width: 33.3333%
&.is-quarter-mobile
flex: none
width: 25%
@for $i from 1 through 11
&.is-#{$i}-mobile
flex: none
width: ($i / 12) * 100%
+tablet
&.is-half,
&.is-half-tablet
flex: none
width: 50%
&.is-third,
&.is-third-tablet
flex: none
width: 33.3333%
&.is-quarter,
&.is-quarter-tablet
flex: none
width: 25%
@for $i from 1 through 11
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: ($i / 12) * 100%
+desktop
&.is-half-desktop
flex: none
width: 50%
&.is-third-desktop
flex: none
width: 33.3333%
&.is-quarter-desktop
flex: none
width: 25%
@for $i from 1 through 11
&.is-#{$i}-desktop
flex: none
width: ($i / 12) * 100%
.columns
margin-left: -10px
margin-right: -10px
margin-top: -10px
&:last-child
margin-bottom: -10px
&:not(:last-child)
margin-bottom: $column-gap
margin-bottom: 10px
&.is-mobile
display: flex
+tablet
&:not(.is-desktop)
display: flex
+desktop
&.is-desktop
display: flex
&.is-gapless
& > .column + .column
&:not(:last-child)
margin: 0 0 20px
& > .column
margin: 0
padding: 0
&.is-multiline
flex-wrap: wrap
&.is-vcentered
align-items: center
&.is-grid

2
bulma/config/generated-variables.sass
View File

@ -31,7 +31,7 @@ $text-strong: $grey-darker
// Code
$code: $info
$code: $red
$code-background: $background
$pre: $text

2
bulma/elements/titles.sass
View File

@ -34,6 +34,8 @@
.subtitle
font-size: $size-medium
line-height: 1.125
& + .title
margin-top: -20px
strong
color: $text-strong
font-weight: 400

349
css/bulma.css vendored
View File

@ -220,7 +220,7 @@ a:hover {
code {
background: #f5f7fa;
color: #42afe3;
color: #ed6c63;
font-size: 12px;
font-weight: normal;
padding: 1px 2px 2px;
@ -300,6 +300,22 @@ table th {
vertical-align: top;
}
.content.is-medium {
font-size: 18px;
}
.content.is-medium code {
font-size: 14px;
}
.content.is-large {
font-size: 24px;
}
.content.is-large code {
font-size: 18px;
}
.content:not(:last-child) {
margin-bottom: 20px;
}
@ -624,14 +640,60 @@ table th {
display: block;
}
.is-disabled {
pointer-events: none;
}
.is-inline {
display: inline;
}
.is-flex {
display: flex;
}
.is-clearfix:after {
clear: both;
content: " ";
display: table;
}
.is-pulled-left {
float: left;
}
.is-pulled-right {
float: right;
}
.is-fullwidth {
width: 100%;
}
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none !important;
}
}
@media screen and (min-width: 769px) {
.is-hidden-tablet {
display: none !important;
}
}
@media screen and (max-width: 979px) {
.is-hidden-touch {
display: none !important;
}
}
@media screen and (min-width: 980px) {
.is-hidden-desktop {
display: none !important;
}
}
.is-disabled {
pointer-events: none;
}
.is-marginless {
margin: 0 !important;
}
@ -1611,6 +1673,10 @@ table th {
line-height: 1.125;
}
.subtitle + .title {
margin-top: -20px;
}
.subtitle strong {
color: #222324;
font-weight: 400;
@ -2166,98 +2232,299 @@ table th {
color: white;
}
@media screen and (max-width: 768px) {
.column + .column {
margin-top: 20px;
}
}
@media screen and (min-width: 769px) {
.column {
flex: 1;
padding: 10px;
}
.column + .column {
margin-left: 20px;
}
.column.is-double {
flex: 2;
}
.column.is-triple {
flex: 3;
}
.column.is-quadruple {
flex: 4;
}
.column.is-half {
.columns.is-mobile > .column.is-half {
flex: none;
width: 50%;
}
.column.is-third {
.columns.is-mobile > .column.is-third {
flex: none;
width: 33.3333%;
}
.column.is-quarter {
.columns.is-mobile > .column.is-quarter {
flex: none;
width: 25%;
}
.column.is-1 {
.columns.is-mobile > .column.is-1-mobile {
flex: none;
width: 8.33333%;
}
.column.is-2 {
.columns.is-mobile > .column.is-2-mobile {
flex: none;
width: 16.66667%;
}
.column.is-3 {
.columns.is-mobile > .column.is-3-mobile {
flex: none;
width: 25%;
}
.column.is-4 {
.columns.is-mobile > .column.is-4-mobile {
flex: none;
width: 33.33333%;
}
.column.is-5 {
.columns.is-mobile > .column.is-5-mobile {
flex: none;
width: 41.66667%;
}
.column.is-6 {
.columns.is-mobile > .column.is-6-mobile {
flex: none;
width: 50%;
}
.column.is-7 {
.columns.is-mobile > .column.is-7-mobile {
flex: none;
width: 58.33333%;
}
.column.is-8 {
.columns.is-mobile > .column.is-8-mobile {
flex: none;
width: 66.66667%;
}
.column.is-9 {
.columns.is-mobile > .column.is-9-mobile {
flex: none;
width: 75%;
}
.column.is-10 {
.columns.is-mobile > .column.is-10-mobile {
flex: none;
width: 83.33333%;
}
.column.is-11 {
.columns.is-mobile > .column.is-11-mobile {
flex: none;
width: 91.66667%;
}
@media screen and (max-width: 768px) {
.column.is-half-mobile {
flex: none;
width: 50%;
}
.column.is-third-mobile {
flex: none;
width: 33.3333%;
}
.column.is-quarter-mobile {
flex: none;
width: 25%;
}
.column.is-1-mobile {
flex: none;
width: 8.33333%;
}
.column.is-2-mobile {
flex: none;
width: 16.66667%;
}
.column.is-3-mobile {
flex: none;
width: 25%;
}
.column.is-4-mobile {
flex: none;
width: 33.33333%;
}
.column.is-5-mobile {
flex: none;
width: 41.66667%;
}
.column.is-6-mobile {
flex: none;
width: 50%;
}
.column.is-7-mobile {
flex: none;
width: 58.33333%;
}
.column.is-8-mobile {
flex: none;
width: 66.66667%;
}
.column.is-9-mobile {
flex: none;
width: 75%;
}
.column.is-10-mobile {
flex: none;
width: 83.33333%;
}
.column.is-11-mobile {
flex: none;
width: 91.66667%;
}
}
@media screen and (min-width: 769px) {
.column.is-half, .column.is-half-tablet {
flex: none;
width: 50%;
}
.column.is-third, .column.is-third-tablet {
flex: none;
width: 33.3333%;
}
.column.is-quarter, .column.is-quarter-tablet {
flex: none;
width: 25%;
}
.column.is-1, .column.is-1-tablet {
flex: none;
width: 8.33333%;
}
.column.is-2, .column.is-2-tablet {
flex: none;
width: 16.66667%;
}
.column.is-3, .column.is-3-tablet {
flex: none;
width: 25%;
}
.column.is-4, .column.is-4-tablet {
flex: none;
width: 33.33333%;
}
.column.is-5, .column.is-5-tablet {
flex: none;
width: 41.66667%;
}
.column.is-6, .column.is-6-tablet {
flex: none;
width: 50%;
}
.column.is-7, .column.is-7-tablet {
flex: none;
width: 58.33333%;
}
.column.is-8, .column.is-8-tablet {
flex: none;
width: 66.66667%;
}
.column.is-9, .column.is-9-tablet {
flex: none;
width: 75%;
}
.column.is-10, .column.is-10-tablet {
flex: none;
width: 83.33333%;
}
.column.is-11, .column.is-11-tablet {
flex: none;
width: 91.66667%;
}
}
@media screen and (min-width: 980px) {
.column.is-half-desktop {
flex: none;
width: 50%;
}
.column.is-third-desktop {
flex: none;
width: 33.3333%;
}
.column.is-quarter-desktop {
flex: none;
width: 25%;
}
.column.is-1-desktop {
flex: none;
width: 8.33333%;
}
.column.is-2-desktop {
flex: none;
width: 16.66667%;
}
.column.is-3-desktop {
flex: none;
width: 25%;
}
.column.is-4-desktop {
flex: none;
width: 33.33333%;
}
.column.is-5-desktop {
flex: none;
width: 41.66667%;
}
.column.is-6-desktop {
flex: none;
width: 50%;
}
.column.is-7-desktop {
flex: none;
width: 58.33333%;
}
.column.is-8-desktop {
flex: none;
width: 66.66667%;
}
.column.is-9-desktop {
flex: none;
width: 75%;
}
.column.is-10-desktop {
flex: none;
width: 83.33333%;
}
.column.is-11-desktop {
flex: none;
width: 91.66667%;
}
}
.columns {
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
}
.columns:last-child {
margin-bottom: -10px;
}
.columns:not(:last-child) {
margin-bottom: 20px;
margin-bottom: 10px;
}
.columns.is-mobile {
display: flex;
}
@media screen and (min-width: 769px) {
.columns {
.columns:not(.is-desktop) {
display: flex;
}
}
.columns.is-gapless > .column + .column {
@media screen and (min-width: 980px) {
.columns.is-desktop {
display: flex;
}
}
.columns.is-gapless:not(:last-child) {
margin: 0 0 20px;
}
.columns.is-gapless > .column {
margin: 0;
padding: 0;
}
.columns.is-multiline {
flex-wrap: wrap;
}
.columns.is-vcentered {

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css.map
View File

File diff suppressed because one or more lines are too long

6
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bulma",
"version": "0.0.10",
"version": "0.0.12",
"homepage": "http://bulma.io",
"author": "jgthms <bbxdesign@gmail.com>",
"description": "Modern CSS framework based on Flexbox",
@ -21,8 +21,8 @@
"url": "https://github.com/jgthms/bulma/issues"
},
"devDependencies": {
"node-sass": "~3.4.2",
"captain-git-hook": "~1.0.5"
"captain-git-hook": "~1.0.5",
"node-sass": "~3.4.2"
},
"scripts": {
"build": "npm run clean && npm run build-sass && npm run build-sass-min",