I have a requirement where i need to use bootstrap theme into my rails project and there might be a change in the theme at any time. So, i would like to know how i can make use of the styles and also make it in such a way that the new styles can be applied easily.
I just saw the bootstrap-sass gem and I am not sure of how to import the themes into my rails app. They have said to use
#import bootstrap/theme
Will this alone be importing all the styles and js files and also i would like to know few other things listed below. Do i need to replace the theme with name of the theme?
Say I have about 100 text fields do i have to apply the class specified in the theme for every text box and if were supposed to change the theme then do i need to change all the text box classes again or is there is some other way to apply the styles easily.
Related
I am trying to change the structure and design of the components of the ActiveAdmin layout, such as the navbar menu, icons and customize it to my style. Is this possible?
I need to overwrite the source code to be able to change the HTML structure, but I have tried to do it by placing files in the / lib folder and I have not succeeded. How could I overwrite the ActiveAdmin source code within my Rails project?
It is possible but many developers have discovered it is not easy. If you look through the various plugins you will find examples like Custom Layout, Sidebar, Menu and SubNav that may inspire you. However, if you are new to ActiveAdmin and your first priority is to customize the layout heavily then consider Administrate or vanilla Rails instead: they are still difficult, but you will be fighting the framework less.
I am using twitter bootstrap installed by copying bootstrap.min.css, etc. into the vendor/assets folder.
When using rails forms validations, error messages appear using default styling, not the bootstrap styling I would expect (e.g. the h2 tag is much smaller and in a different text, the unordered list uses different bullets, etc.) How do I get bootstrap to override the default styling that rails uses when generating error messages for forms? I'm guessing this has something to do with the asset pipeline, but didn't see anything about overriding rails-generated content in the rails guide.
Thanks!
Sounds like you used some scaffolding which generated a CSS sheet. Go into app/assets/stylesheets and delete the stylesheet named "scaffolds.scss" (or just delete the parts you don't want).
To track down where that styling is coming from, you should use your browsers development tools. Inspect the element and it should tell you where the styling is coming from.
Is there a way to not include wells or sliders or any other UI components that I won't be using in my pages? Would it be possible to be able to add those UI components later?
Customized Bootstrap styles are already compiled to css, so if you want to use sass I recommend not using this tool.
There is a Bootstrap sass version. Download it, go to vendor/assets/stylesheets/bootstrap and open bootstrap.scss file. Here are the sass partials, if you don't want to use any of these you can comment it to prevent from being imported. If in addition you want to remove a partial file you can do it but remember that also you should remove it from bootstrap.scss
You can customize your Bootstrap here: http://getbootstrap.com/customize/
Twitter Bootstrap is a cool stylesheet toolkit by Twitter based on LESS. I don't use LESS however I am using the twitter-bootstrap-rails gem and it seems to be all working fine. However I am unable to figure out how to change the colors in the CSS, particularly the link color.
My further research seems to point that the gem only provides a pre-rendered CSS file with fixed colors declarations and not variables that could be changed in one place. I would love to be able to just change the colors by changing a variable like $linkColor = #00ff00
Does anyone have any idea as to how to do the color changes efficiently throughout the UI without using LESS?
I want to avoid using LESS since Rails 3.1 already uses SASS, but if anyone here thinks its not a big deal using both, I'm open to suggestions however.
Any help or suggestion will be much appreciated
I wrote a reasonably popular conversion of Bootstrap to SASS 1, 2, which allows you to define your own variables if you use a custom helper manifest, rather than the one included in the gem.
As an example, in the head of application.css.scss:
#import "bootstrap/reset";
#import "bootstrap/variables";
// overwrite variables here
#import "bootstrap/mixins";
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/forms";
#import "bootstrap/tables";
#import "bootstrap/patterns";
// rest of your manifest
You can overwrite the supported variables before importing the rest of the bootstrap files, and these will also be accessible through the rest of your SCSS.
I found a good compromise: I keep the .less source under a folder, and I have a guard command to compile this to css directly to vendor/assets.
This allows me to use the less mixins inside an additional .less where it makes sense (ie: to add a new color), and keep the rest of the app in scss.
I did that because I really wanted to rely directly on the twitter boostrap source, not on a scss adaptation which may lag behind later on at some point.
Contact me if you need more details, I plan a blog post on that.
I found two separate SCSS versions of the bootstrap files. Both (in the preboot.scss file) allow you to just change a variable for things like linkColor.
bootstrap.scss
twitter-bootstrap-scss
Now, how to integrate those into your own app, I'm not sure. But it appears it can be done with SCSS if you want to avoid LESS.
i am creating a cms / portal that i want each user to change certain css properise ie colors, widths, backgrounds etc to customise there own version of my site.
What is the best way to do this ? i have looked into sass but not sure if this is possible from front end as the css would need to be recompiled each time etc ?
Any one done this or got any suggestions please help.
thanks
rick
You can use sass if you like, but it's possible to do this using plain CSS too. Use whichever you prefer. Sass doesn't need to be recompiled for each request, it can be either:
Pre-compiled at deploy time
Served from a controller and page-cached
If you want your users to edit only certain properties then you can use a standard MVC approach to serve your stylesheets with page caching:
Create a stylesheet model with the columns you want to have editable.
Provide your users a form to manage their stylesheet (there are some good jQuery plugins for color selectors, etc.)
Serve the stylesheets from a controller (e.g. routed to /users/1/stylesheet.css)
Cache the stylesheet output using caches_page so it gets served statically on future requests.
Let the user edit an .scss file.
Use codemirror for editing.
SASS/SCSS: http://sass-lang.com/
CodeMirror: http://codemirror.net/csstest.html