bulma_sass 0.7.1+1

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 80

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:
  build_runner: ^0.8.2+2
  sass_builder: ^1.2.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

Dart package is released under MIT license.

Original Code copyright 2017 Jeremy Thomas and released under the MIT license.

Changelog

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

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  bulma_sass: ^0.7.1+1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or flutter packages get. Check the docs for your editor to learn more.

Version Uploaded Documentation Archive
0.7.1+1 Aug 7, 2018 Go to the documentation of bulma_sass 0.7.1+1 Download bulma_sass 0.7.1+1 archive
0.7.1 May 11, 2018 Go to the documentation of bulma_sass 0.7.1 Download bulma_sass 0.7.1 archive
0.7.0 Apr 17, 2018 Go to the documentation of bulma_sass 0.7.0 Download bulma_sass 0.7.0 archive
0.6.2+3 Mar 30, 2018 Go to the documentation of bulma_sass 0.6.2+3 Download bulma_sass 0.6.2+3 archive
0.6.2+2 Feb 14, 2018 Go to the documentation of bulma_sass 0.6.2+2 Download bulma_sass 0.6.2+2 archive
0.6.2+1 Feb 12, 2018 Go to the documentation of bulma_sass 0.6.2+1 Download bulma_sass 0.6.2+1 archive
0.6.2 Feb 12, 2018 Go to the documentation of bulma_sass 0.6.2 Download bulma_sass 0.6.2 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on Aug 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.11.8

Platforms

Detected platforms: Flutter, web, other

No libraries.

Suggestions

The description is too short.

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Package is pre-v1 release.

While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction of the API.

Maintain an example.

None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use bulma_sass.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
Dev dependencies
build_runner >=0.8.2
git >=0.5.1
pub_semver >=1.4.1
sass_builder >=1.2.0