I have installed into a new project in codekit the following components:
jquery
animate.css
normalize
Modernizer
I understand that keeping these components in the bower directory is recommended so these files are easily updated. However, do we link to these in our html files directly? My sass files get compiled and outputted to assets/css but there aren't any sass files in the bower components and creating them in the original folder would, I assume, get overridden if I was to upgrade. Seems very odd to me to upload the entire bower_components file to the production server with all the dependent files. I have been building site for a long time without all this node, git, grunt, bower, et al stuff. I see the value in it, but I'm having a tough time getting up to speed. Any help sure would be appreciated.
In most cases, you would want to include the third-party components (e.g. css, javascript, ... files) within your own master css or javascript file and then minimize that file for production. For example, my folder structure looks like:
bower_components/
...
release/
css/
styles.min.css
img/
...
js/
scripts.min.js
src/
images/
...
scripts/
scripts.js
styles/
styles.less
templates/
...
And then, within styles.less, I might have:
#import (less) "../../bower_components/normalize-css/normalize.css";
Or within scripts.js I could have:
//#codekit-prepend "../../bower_components/jquery/dist/jquery.js"
I have CodeKit set to generate the minified versions in release/ from those files. The only files that go to production are all of the files in the release/ folder.
Related
In order to access to the benefits of the pro package, adding font-awesome 5 from the gem is not possible.
Tried diferent ways to add the files provided to the project. Following Official guide
Package content:
I saw in other stackoverflow posts, that the correct way to add it to the app is in
vendor/assets/
But after that, puting /on-server/'s css, js, and font or the /web-fonts-with-css/ files still didn't work.
Tried adding custom stylesheet link, require and import in scss. No way to achieve it.
Hope I've been clear.
Using the 'Web Fonts with CSS' approach has a wrinkle because the font url is hardcoded into the CSS file, but it can be done.
CSS:
Copy the fontawesome-all.css to the 'vendor/assets/stylesheets' folder.
Update your app/assets/stylesheets/application.css file with
*= require fontawesome-all
Fonts:
Then copy the webfonts folder to the public dir so all the fonts are in the public/webfonts folder.
Restart your server and you should now be able to see your FA5 fonts.
SVG with JS
If you want to make it even easier (only 1 file to track) then you can do the 'SVG with JS' approach.
JS:
Copy the fontawesome-all.js to the 'vendor/assets/javascripts' folder.
Update your app/assets/stylesheets/application.js file with
//= require fontawesome-all
Restart your server and you are good to go.
If you are using rails which supports Node Modules.
Add Configuration
npm config set "#fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken" YOUR_AUTH_TOKEN
OR
Save configuration in file .npmrc in app root folder as below
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_AUTH_TOKEN
Run NPM or YARN to install the package
npm install --save #fortawesome/fontawesome-pro
OR
yarn add #fortawesome/fontawesome-pro
Add the packages in app/assets/application.js file
//= require #fortawesome/fontawesome-pro/js/all.min.js
Include Node Modules folder in assets path by adding below line in config/application.rb
config.assets.paths << Rails.root.join('node_modules')
Start the server again and you are good to go with font-awesome PRO.
For more details you can visit the below link:
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
There is also a way to use raw svg without any js and thus avoiding rendering issues and nasty hacks that lead to annoying flickering side effects
It comes in the form of a view helper called faw_icon https://github.com/alexwebgr/faw_icon and it provides three ways to load svg into your application
using the icons.json from the metadata
using the raw single svg files
using the svg sprites
by design it doesn't bundle any icons catering for a small download size and giving the developers the ability to update the icon sets as new ones become available, use custom ones or the PRO collection
I am adding to my jhipster project a new dependency "tether-shepherd", and below was my steps:
bower install tether-shepherd --save
the dependency was successfully installed & added to 'bower.json', then to add it to 'index.html' I ran below command
gulp inject
the js files was successfully added to index.html but without any .css theme files, when I dig into installed bower components for installed dependency I found all themes there in 'bower_components/tether-shepherd/dist/css/' directory but not included to index.html file, to add it I manually placed its include below loading-bar.css in section but it is automatically removed when I re-run gulp inject!, and when I add it manually outside any block this was not good for production profile
any professional way to include and bundle css files located in bower_components?
This is probably because these CSS are not referenced in the main property of your dependencie's bower.json like here, see gulp/inject.js in your project to understand how they are used.
So, either you add an overrides.main property for these dependencies in your JHipster app's bower.json to add them like JHipster does for Bootstrap or you manage them manually and copy them to src/main/webapp/content/css, (you may have to add #import to your main.css I didn't test).
I use Bower to manage dependencies in the form of Sass and JavaScript libraries. In almost all cases I reference these libraries directly from my Sass, CoffeeScript and JavaScript.
My build process concatenates and compresses the resultant assets. These combined stylesheets and JavaScripts also have sourcemaps. With the Bower-managed libraries coming straight from the bower_components directory, the sourcemaps create a dependency on having the bower_components directory publicly available.
When considering Bower alone, it's obvious that bower_components should be ignored by version control and referenced directly, but when adding the sourcemap aspect it starts to get a little blurry for me.
On the particular project I'm working on now I check compiled assets into version control to avoid having to compile them on Heroku. This might even try to force me to check the whole bower_components directory in. Yuck.
Thanks in advance if anyone has advice.
My problem is I can't link to the bower_componets folder.
I am using web-starter-kit, and basically took those files into my dev environment/folder structure. I know that defeats the purpose of WSK, however I created a gulp work flow and wanted to try it out.
This is what i get in the console.
And this is my folder structure...
I am positive based on where the 'bower_components' folder exists this should be the path.
<script src="../../app/_bower_components/flowtype/flowtype.js"></script>
e.g. Start out of in development, then out of builds and dive into 'app'
Is there a bower config file that I am supposed to create?
I would like to use the SlickGrid plugin in my Rails 3 application.
I contains several JS and CSS files that I should include in my HTML page.
It is possible to put all the needed JS files in the public/javascripts directory and all the CSS files in the public/stylesheets directory. However, I don't like this solution because it breaks the plugin package files structure.
I would like to put all the plugin files in one place (I thought about vendor/plugins, is it a better place?), and include the needed files from there. Is that possible ?
What is the proper way to include the JS and CSS files when integrating a plugin ?
I think Jammit can help you accomplish what you're trying to do. Besides packaging, embedding, gzipping your assets, it also allows you to store javascript and stylesheets anywhere in your app. Images (if not embedded) could be a problem though.
Answer by #rubiii is also good, but since sprockets gem from version 2.10.0 supports bower, now it is extremely easy to integrate any js/css libraries. Also version management and updating as easy as typing bower install. Bower can be installed through nodejs npm install -g bower, include .bowerrc file in root of application with content inside:
{
"directory": "vendor/assets/components"
}
Then specify libraries in bower.json and run bower install
{
"name": "appName",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
}
}
After components installed, require files in application.js/application.css as usually. e.g.
*= require bootstrap