Searching on libraries for Stylus I've only found Nib.
I was wondering HOW TO install and use Nib on Meteor. The docs for Nib specify how to use it on pure Node.js; what is the procedure on Meteor?
Also: are there any other libraries for Stylus on Meteor? This info has been really hard to find since the meteor docs don't say anything.
The docs don't say this, but nib is automatically installed when you meteor add stylus. Note that you will still need to #import 'nib' at the top of any .styl files where you want the nib extensions.
As for the last part of your question, I'm not aware of other libraries for stylus. If you have something specific in mind, please update the question.
check out flexbox based grid system with autoprefixer: http://s-grid.meteor.com
You can also use it with Grunt scaffold: https://github.com/juliancwirko/s-grid-grunt and as a standalone npm package: https://www.npmjs.com/package/s-grid
There is also some other packages which uses nib, autoprefixer etc.: https://atmospherejs.com/?q=stylus
Related
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
I am following this link:
Docs
Specifically:
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with the included Gruntfile as needed.
I have never used Gruntfile before. Can I use other tools to compile scss into css? Also, what the outcome of such compilation is going to be? A _custom.css that must be placed in the same folder where original bootstrap.css is?
Thanks for help.
While there is not an "official" Bootstrap 4 customizer like there was in 3.x, there are several tools that can do this. These all convert from SASS to CSS, and some provide a UI if you're not familiar with SASS.
Themestr.app Customizer
Bootply Customizer
Also see this answer for details on how to customize with CSS overrides or SASS.
You actually do not need to know too much about Grunt. Bootstrap 4 provides doc on how to setup build tools which can be found at,
https://v4-alpha.getbootstrap.com/getting-started/build-tools/#tooling-setup
Run grunt (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
My suggestion is to clone the Bootstrap Beta 4 from Github change the variable and rebuild using the reconfigure gruntfile.
https://github.com/twbs/bootstrap#running-documentation-locally
I'm using the official Ionic package for Meteor. Working directly with Ionic, there is a way to write a SASS theme. How would you do this in a Meteor set up?
Add the fourseven:scss package
Download this repo
https://github.com/nickw/meteor-ionic-scss-import and copy all the files to /client/stylesheets/ionic
In your main scss file, import ionic.import.scss: #import "./ionic/ionic.import.scss";
Overwrite the colors in _variables.import.scss
Go have a beer.
You might want to have a look at how it was done in Meteoric. Although this package is no longer maintained you can reuse the concepts that are used there:
Use https://atmospherejs.com/meteoric/ionic-sass and https://atmospherejs.com/meteoric/ionicons-sass as prepackaged versions of Ionic SCSS
Use https://atmospherejs.com/fourseven to make sure Meteor can process SCSS
To create your custom theme, simply overwrite the variables in _variables.scss in your own stylesheet.
Note that these packages support an older version of Ionic, if you want to use the newest version, you can include it from here in your "style" folder: https://github.com/driftyco/ionic/tree/master/scss
What is the correct way to use Meteor with Modernizr?
I'd like to use modernizr-meteor, but don't know how it works or how to customize it. Do I simple get a custom build off modernizr, and then merge the js file with the latests yepnope.js
Since Modernizr needs a no-js class in the html, I can simply add the class in on startup.
in /lib/startup.js
Meteor.startup(function() {
$('html').attr('class', 'no-js');
});
The correct way to use 3rd party libraries with Meteor is to install them from Meteor's package repository, Atmosphere.
A search for Modernizr reveals two packages. As a rule, packages with mrt in the organization name (the part before :) were automatically migrated, and generally out of date. They should be flagged.
The other package looks like a decent (not ideal) candidate, so you'd run:
meteor add cwaring:modernizr
I'm trying to find out if it is possible to use autoprefixer (https://npmjs.org/package/autoprefixer) to automatically process the CSS with meteor.
I'm trying to enable the node package to work with meteor with meteor-npm but then I don't really get what to do or if it is at all possible.
My first choice would be to use stylus (see below), but based on your comments it looks like you are using less. It may be possible to create a local package which adds a source handler for all less files. See the less plugin and the stylus plugin.
Alternatively, you could use an external process to compile your files. I use a Cakefile to watch my .jade files and turn them into html. Maybe you could do something similar with autoprefixer.
$ meteor add stylus
The package comes with nib which solves the problem you are asking about. Here's an example:
example.styl
#import 'nib'
$bluestart = #0076b8
$bluestop = #005a8d
footer
border-radius: 5px
background: linear-gradient(top, $bluestart, $bluestop)
The compiled css will have all of the border radius and gradient prefixes expanded for you.
There are ever more meteor packages available! At the time of writing, there are three less+autoprefixer packages amongst the offerings:
https://atmospherejs.com/?q=autoprefix
You should just use seba:minifiers-autoprefixer package. For Meteor 1.3+:
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer
It will autoprefix all CSS processed by Meteor in production. It does not matter where CSS is coming from (SCSS, Stylus, raw, etc.).