Sass @include != Stylus @extend
Example

container-fixed($gutter = $grid-gutter-width)
  margin-right auto
  margin-left auto
  padding-left ($gutter / 2)
  padding-right ($gutter / 2)
  @extend .clearfix

I think it must be that

container-fixed($gutter = $grid-gutter-width)
  margin-right auto
  margin-left auto
  padding-left ($gutter / 2)
  padding-right ($gutter / 2)
  clearfix()

Are you considering adding future nib integration? I realize it might be a pain but if you could get your parser doing most (all) the work it wouldn't be too bad.

-S

Frameworks like nib and kouto-swiss are added to stylus via stylus's use method. It enables the use of node's require function to include the framework and add it to stylus rather than importing from bower_components or node_modules from within a stylus file.

var bootstrap = require('bootstrap-stylus');
stylus(str).use(bootstrap());

Wrapping the framework in a stylus plugin may also enable you guys to better leverage stylus.

I'm using Webpack, so attempted to include this bootstrap in a stylus file.

@import '../../node_modules/bootstrap-styl/stylus/bootstrap'

Error:

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./src/css/main.styl
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /Users/foobar/guesstimate/src/css
 @ ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./src/css/main.styl 6:4136-4188 6:4211-4263

When I attempt to import bootstrap directly (@import 'bootstrap') it fails to locate the file.

Code here: https://github.com/OAGr/guesstimate/blob/3a97afb32e19efb2c0937a6ee4a07f796905bbbe/src/css/main.styl

I was able to fix this by commenting out the @import glyphicons in the bootstrap.styl file, but this is obviously a hack.

Hi, when I compile the Bootstrap.stylus. The version I see at the top of the compiled file is 2.3.0. Are you sure it's 2.3.2?

Hey there. Just realized that the opacity mixin is still there. This causes: opacity: 0.5 for example to be caught by the mixin rather than something like auto-prefixer.

Auto-prefixer handles opacity so I think it should be removed.

I only caught this because I tried attaching an !important to one of my opacity properties and it didn't work because it was being intercepted by the mixin and removing the flag.

I've opened a issue in express-coffee and would like to put a pull request through there, however I was curious if there were any plans to turn this into NPM module, as many others in the past have done.

The benefit would be that dependency management would be taken care of by NPM/package.json instead of the maintainers of each project. However this project is not necessarily tied to node.js so I understand if you're hesitant.

-Shaun

Building the js files for dist into min.js yields this error:

'Popover requires tooltip.js'

I replaced the nice concise *.js with explicitly naming each of the files and that fixed it for me.

Hi guys, this might not be exactly an issue, but it is somehow confusing. Why there are 3 different tags for version 3.3.1 (two of them actually with a major set to 4)?

https://github.com/Acquisio/bootstrap-stylus/tree/3.1.1
https://github.com/Acquisio/bootstrap-stylus/tree/4.0.0
https://github.com/Acquisio/bootstrap-stylus/tree/4.0.1

Hey I didn't know where to ask this because there wasn't a group or anything but I'm trying to get my project set up with bootstrap-stylus and I'm using grunt-contrib-stylus. What is the best way to import bootstrap before all of the other stylus using the grunt "import" option?

I was hoping to do something like this

grunt.initConfig
stylus:
options:
import: ['bootstrap', 'nib']
compile:
files:
'build/style.css' : 'app/assets/styles/*/.styl'

but that breaks because it can't find bootstrap.

p.s. Sorry I'm asking this here...

package.json declares version 4.0.0, but bower.json declares 3.3.1. The following error message is printed during Bower installation:

Version declared in the json (3.3.1) is different than the resolved one (4.0.0)

Hey @bruno-c Could you check with Acquisio if it is okay if I can still have admin rights on bootstrap stylus so that I can continue to maintain it and merge pull requests?

Update please

Right around where props are given to a guy named dhg in the code comments, that stylus file breaks our express app. Yadadamaen, express/stylus is ready to bitch on those maneuvers and can't handle whatever selection ["span"] thing hits at line 551 of the mixins.styl. Also being brought up now is a different, more important, issue for contemplation. The ballers who put together bootstrap are using fonts for icons. After I loaded those in at first I had double vision, icons appeared twice and when I took out the sprites, suddenly the font icons looked much better than before.

Hi, i try to import this to my project in sails js.
I don't know where put this code:

var bootstrap = require('bootstrap-styl'),
stylus = require('stylus');

function compile(str) {
return stylus(str)
.use(bootstrap());
}

i have this:

thanks.

The following code is doesn't appear to actually bring in the nav-tabs-justified mixin:

&.nav-justified {
  nav-justified();
  nav-tabs-justified();
}

If I just use just use nav nav-tabs nav-justified as shown in the docs, I get a border under the active tab. I have to explicitly add the nav-tabs-justified class to get the correct behavior, but that shouldn't be necessary (and isn't in standard Bootstrap).

Looking at the official Bootrstrap CSS, none of the following end up in the compiled css from Stylus:

.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}

So, looks like the vendor prefixes got included back in, which because of transparent mixins breaks actual stylus files.

Example rule:
transform: scale( 1 )

That's valid CSS. But the scale mixin is stepping on top of it and returning the error argument "ratioY" required for scale(ratioX, ratioY).

3.2.0 is currently not usable until that's changed.

ParseError: /home/vagrant/angular-express-coffee/node_modules/bootstrap-styl/bootstrap/mixins/image.styl:27
23| //only screen and (-webkit-min-device-pixel-ratio 2),
24| //only screen and (min--moz-device-pixel-ratio 2),
25| //only screen and (-o-min-device-pixel-ratio 2/1),
26| only screen and (min-device-pixel-ratio 2),

27| only screen and (min-resolution 192dpi),
28| only screen and (min-resolution 2dppx)
29| background-image url("{$file-2x}")
30| background-size $width-1x $height-1x

expected "(", got "newline"

at Parser.error (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:230:11)
at Parser.expect (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:258:12)
at Parser.queryExpr (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:976:10)
at Parser.query (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:964:23)
at Parser.queries (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:931:25)
at Parser.media (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:917:38)
at Parser.stmt (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:695:26)
at Parser.statement (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:603:21)
at Parser.block (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:763:21)
at Parser.functionDefinition (/home/vagrant/angular-express-coffee/node_modules/stylus/lib/parser.js:1546:21)

I'm using stylus middleware in my express.

This is currently subtracting the horizontal value from the vertical which causes the navbar-nav to overlap.

https://github.com/Acquisio/bootstrap-stylus/blob/master/stylus/navbar.styl#L206

margin: ($navbar-padding-vertical / 2) -($navbar-padding-horizontal);

margin: -7.5px;

This is how I fixed it in my app:

margin: ($navbar-padding-vertical / 2) (-($navbar-padding-horizontal));

margin: 7.5px 15px;

When compiling into CSS, it gives this error:

mixins.styl:805 801| for i in 1..$grid-columns 802| .col-xs-{i}, .col-sm-{i}, .col-md-{i}, .col-lg-{i} 803| @extend $column-properties 804| > 805| 806| make-grid-col-float(class) 807| .col-{class}-1 808| float left cannot perform $grid-gutter-width / 2 at "$column-properties " 

Hello my friend.

Can you add the boostrap.js and boostrap.min.js in the js folder, becouse i can't charge only one js file.

Thaks bro.

It would be nice to be able to install bootstrap-styl from the NPM registry.

Thanks for porting this beast, not an easy task. It's appreciated.

Looks like some of the code is prefixed already, so nib double prefixes those items.

I think it would make sense not to have any prefixes in the code, if nib is used.

e.g.
https://github.com/Acquisio/bootstrap-stylus/blob/master/stylus/progress-bars.styl

// Call animation for the active one
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

The grid system seems to be broken due to a different behavior of the @extend function in stylus 0.46.0.

In the make-grid-col-float mixin, you define columns 2-12 as extending column 1.
This is now applied correctly in the rest of the code, so that when you define the first column's width with the make-grid mixin, all other columns inherit it, resulting in all of them having a width of 8.3333333333333%.

Downgrading stylus to 0.45.1 seems to be the only way to make the grid system work again atm.

It would be nice for us newbs discovering mixins to include an example usage file. I'm including bootstrap like this:

// import bootstrap

@import "../components/bootstrap-stylus/stylus/bootstrap"


// styles

.view-container
  container-fixed()

It seems unnecessary to include all the default classes (.container, .row) that we're never going to use, but things didn't seem to work right when I just imported variables and mixins. Could you add a quick example on how to use this repo?

Bower doesn't see 4 digit version numbers as installable tags because if uses semver to determine that. bower/bower#118

bootstrap-stylus is currently at 3.1.1.2, but a bower install bootstrap-stylus installs 3.1.1. Is the intent to keep these versions hidden from bower or was this just an oversight?

I can install 3.1.1.2 directly by doing bower install git://github.com/Acquisio/bootstrap-stylus#3.1.1.2, but it would be great if I could get it by specifying ~3.1.1.

I recommend tagging the next release as 3.1.2 (or 3.2.0) so that bower can continue to install this library properly.

transform: rotate(5deg) will produce unexpected results because it triggers the bootstrap rotate mixin.

-webkit-transform:transform:rotate(5deg);;-moz-transform:transform:rotate(5deg);;-o-transform:transform:rotate(5deg);;-ms-transform:transform:rotate(5deg);;transform:transform:rotate(5deg)

nib already has a mixin for transform which produces the desired vendor prefixes, then rotate greedily takes over and replaces the property value with its own transform vendor prefixes.

I think stylus' ability to create mixes which map directly to property names like transform is very powerful but it might reveal a problem. Other dialects require you to specify when you are using a mixin like @include rotate(..) or +rotate(..) which gets around this problem.

I believe that if bootstrap-stylus wants to define globally scoped shorthand mixins for doing things like rotate they should atleast prefix the mixins bs-rotate or similar to avoid clobbering styles.

In this picture

the bottom version is using bootstrap-stylus forked from Acquisio and the top is using boostrap from the official site. Why is the alignment different? Anything I can do to tweak? I'd much rather use stylus for my entire site.

Just curious if you had plans to port this to the latest version of BS (3.0.4). Is there a simple task I can use to generate?

bootstrap-stylus has conflicting module names because they aren't under bootstrap namespace.

For example, an existing path containing a module named variables could already be established so bootstrap/variables doesn't get loaded in bootstrap/index.

To prevent this kind of conflict, the modules should be a full path to the module like:

...
@import "bootstrap/variables"
@import "bootstrap/mixins"
...

and in bootstrap/mixins/

...
@import "bootstrap/mixins/gradients"
...

Do you have any plans to upgrade to bootstrap 3.0 when it comes out? The rc has been out for a while, and I'm just curious if I can stick to your project.

I'd like to fetch the 3.2.0 release via bower but the commit hasn't yet been tagged.

…which makes is being treated as transparent mixin in code:

h2
    text-overflow '–'

surprisingly compiles to

h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

this can only be circumvented using @css { text-overflow: '–'; } instead which is ugly.

a fix that doesn’t break backwards-compatibility:

text-overflow()
    if arguments
        text-overflow arguments
    else
        overflow hidden
        white-space nowrap
        text-overflow ellipsis

with the test case

h1
    text-overflow()

h2
    text-overflow '–'

compiling to

h1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
h2 {
  text-overflow: '–';
}

Hi,

I've stuck with trying to import bootstrap and font-awesome together
I've tried different import order, and used bootstrap-styl as plugin, and niether one way are not working.

$icon-font-path ?= "../../../node_modules/bootstrap-styl/fonts/"
@import bootstrap

$fa-font-path   ?= "../../../node_modules/font-awesome-stylus/fonts/"
@import "font-awesome-stylus/stylus"

I got this error:

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader?paths=node_modules!./choboty/app/styles/app.styl
Module build failed: Error: /home/strongloop/node_modules/bootstrap-styl/bootstrap/type.styl:26:42
   22| h1, .h1,
   23| h2, .h2,
   24| h3, .h3
   25|   margin-top $line-height-computed
   26|   margin-bottom ($line-height-computed / 2)
------------------------------------------------^
   27| 
   28|   small,
   29|   .small

cannot perform $line-height-computed / 2
    at "h1" (/home/strongloop/node_modules/bootstrap-styl/bootstrap/type.styl:21:32)

    at Ident.Node.operate (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/nodes/node.js:234:15)
    at Ident.operate (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/nodes/ident.js:155:33)
    at CachedPathEvaluator.Evaluator.visitBinOp (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:563:28)
    at CachedPathEvaluator.Visitor.visit (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:153:18)
    at CachedPathEvaluator.Evaluator.visitExpression (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:626:26)
    at CachedPathEvaluator.Visitor.visit (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:153:18)
    at CachedPathEvaluator.Evaluator.visitExpression (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/evaluator.js:626:26)
    at CachedPathEvaluator.Visitor.visit (/home/strongloop/node_modules/stylus-loader/node_modules/stylus/lib/visitor/index.js:28:40)
 @ ./choboty/app/styles/app.styl 4:14-247 12:19-252

$line-height-computed is defined.

But if I exclude font-awesome-stylus - styles compiles ok

font-awesome-stylus 1.2.0
bootstrap-styl 4.0.3
webpack 1.7.3
stylus-loader 1.0.0

Any help appreciated. Thanks.

On the fourth line, on bower.json, "main": "stylus/boostrap.styl" is missing a 't'. It should be "main": "stylus/bootstrap.styl". This was breaking on Sprockets.
Thanks for the port, btw.

Curious why this happened. It's a pretty big breaking change and I'm sure many people won't be able to upgrade to using the new version without modifying a ton of code.

I base my projects on the bootstrap variables and use them in many other situations (such as $font-size-base, $line-height-computed, etc.

Was there a reason for unprefixed in the new version? It also has the potential to accidentally step on mixins/functions/etc...

when compiling a project i get this is chrome dev tools, although it seems to be working, im not sure if its a build error or something in the javascript itself

Uncaught Error: Popover requires tooltip.js 

Any plans to port the upcoming Bootstrap 4 to Stylus?

Because bootstrap-stylus requires nib, it's unclear how this should be set up when you are consuming it from bower. Using ember-cli and broccoli-stylus-single, bootstrap can't find nib when the project is attempting to compile stylus.

Regardless of the ember-cli use case, how are you supposed to consume bootstrap-stylus from bower? If it doesn't work currently, should there be an optional entry point like ./stylus/bootstrap-bower.styl that doesn't require nib directly, but assumes you've already imported it in your app?

/cc @trek

I get the following error with Stylus 0.52.2. It compiles fine in Stylus 0.52.0.

[14:54:29] gulp-notify: [Compile Error] ParseError in plugin 'gulp-stylus'
Message:
    .../node_modules/bootstrap-styl/bootstrap/type.styl:237:1
   233|
   234| // Abbreviations and acronyms
   235| abbr[title],
   236|
   237| // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
--------^
   238| abbr[data-original-title]
   239|   cursor help
   240|   border-bottom 1px dotted $abbr-border-color

unexpected ","

Details:
    filename: .../node_modules/bootstrap-styl/bootstrap/type.styl
    lineno: 237
    column: 1

Getting the below error when I run bootstrap-stylus 3.2 through gulp-stylus.

• Gulp stylus uses stylus 0.42.3
• Tried disabling nib

Also if I comment out this style, media queries don't work. Any ideas? I realise you've programmed this to work with Grunt, but version 3.0 worked fine. Many thanks in advance.

gulp-notify: [Compile Error] /websites/bluewatch/public_html/site-resources/bower_components/bootstrap-stylus/stylus/mixins/image.styl:32
   28|   only screen and (min-resolution 192dpi),
   29|   only screen and (min-resolution 2dppx)
   30|     background-image url("{$file-2x}")
   31|     background-size $width-1x $height-1x
 > 32| 

expected "indent", got "&&"

npm version of bootstrap-styl is still 3.2.0
Could you please update it to 3.3.1 ?

Many thanks :-)

Most of the modules have a dependency on a module in the mixins directory. But those dependencies have to be manually declared.

For example, if I wanted to use bootstrap/carousel, I'd have to write my stylus code like this:

@require "bootstrap/mixins/gradients"
@require "bootstrap/carousel"

It would be very helpful if the dependencies are declared/managed within the module that is being used. With the carousel example above, it just means @require "bootstrap/mixins/gradients" would be declared inside bootstrap/carousel.

The bower.json has a typo I think. At least I cannot install it via bower:
This part:
"main": "stylus/boostrap.styl",

Can I just use the style sheets by themselves, I have the original bootstrap img and js files.

responsive-navbar.styl not work with variables in @ media

Issues889

Another project is listed on npm as bootstrap-stylus, but is out of date. Can you publish this project?

Thank you.

When I install plugin I get mixin.styl with uncommented

// Transformations
rotate(degrees) {
  -webkit-transform: s("rotate(%s)", degrees);
      -ms-transform: s("rotate(%s)", degrees); // IE9+
          transform: s("rotate(%s)", degrees);
}
scale(ratio) {
  -webkit-transform: s("scale(%s)", ratio);
      -ms-transform: s("scale(%s)", ratio); // IE9+
          transform: s("scale(%s)", ratio);
}
translate(x, y) {
  -webkit-transform: s("translate(%s, %s)", x, y);
      -ms-transform: s("translate(%s, %s)", x, y); // IE9+
          transform: s("translate(%s, %s)", x, y);
}
skew(x, y) {
  -webkit-transform: s("skew(%s, %s)", x, y);
      -ms-transform: s("skewX(%s) skewY(%s)", x, y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: s("skew(%s, %s)", x, y);
}
translate3d(x, y, z) {
  -webkit-transform: s("translate3d(%s, %s, %s)", x, y, z);
          transform: s("translate3d(%s, %s, %s)", x, y, z);
}

rotateX(deg) {
  -webkit-transform: s("rotateX(%s)", deg);
      -ms-transform: s("rotateX(%s)", deg); // IE9 only
          transform: s("rotateX(%s)", deg);
}
rotateY(deg) {
  -webkit-transform: s("rotateY(%s)", deg);
      -ms-transform: s("rotateY(%s)", deg); // IE9 only
          transform: s("rotateY(%s)", deg);
}

It conflict with autoprefixer (I use it instead of nib) and I get something like transform: transform: rotate(90deg). How I can install plugin without transformation mixins?

Hi! Help needed. Can't figure how to use the package with gulp-stylus.

Couldn't find help in closed issues. gulp-stylus doesn't have a use func...

Hi,

The navbar is with bug in Mobile when you put navbar-right