It's the very first time I am using Materialize and I have never been in touch with SASS. I have installed the materialize-sass package using npm install materialize-sass --save. I want to define a color set and compile the CSS file then.
How can I compile my SCSS files after editing the _variables.sccs now so that it will output the CSS file in my public/stylesheets folder?
In the end I have used Koala which is a GUI application for compiling SASS / SCSS files.
Koala App provides GUI (graphical user interface) for automatic compiling of LESS, Sass, Compass and CoffeeScript. It’s also multiplatform as it gets, with clients for Windows, Mac and Linux
Related
If I was using Compass to compile SASS partials to CSS, then I could specify input directory (say ‘scss’) and output (again, say ‘css’) in the ruby config.rb file. This is how I used to compile Foundation 5.
Instead I’ve Installed Zurb Foundation 6 using the CLI and am watching and compiling with Libsass (written in C?). It’s really quick, but...
Where is the equivalent config file, to change the default directories?
I know that could be multiple answers for this question but I would know how i can fast setting up project with Bootstrap and Sass.
I had never used node, npm, grunt or bower, I've installed all already but i can't really find a good tutorial for:
Setting up the project structure
Auto compile sass files on save
(Maybe) Live reload in chrome?
I would suggest not using any boilerplate for your first project as you want to get into the "guts" of it, and once you are familiar with basics, then you can try boilerplate and see what they can do for you.
Few tools you would need to setup a project from scratch includes: Node's npm, Bower, Gulp (for example).
After you have those installed, you can dig in into creating your first project.
1) Initialize your npm project
2) Pull the packages with Bower (Bootstrap scss for starters)
2a) Pull the Specific Bootstrap 3 SCSS port
3) Configure Basic Gulp-scss config for your SCSS needs.
Basic idea behind Bower is that you have unmodified source of plugins/3rd party js/css in bower_components folder, and you use those files to compile a production ready files (js/css). What this means is that your bower_components folder is a "src" folder, and you have to add your "dist" or distributable files. Gulp helps with this part.
For the project structure, further readings and improvements on gulp tasks.
Once you have basic working project, you can try expanding your gulp-config with, like you mentioned Browser Sync and others.
I did compile a "general tasks" gulp file that i use from project to project. You can take a look here and use it if you find it fits.
Hope it helps.
You can try using Aldryn's boilerplate:
https://github.com/aldryn/aldryn-boilerplate-bootstrap3
Documentation
I'm new to css compiling. I currently have a node.js app using express and precompiled bootstrap 3 files, and I'm diving into Stylus to make this better. I want to compile Stylus and import bootstrap with jeet for grid system.
My question is, how should this work? I'm confused about using grunt or why some tutorials show Stylus being used as middleware. Is it that the middleware compiles it realtime, and why would I need that?
Also I ran npm install bootstrap-styl and npm install jeet, but I'm not sure how to reference these in my styles.styl (If I do #import bootstrap, it can't find the files)
My thought is that I want to somehow link the imports to my node_modules, so they can be updated fluidly (I don't want to just copy the bootstrap .styl files from the node_modules folder, right?). Is this what I would use Grunt for?
well grunt is a task runner program that let you write tasks to run and it does automations (if specified) or manual tasks.
Grunt can watch for files/folders changes and invoke some functionality or tasks (if you will) just like what fileWatch function ( in fs module) does in node.js, and the tasks can be anything really from importing jeet into your stylus before compiling to run your tests and refresh your browser. In your situation it's best to use grunt to do the automation (of importing jeet files and compiling it). Grunt is easy to use, you can look at https://www.npmjs.com/package/grunt-contrib-stylus it has the information you will need to use stylus in grunt.
Make sure you npm install grunt-cli && npm install grunt grunt-contrib-stylus --save-dev to install grunt command for command line and the other for your project.
Then in the root of your project you make a gruntfile.js and put your grunt tasks in there, you can google for some articles about it, pretty straightforward.
I'm grappling with the HTML5 + JS path for writing photoshop extensions, and I'd like to use Coffee instead of plain JS.
However the node install included with Photoshop appears to be version 0.10.30 and does not seem to include npm. Is there a way to install npm into the photoshop version of node? Or would it be save to replace that version with one which includes npm? As a last resort I can probably install another node with npm, and coffee, then copy the js into the plugins -- but that seems very awkward.
Has anybody tried this already and cracked it?
You can use a separate directory for development and a task runner like Grunt to compile your sources into the plugins directory whenever there are changes.
Take a look at some boilerplates to get you started quickly, like grunt-html5-boilerplate or vtex/speed
I have the Meteor app setup with such folder structure. I am not able to get the sass or scss file to create the appropriate css on its own and serve it to the client.
What should I do to make sass work as I prefer sass over scss.
Meteor supports less and stylus out of box my issuing meteor add less or meteor add stylus in your project root directory.
there is also a third party package repository (to be rolled into meteor core in the near future) on which you can find alternatives to many requirements.
For example, there is a third party scss package you can add to your project with meteorite add scss.
Now, the meteorite command here belongs to an npm package that interfaces your app to the atmosphere package repository as well as provide some deeper packaging structure to your app.
When you add the scss package, like in a typical meteor application your coffeescript, handlebars,jade,less,scss,javascript etc files will be compiled/bundled at deploy time and at each save afterwards and be placed in a hidden directory. So you will not be seeing your compiled css alongside your scss files, but the css will have been sent to the browser.