I always find it difficult to manually load external libraries in Meteor.js due to its non-traditional way. I need some advice on how to load these libraries in the cleanest possible way
1 client
2 server
3 packages
4 public
4.1 resources
4.2 font-awesome
4.2.1 css
4.2.2 fonts
4.2.3 less
4.2.4 scss
4.3 fonts
Above is my root structure. In the public folder, I have all the images under resources and then the folder for font-awesome 4. Now, when I load this it shows the square symbol meaning it's not loading it properly.
I was under the impression that there is no need to reference any CSS etc in meteor as it's all bundled together at runtime. Am I missing something?
I did try using the meteorite packages but it just installs stuff and does nothing! I'd rather do it manually and change the references where needed.
Once too often, I have been asking myself this same question, if you know what I mean.
You could modify the font awesome css files so that the fonts url is referenced to /font-wesome/fonts/ instead of ../fonts. Move the css/less files (such as font-awesome.css) into /client
E.g its usually
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
change it to
url('/font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3')
There are also others for each type of font the above is for woff, no bone.
The directory would depend on the location of your file in /public, e.g if you used /public/danielle you would use /danielle
Adding with meteorite
If you added with meteorite don't forget to add it to meteor too i.e
mrt add font-awesome
meteor add font-awesome
or for windows
cd packages
git clone https://github.com/nate-strauser/meteor-font-awesome.git
rename meteor add meteor-font-awesome font-awesome
meteor add font-awesome
Related
I am having issues with Tailwind.
Seems like Tailwind is not compatible with SASSC as it probably uses newer CSS. https://github.com/rails/cssbundling-rails#how-do-i-avoid-sasscsyntaxerror-exceptions-on-existing-projects
Though I really need SASSC for the asset_path helpers in order to resolve custom fonts fingerprinted resources names that Tailwind will use.
I have been thinking of doing :
Keep SASSC and removing tailwind.css file from the Rails 7 pipeline by having CSSbundling exporting it directly in the public folder. Though asset is not fingerprinted then I can't really add a cache policy to the file which is a shame.
Try to remove asset_path from the SASS files and replacing it with .erb files to resolve the name of the fingeprinted asset. But probably won't work as the erb preprocessing should happen before precompilation.. (EDIt: seems to work but need to find out is it is using the current asset path or an older asset path)
Put fonts in public folder and call from there. Fonts are not assets that are designed to be changed for their respective file names. So I guess this is the best solution..
Has anyone found a solution for this ?
EDIt :
Seems like gem sassc-rails is really lagging on the Sass versions https://www.npmjs.com/package/sass as last repo update is 3 years old. Has someone tried to use the sass package with Jsbundling in order to remove the sass processor from asset pipeline ?
We could then remove the stylesheets folder from the app/config/manifest and leave sprockets to compile the Sass processed files from builds ?
I'm trying to update my Bootstrap dependency in my Ember application to the alpha 4 version so I can access the utility classes (such as margin/padding).
I think Bootstrap is a bower dependency since it's listed in bower.json, so I followed the instructions from the new Bootstrap website:
bower install bootstrap#v4.0.0-alpha.3
When I did this, bower.json didn't update. In fact, Bootstrap version is still "bootstrap": "^3.3.7".
The only differences are:
Now I have 152 JSHint errors in my terminal...I tried adding "bootstrap":true to .jshintrc and restarted my server but the errors were still there.
My ember app was broken until I removed line 1 in change-version.js, which was #!/usr/bin/env node.
When I start typing a new css style in my templates, the CSS styles are showing up, but my Ember application is not recognizing them. For example, here is an image:
When I add the class m-r-3 and reload localhost, nothing shows up.
I've already tried importing bootstrap.min.css and bootstrap.css in the ember-cli-build.js file. It didn't work.
I have already read through this page which goes over dependencies but I have had no luck. If anyone could assist here that would be greatly appreciated.
You need to use --save parameter to save bower.json:
bower install --save bootstrap#v4.0.0-alpha.3
Look at the bower_components directory, does it keep the old version of the bootstrap? If so remove it.
You should add bootstrap.css to the ember-cli-build.js, as you said. Have a look at this addon, check your coding against of a typo or erronous adding.
Does your client loads any version of bootstrap? (Check vendor.js)
I have installed DSpace on my PC. I am using Mirage as a default theme and now I want to customize it for my DSpace. I want to change CSS files (redesign it), but I don't know the steps to properly set my customizations. I can edit my CSS files in [dspace]/webapps/themes/Mirage/lib/css/ folder, but after rebuilding DSpace they will be removed. What is the correct way doing customizations over already installed theme? Should I edit CSS files and add them to [dspace-source]/dspace/modules/src/main/ folder and then rebuild my webapps? I have read official documentation about that, but I couldn't find proper answer to my question.
Create a folder for your theme in [dspace-src]/dspace/modules/xmlui/src/main/webapps/theme/[yourTheme]
Copy the CSS (or js or xsl) files you wish to modify into that directory - you can find a copy of the source files in [dspace-install] as you have referenced, or you can find them on the project github page
Edit your changes
Run the maven build in [dspace-src]/dspace: "dspace package" - this command will pull the source files for the theme and overlay your customizations. The results are built into the "target" folder.
cd into [dspace-src]/dspace/target/dspace-installer
Run "ant update" - this command will take the built files and install them into [dspace-install]
Restart tomcat
The following page has some resources that might be useful.
https://wiki.duraspace.org/display/DSDOC5x/XMLUI+Configuration+and+Customization
I don't understand how to compile foundation with my own SASS additions.
I have my own Github repo with ZURB foundation 5, I've extended it (with SASS and JS) and changed some things.
Let's say my repo is here: github.com/some_name/my_foundation_version.
So, I download it from git
git clone git://github.com/some_name/my_foundation_versionbut then what?
I don't understand how to use bower or grunt in this case. How do I use my own git repo?
UPDATE:
Going into: ./foundation/scss and run sass foundation.scss:output.css doesn't work either
Method One - Self Compile using koala etc
If you just want to use the scss to compile yourself you need 2 repo's not one
First you want the Foundation Master Repo Then Secondly The Bower_components
Foundation Master
Bower-Foundation
Unpack the foundation master then in it create a directory called foundation and unpack the bower components into there.
I personally then use koala to compile the scss which is a simple drag and drop programme I click on the app.scss set the output path to app.css and away I go.
If you want a version to play here is a repo i'm playing with for a framework also has the icons set and a few other bits in there but you can simply download unzip and it should then compile
https://github.com/Relution-Design/legion-assets
I also use netbeans which is more or less the same process, make sure correct libs are installed in netbeans set output path and compile on save.
Method 2
Firstly Make sure that you have all the dependencies!! 3 months I spent and was missing one . . . . HEAD IN HANDS :( then follow the instructions
FOUNDATION SCSS
i generated the scaffold of a famo.us project with Yeoman (yo famous)
i set up i small working project
i tried to launch it with 'grunt serve' command
it all works but no image is loaded because the folder content/images is not loaded
how can i include it?
thanks
I'm Myles the author of the Famous-Generator. The images in '/content/images/' should be able to be loaded as an absolute or relative path... although I have just updated the generated 'main.js' to use an absolute path for the sake of being explicit.
Remember that when you famous code is run it will be running inside of index.html, and therefore have the same "relative path" for included assets. As well, since you are serving via a development server, you are able to reference anything with absolute paths relative to the root directory of the project.
You should not have to touch requireConfig at all to be honest. It is only used to add vendor code installed in 'lib' to your path within require so you can reference modules by name rather than path. 'underscore' rather than '../lib/underscore'. This becomes nice as you begin to nest folders and don't want to have to manage relative paths. This also makes your code a lot more portable!
A nice sidebar, you should install all vendor code with 'bower install --save $LIB_NAME'. This will save the library / version to your bower.json and inject the path for the module into you requireConfig. Basically you can bower install anything and just start requiring!
yo famous is working just fine!
it was my mistake to try to set relative paths inside requireConfig including images: that is not working but i don't know if it is supposed to!
you have to use relative paths for every image and everything will be ok!