Comments (29)
Yup, I'll translate it to stylus as soon as its officially out.
from bootstrap-stylus.
Sweet! Looking forward to it.
from bootstrap-stylus.
Nice work, I also hope to see the upgrade to stylus :)
from bootstrap-stylus.
👍
from bootstrap-stylus.
A heads up, v3 is moving from CSS reset to normalize.css. I've ported it here, I was porting v3 sometime ago but am moving towards styl and rework instead.
Also you will encounter some problems in media queries as stylus does not currently support variables as arguments in media queries (which there is a lot of in v3), there's offcourse a lot of really messy workarounds.
from bootstrap-stylus.
Thanks for the heads up, do you have any pointers fr the workarounds for supporting the variables in the media queries?
from bootstrap-stylus.
Sort-off, there's a few workarounds that you can find by browsing issues (which I have attached to this comment) in the Stylus repo. The solution I had was creating a media mixin, however I wasn't really happy with it.
My solution
// media
media(args...)
output = null
for arg in args
// check for tuple
if arg[1]
push(output,unquote('(%s: %s)' % (arg[0] arg[1])))
else
push(output,unquote(arg))
unquote(s('%s',output))
Which can be used like this:
$_media = media(screen,'and',(min-width $screen-small))
@media $_media
generate-large-grid-columns($grid-columns)
Besides the problem with @media queries Stylus is limited in that you can't write mixins as selectors, I had envisioned something like this:
// this does NOT work!
media(screen,'and',(min-width $screen-small))
generate-large-grid-columns($grid-columns)
// neither does this:
@media media(screen,'and',(min-width $screen-small))
generate-large-grid-columns($grid-columns)
Relevant Stylus issues:
- Executing functions in selectors (related to @media parameter passing support)
- Variables inside @media declarations
- Storing media queries in variables / mixins?
Final Thoughts
These issues have been open for a while and the pull requests have largely been ignored. I can only guess that the reason is that TJHolowaychuk is too busy and is more interested in developing Styl and Rework.
Being somewhat of a hipster, I decided to abandon my stylus port of v3 to stylus and work on styl/rework projects (plugins and libraries).
from bootstrap-stylus.
BS 3 is out.
from bootstrap-stylus.
Very interesting, will try soon
from bootstrap-stylus.
Where are we on 3.0? Looking to upgrade.
from bootstrap-stylus.
I'll be back from vacation on August 8th so in the following days.
On 2013-08-01, at 15:49, abrkn [email protected] wrote:
Where are we on 3.0? Looking to upgrade.
—
Reply to this email directly or view it on GitHub.
from bootstrap-stylus.
I'll wait a bit for final release before making a translation seeing how the current release seems to be constantly updated.
from bootstrap-stylus.
Thanks maxmx, can't wait to try it out.
from bootstrap-stylus.
Will new version make use of nib methods or it will use custom (mixins) functions?
from bootstrap-stylus.
Allright release candidates are done, expect v3 in a few days.
from bootstrap-stylus.
I'll try to make it nib-dependent
from bootstrap-stylus.
Great news ! Thank you
from bootstrap-stylus.
I'm working on a project that really needs BS3, but it uses stylus. Could you publish your progress with the port in a separate branch so I could pull from it (and maybe contribute)?
from bootstrap-stylus.
+1 for branch updates, if your lazy just add -A changes.
Btw I'm working on a less to stylus 'parser', it uses the less CSS parser if anyone's interested is using or contributing.
from bootstrap-stylus.
Ssup dudes, I released it, I'm sure there are still some bugs left, but I ran the compiled css on the documentation site and everything looked good so far.
Also, I kept the mixins in instead of using nib, it was the easiest way to release this as fast as possible.
Please contribute if you find anything.
from bootstrap-stylus.
@maxmx Could you please tag the release so that bower can resolve the new version?
I'm having a bad "No tag found that was able to satisfy 3.0.0" day :)
from bootstrap-stylus.
@liqweed Done!
from bootstrap-stylus.
Works!
Thanks 👍
from bootstrap-stylus.
Everything fine on our end. Thanks !
I just had a max call stack error in the mixins
scale(ratio) {
-webkit-transform: scale(ratio);
-ms-transform: scale(ratio); // IE9+
transform: scale(ratio);
}
Guess it'll be the same for rotate and other as well ?
from bootstrap-stylus.
Right, its probably not used in bootstrap but you used it somewhere, I'll fix these soon.
from bootstrap-stylus.
@liqweed I re-tagged the release with some bug fixes, I'd rather keep the 3.0.0 version so I deleted the tag and recreated it, you should update with bower if needed (especially if you were using any of the custom mixins as @getvega pointed out)
from bootstrap-stylus.
@maxmx np, thanks for the heads up.
btw, I had a problem importing Bootstrap's theme.styl - would this by any chance address that?
from bootstrap-stylus.
Yes i gave some love to the overlooked theme.styl file and even gave it a separate build using grunt.
On 2013-08-29, at 7:15, liqweed [email protected] wrote:
@maxmx np, thanks for the heads up.
btw, I had a problem importing Bootstrap's theme.styl - would this by any chance address that?
—
Reply to this email directly or view it on GitHub.
from bootstrap-stylus.
@skw where can I find your less to stylus parser?
Awesome work everyone who built this. (@maxmx and party) +++1
from bootstrap-stylus.
Related Issues (20)
- Conflicting module names HOT 9
- @require mixins in modules for better dependency management HOT 2
- @extend .clearfix in mixins HOT 3
- Invalid import path in index.styl HOT 10
- Block-grid for Bootstrap HOT 5
- Failed to locate @import file bootstrap/variables.styl HOT 3
- Why imported paths have "bootstrap" folder? HOT 4
- Import font files HOT 1
- navbar build fails HOT 5
- Tag v3.3.6 ?
- index.styl suppose under root? HOT 14
- Stylus bootstrap loaded but not compiled with Webpack HOT 18
- How would i go about adding a XL grid breakpoint with this? HOT 2
- Is the relative path in `index.styl` wrong? HOT 3
- Make it possible to deploy to Webjars HOT 1
- Question: which files just for the Bootstrap grid? HOT 3
- Error with Webpack Can't resolve '../fonts/glyphicons HOT 7
- Webpack's CSS Module and PostCSS loaders underisbly applied on Bootstrap as well
- Index.sty failed to locate imports HOT 1
- bootstrap 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-stylus.