bootstrap_sass 3.3.6 
bootstrap_sass: ^3.3.6 copied to clipboard
Sass source files to create bootstrap themes
bootstrap_sass #
This project contains all the bootstrap sass source files. This project will be useful to create new themes using sass.
bootstrap_sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.
Usage #
Create a new project with next structure:
[project_root]
├─ pubspec.yaml
├─ web
│ ├─ index.html
│ ├─ variables.scss
│ ├─ theme.scss
│ └─ ... other files and folders ...
└─ lib
└─ ... lib files and folders ...
In the pubspect.yaml file add the bootstrap_sass dependency and sass dependency, then you will need to add sass transformer (this is in charge of converting sass files into css).
...
depencencies:
...
bootstrap_sass: any
sass: any
...
transformers:
...
- sass
...
Then in variables.scss add the variables you want to modify
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #800625;
$gray-darker: lighten($gray-base, 13.5%); // #222
$gray-dark: lighten($gray-base, 20%); // #333
$gray: lighten($gray-base, 33.5%); // #555
$gray-light: lighten($gray-base, 60%); // #999
$gray-lighter: lighten($gray-base, 93.5%); // #eee
$brand-primary: #e72b42;
$brand-success: #73A839;
$brand-info: #033C73;
$brand-warning: #DD5600;
$brand-danger: #22afc7;
...
Then in the theme.scss add the styles you need to change.
@import 'variables' // variables should be before bootstrap to override variable values
@import 'packages/bootstrap_sass/stylesheets/bootstrap';
// Cerulean 3.3.5
// Bootswatch
// -----------------------------------------------------
@mixin btn-shadow($color){
@include gradient-vertical-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
filter: none;
border-bottom: 1px solid darken($color, 10%);
}
// Navbar =====================================================================
.navbar {
@include btn-shadow($navbar-default-bg);
filter: none;
@include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
&-default {
.badge {
background-color: #fff;
color: $navbar-default-bg;
}
}
&-inverse {
@include gradient-vertical-three-colors(lighten($navbar-inverse-bg, 8%), lighten($navbar-inverse-bg, 4%), 60%, darken($navbar-inverse-bg, 2%));
filter: none;
border-bottom: 1px solid darken($navbar-inverse-bg, 10%);
.badge {
background-color: #fff;
color: $navbar-inverse-bg;
}
}
.navbar-nav > li > a,
&-brand {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
}
...
Finally in the index.html you will add the link to theme.css as it follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- you could add bootstrap.css file -->
<link rel="stylesheet" href="packages/bootstrap_sass/sass/bootstrap.css">
<!-- you can also add theme.css -->
<link rel="stylesheet" href="theme.css">
</head>
<body>
<!-- ... content here ... -->
</body>
</html>
Credits #
bootstrap-sass has a number of major contributors:
- Thomas McDonald
- Tristan Harward
- Peter Gumeson
- Gleb Mazovetskiy
and a [significant number of other contributors][contrib].
Bugs and feature requests #
Have a bug or a feature request? Please open a new issue.
Copyright and license #
Code and documentation copyright 2011-2015 Twitter, Inc. Code released under the MIT license. Docs released under Creative Commons.
Metadata
Publisher
unverified uploader
Metadata
Sass source files to create bootstrap themes
Repository (GitHub)
View/report issues
License
MIT (LICENSE)
