maxmx / bootstrap-stylus Goto Github PK
View Code? Open in Web Editor NEWPort of Bootstrap to Stylus
License: MIT License
Port of Bootstrap to Stylus
License: MIT License
The bower.json has a typo I think. At least I cannot install it via bower:
This part:
"main": "stylus/boostrap.styl",
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.
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.
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.
Can I just use the style sheets by themselves, I have the original bootstrap img and js files.
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
.
responsive-navbar.styl not work with variables in @ media
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?
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.
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
I'd like to fetch the 3.2.0 release via bower but the commit hasn't yet been tagged.
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.
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;
Hi,
The navbar is with bug in Mobile when you put navbar-right
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)
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.
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.
Another project is listed on npm as bootstrap-stylus, but is out of date. Can you publish this project?
Thank you.
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.
Any plans to port the upcoming Bootstrap 4 to Stylus?
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 "
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
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?
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?
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;
}
Getting the below error when I run bootstrap-stylus 3.2 through gulp-stylus.
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 "&&"
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
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 @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?
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...
npm version of bootstrap-styl is still 3.2.0
Could you please update it to 3.3.1 ?
Many thanks :-)
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.
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.
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...
Update please
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.
…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: '–';
}
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.
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()
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...
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.
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
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
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;
}
}
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.
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.
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
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"
...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.