I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!
Related
I'm creating a theme and store from scratch, currently every single time I do a ant all in console every change I've done into the style.css of the theme is erased and goes back to standard CSS.
Any ideas how can I keep my CSS changes even if I do a ant all/ant clean all?
Thanks!
The yacceleratorstorefront extension template provides a process for building a responsive website front end that supports LESS.
Build process will generate a _ui folder that contains the appropriate JS and CSS styling. This process can be started either through Ant or Grunt.
Modify any required storefront files in the _ui-src folder and then generate the _ui folder using ant or grunt build is the recommended approach. Kindly make changes to js or less files which are available in _ui-src folder and build will generate the respective js or css changes in _ui folder.
Check this for more details.
I would like to ask how to use .less files in a Rails application if they are placed under assets but in a separate folder (let's call the folder "myless") from stylesheets. Another way to term this is that the myless folder would be side by side the folders, "images", "javascript" and "stylesheets" which are under the assets folder.
How do I import them to application.css or to a .CSS file? What lines of code would I use?
Do I have to add a method in environment.rb?
What gems do I have to use?
Any insight would be superb. Note that I am fairly new to Rails and are studying different tutorials on it. The different implementations in different versions of Rails is confusing me and there's not really a clear tutorial I can find online. I am currently trying to implement a bootstrap template, this is why I ask this question. I got the JavaScript and the CSS down but realized that the template uses .less files. Help?
You can enable your app to support LESS by including the appropriate gem(s):
gem 'therubyracer'
gem 'less-rails'
Then run bundle install. Assuming you have the appropriate stylesheets included in your stylesheets manifest, you should be good to go!
There's also the rails-less-bootstrap gem if you want a simpler way of including Bootstrap in your project.
Note: it's a good idea to keep your stylesheets together. Instead of having the myless directory be on the same level as images, javascripts, and stylesheets, you should consider moving it inside of your stylesheets directory.
Hope it helps!
So I'm playing around with MVC6, and I've added bower.json & grunt.json, I've created my grunt tasks for generating my jQuery & bootstrap.css and its all sitting in the wwwroot folder as i expected.
But what about things like my site.css & my main.js files, the files that I will add to for the project over time.
What convention are people using when choosing a directory for this stuff?
Are we to add a Content folder and drop it in?
Is there something I'm missing, that i should also be using Grunt / bower for?
I do have app and vendor folders outside wwwroot.
In vendor, I customize libraries like bootstrap, themes.
In app I have my own css, less and js files for the application.
I also have an asset path inside app for anything that needs to be copied (folder font shown in the screenshot)
Then I use the opinionated really easy to use and way better than grunt or gulp tool: brunch.
With this simple config, I get sourcemaps, concat, jshint, and with --production also uglify, minify, csso.
Adding anything else to the pipeline is simple as installing a brunch-plugin, so I recommend to also check http://brunch.io/ out.
Any static files (.css, .js) should be added directly into the wwwroot path (e.g. wwwroot/scripts, wwwroot/css). Anything that will be compiled into static files (.ts, .less) should be put into an Assets directory (or whatever name you like) in your project and output into the wwwroot path during compilation (generally configured through grunt compilation tasks).
I am using bootstrap in Meteor and found that there is a modified flat design here: http://designmodo.com/demo/flat-ui/. Among the files seems to be a modified set of Bootstrap files. Is it possible to somehow use those css and js files to override the default bootstrap files to get the Flat-UI in a meter app? Thank you!
it's quite simple:
unzip the contents of the flat-ui-master.zip from the flatui site, then follow these steps:
create these folders in your app root: /client/stylesheets
copy the contents of the .zip into /stylesheets
remove the index.html and README.md files as they might cause your app to crash, and are not needed
meteor automatically takes care of the rest.
Although manually insert files works, I'm using meteor package jss:flat-ui
meteor add jss:flat-ui
it will automatically add flat-ui and twbs:bootstrap.
Note that, it might be better to remove any bootstrap package before installing this, I've been in a project that has mizzao:bootstrap installed and the login ui not working, so I remove mizzao:bootstrap and reinstalled flat-ui to make it work.
You can use whatever css you want to, Meteor don't care.
I wouldn't add the bootstrap meteor package though, I'd just download the css files you want and place them in your project. That way you know exactly what files are used and can easily make changes.
Here's some info on how to structure your app: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
I created a shell script to generate a custom bootstrap Meteor package from either a precompiled distribution, or from your own clone of the Bootstrap Git repository.
You can find it here, along with usage information: https://github.com/wojas/meteor-package-bootstrap
Just unpack the ZIP file containing the files and run this command from inside the theme folder:
/path/to/meteor-package-bootstrap.sh $your_meteor_project/packages/bootstrap
I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/