I am working on externalizing some of an app's functionality, so that we can use it across multiple apps. The functionality in question contains several ViewComponent's that use TailwindCSS for CSS. These CSS classes work as expected when the files are contained internal to the app, but fail to be loaded when the files are externally contained in the gem. Likely due to them now being external to the TailwindCSS config's content.
The methods I have tried are:
Including CSS through an Engine in the gem as mentioned in this blog
Safelisting classes which works, but requires that the end user add all required classes into the main app. I am hoping for a more dynamic approach to avoid hard coding classes.
Following the Third-Party library instructions to attempt to hack together a Gem way of dynamically adding the files to content. (Can be linked to via Github if that is an option)
Most promising to me seems to be the third-party options, which unfortunately caters to NPM packages, while I am trying to do the same with a Ruby gem. Any pointers on including via a link for dynamically loading the classes would be appreciated!
Related
I am working on a project in Rails. It contains multiple sub-projects. They have a common login and the rest is separate for all. I want to integrate them all in the main project. The sub-projects are pretty big, so putting them all together will make it cumbersome to manage the code. Is there any way to integrate the sub-apps or gems in the main project?
You might consider breaking your apps into engines. It's a great way to isolate functionality and make code modular. Here's a link to the Rails engine docs: http://guides.rubyonrails.org/engines.html
If you need examples of real-world uses of engines you might consider looking at the code for Spree: https://github.com/spree/spree
With Spree you can add custom functionality by installing or building extensions, which are effectively Rails engines.
If you want to reference local gems/engines, you can point to them in your Gemfile like this:
gem 'mygem', :path => '/path/to/gem'
But make sure that the individual gems within your project don't have a .git folder, or you might run into errors regarding sub-modules.
I can't find a good resource for explaining how to include a more complicated 3rd party package that includes js, css, and other types of assets within the same plugin. For example, the plupload plugin has a lot of different assets spread out in multiple folders. I have put it in the vendor/assets/plupload/ folder and then require the tree in my manifest file, but then it refers to other other files with a relative pathname that works in development, but the path changes in production. I can then change the references to use asset_path, but then I am modifying the vendor code which just seems wrong.
I know there is a gem out there for the plupload library, I am just using it as a case study to try and understand the best practice for including a more complicated 3rd party library than what the Rails Guides show.
Thanks!
You can place the contents related to any plugin or library in a single folder public folder. This will make all your assets available and there should not be any issue.
I've got a simple rails gem (created using bundler) and I'd like to extend it by adding some CSS and javascript functionality. However, I'm unsure how to go about this and where to add the files. In particular, I need need more information on how it all fits together with the asset pipeline once it gets included in another project.
Can anyone give me the lowdown on how this works and either provide some simple examples or link to a tutorial? Literally 1 css and 1 js file is all I'm looking to include. Thanks.
You could write the gem as an engine. This allows you to have an app folder in the gem just as any Rails application would have. You can add models, views, controllers, assets etc.
Once you have it set up it's quite intuitive and it's a familiar way to create a gem if you're used to creating Rails apps.
This should get you started:
http://coding.smashingmagazine.com/2011/06/23/a-guide-to-starting-your-own-rails-engine-gem/
We have some business specific extensions to common gems such as Sunspot. These extensions need to be run on startup since the files they belong are already defined.. ie rails will not try to autoload these because their constants have been defined. To solve this loading problem we have but these files in config/initializers/extensions.
First off, is this ideal?
Secondly (and more importantly), how can/should we package up these extensions/overrides so we can reuse them in other projects that we have? As of right now we are cut & copying the files across the projects... yuck.
Thanks for you help
I'd put the extensions in a gem. Then provide a small api call you can put in an initializer to load the gem's functionality if necessary. I don't know that you'll be able to get away from the use of an initializer, but by putting the meat of the functionality in a gem you'll at least have an easy way to share it across projects.
I would like to know what are the best ways to organise CSS code in Rails project?
I'm interested in how you do it and why.
If you would like to break up your css into multiple files during development you can add cache => true to stylesheet_link_tag and rails will automatically concatenate them into a single file in production. This also works for javascript_include_tag.
http://guides.rubyonrails.org/layouts_and_rendering.html#linking-to-javascript-files-with-javascript_include_tag
Generally, you should not have the client download a massive amount of CSS snippets, but pack them into a single file on the server to avoid rendering latencies. So you have the tradeoff of having functionality divided up into multiple files put wanting to send only one file to the client.
You could use SASS to have each piece of code inside a single include file and just include all of them together. This gives you the added advantage of mixins (kind of like macros) and variables among other awesome things.
Another possibility would be to use plain CSS and use something like Jammit to pack the stuff up to send to the client.
Regarding actual setups, I tend to have one file resetting the styles to a known default, a file for the basic layout (columns, default spaces, ...), and one file each for each area of concern for your specific design (headers, buttons, ...)
James and Holger's answers are very good.
Besides organizing CSS in my projects, I also had to change colour schemes a couple of times..
Trying to do consistent changes throughout many CSS files can be pretty painful (results may vary).
I ended up extending the Rails start-up procedure a little, to include a custom module "site_settings.rb"
through which I can define variable for colors and other CSS attributes, which I can then use throughout my CSS input files.
Whenever Rails starts up, and one of the input files has changed, it auto-generates the CSS files.
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
Since Rails 3.1 is out and sprockets replaced Jammit, here an excerpt form the Rails guides concerning the asset organization:
Asset Organization
Assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
lib/assets is for your own libraries’ code that doesn’t really fit into the scope of the application or those libraries which are shared across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins.