bulma_sass 0.7.5
bulma_sass #
Bulma is a modern SCSS framework based on Flexbox.
Example #
You can find basic example usage of the package over at bulma_sass_example
Usage #
Add Sass and Builder runner to the project pubspec.yaml:
dev_dependencies:
sass_builder: ^2.1.3
build_runner: ^1.0.0
Create a SCSS file and import bulma and edit any variable you need:
// 1. Import the initial variables
@import "package:bulma_sass/scss/utilities/initial-variables";
@import "package:bulma_sass/scss/utilities/functions";
// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;
// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);
// 5. Add new color variables to the color map.
@import "package:bulma_sass/scss/utilities/derived-variables";
$addColors: (
"twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert)
);
$colors: map-merge($colors, $addColors);
// 6. Import the rest of Bulma
@import "package:bulma_sass/scss/bulma";
Alternatively If you want to customize which bulma parts are included to minimize the end size of your css, you can use the below and simply uncomment the parts you want to include.
// Utilities
@import "package:bulma_sass/scss/utilities/initial-variables";
@import "package:bulma_sass/scss/utilities/functions";
@import "package:bulma_sass/scss/utilities/derived-variables";
@import "package:bulma_sass/scss/utilities/animations";
@import "package:bulma_sass/scss/utilities/mixins";
@import "package:bulma_sass/scss/utilities/controls";
// Custom Variables
// Base
@import "package:bulma_sass/scss/base/minireset";
@import "package:bulma_sass/scss/base/generic";
@import "package:bulma_sass/scss/base/helpers";
// Elements
// @import "package:bulma_sass/scss/elements/box";
// @import "package:bulma_sass/scss/elements/button";
// @import "package:bulma_sass/scss/elements/container";
// @import "package:bulma_sass/scss/elements/content";
// @import "package:bulma_sass/scss/elements/form";
// @import "package:bulma_sass/scss/elements/icon";
// @import "package:bulma_sass/scss/elements/image";
// @import "package:bulma_sass/scss/elements/notification";
// @import "package:bulma_sass/scss/elements/progress";
// @import "package:bulma_sass/scss/elements/table";
// @import "package:bulma_sass/scss/elements/tag";
// @import "package:bulma_sass/scss/elements/title";
// @import "package:bulma_sass/scss/elements/other";
// Components
// @import "package:bulma_sass/scss/components/breadcrumb";
// @import "package:bulma_sass/scss/components/card";
// @import "package:bulma_sass/scss/components/dropdown";
// @import "package:bulma_sass/scss/components/level";
// @import "package:bulma_sass/scss/components/media";
// @import "package:bulma_sass/scss/components/menu";
// @import "package:bulma_sass/scss/components/message";
// @import "package:bulma_sass/scss/components/modal";
// @import "package:bulma_sass/scss/components/navbar";
// @import "package:bulma_sass/scss/components/pagination";
// @import "package:bulma_sass/scss/components/panel";
// @import "package:bulma_sass/scss/components/tabs";
// Grid
@import "package:bulma_sass/scss/grid/columns";
// @import "package:bulma_sass/scss/grid/tiles";
// Layout
// @import "package:bulma_sass/scss/layout/hero";
// @import "package:bulma_sass/scss/layout/section";
// @import "package:bulma_sass/scss/layout/footer";
// Custom SCSS
Documentation #
Documentation for the Bulma framework can be found here Bulma Documentation
Bugs and Features #
Report problems with this package to https://github.com/indiealexh/dart_bulma_sass
Report problems with the core framework to https://github.com/jgthms/bulma
Copyright and license #
Dart package is released under MIT license.
Original Code copyright 2017 Jeremy Thomas and released under the MIT license.
Changelog #
0.7.5 #
- Update dart bulma_sass to bulma 0.7.5
- Upgrade tools to use latest packages
0.7.1+1 #
- Update Pubspec to enable use on Dart 2
0.7.1 #
- Update dart bulma_sass to bulma 0.7.1
0.7.0 #
- Update dart bulma_sass to bulma 0.7.0
0.6.2+1 #
- Update .gitignore to exclude unwanted files
0.6.2 #
- Initial version, based on Bulma 0.6.2
Example #
You can find basic example usage of the package over at bulma_sass_example
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
bulma_sass: ^0.7.5
2. Install it
You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter pub get
Alternatively, your editor might support pub get
or flutter pub get
.
Check the docs for your editor to learn more.
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
68
|
Health:
Code health derived from static analysis.
[more]
|
100
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
91
|
Overall:
Weighted score of the above.
[more]
|
82
|
We analyzed this package on Dec 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.1
- pana: 0.12.21
Maintenance suggestions
The package description is too short. (-9 points)
Add more detail to the description
field of pubspec.yaml
. Use 60 to 180 characters to describe the package, what it does, and its target use case.
Dependencies
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=2.0.0 <3.0.0 | ||
Dev dependencies | |||
build_runner | ^1.0.0 | ||
git | ^1.0.0 | ||
pub_semver | ^1.4.2 | ||
sass_builder | ^2.1.3 |