I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.
I've edited #navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.
What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using #import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?
Did you read some info about configuration this gem?
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
Need to configure a variable or two? Simply define the value of the
variable you want to change before importing Bootstrap. Sass will
respect your existing definition rather than overwriting it with the
Bootstrap defaults.
$navbarCollapseWidth: 769px;
#import "bootstrap";
Or that is not what you need?
Related
Based from the Readme files of Mirage 2, it says here:
If you want to base your theme on an existing Bootstrap theme (like the ones at bootswatch.com) you can do so by using the standard Bootstrap color scheme and replacing the import of Bootstrap in bootstrap_color_scheme/_main.scss:
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
with an import of just its _variables.sccs file (those variables need to be defined, because they are used in _dspace-bootstrap-tweaks.scss):
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";
Then import the the css file(s) of your Bootstrap theme of choice below it. Depending on the theme you may also need to update the twbs-font-path function right above that import statement.
What I did:
Ok, so I activated the mirage2_bootstrap_color_scheme maven profile. Copied the bootstrap_color_scheme/_main.scss from dspace-xmlui-mirage2/src/main/webapp/styles/ into dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles.
I changed the text in _main.scss that says #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap"; into #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";, and then I copied the bootstrap.min.css that I downloaded from bootswatch.com and put it in the same directory with _main.scss and then I referenced it in _main.scss with an #import "bootstrap.min.css"; statement.
I'm having this error when running mvn package:
error styles/main.scss (Line 12: File to import not found or unreadable: variables.`
I also tried putting the _variables.scss under the bootstrap_color_scheme directory and used the #import "variables"; but I got the same not found or unreadable error.
Can someone guide me on how to correctly use the themes from bootswatch.com to apply to Mirage 2? An example and a simple walk through of using a sample theme from bootswatch.com would be great.
Thanks in advance.
I deleted my other answer because I was mistaken.
Here is an example of a working bootswatch theme:
https://github.com/antoine-atmire/DSpace/tree/mirage2%2Bbootswatch/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles
The /styles/bootstrap_color_scheme/_main.scss file gets copied to /styles/main.scss during the build process, so the #import statements should be relative to /styles/main.scss.
Bootstrap-sass has updated its paths, and the Mirage 2 docs are not yet updated.
_variables.scss is now stored here: "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss"
Depending on which version you're using, it can even be in another place.
A general recommendation is to look at the vendor folder in:
dspace/modules/xmlui/target/xmlui-*/themes/Mirage2/vendor/
Look for the path of the variables file there and use that path.
I've got an app that's using JQueryMobile and it's using the awesome ActiveAdmin extensively as well. While I love the ease and simplicity of the ActiveAdmin interface, I'd really like consistency with the rest of my app.
Is it possible (i.e. using standard ActiveAdmin and not modifying its sources) to re-skin ActiveAdmin to use the JQuery-Mobile look and feel?
Its very possible to reskin ActiveAdmin, though it would be a bit of a job to do, and there would likely be quite a number of things that can't perfectly be built to match a mobile presentation, especially if you don't want to get into overriding markup rendering.
You can always simply start adding styles of your own to the active_admin.css file that is generated for you. If you'd like to start without any of ActiveAdmin's styles at all, you can comment out the two sass imports in that css file:
#import "active_admin/mixins";
#import "active_admin/base";
Or at least just the base file. It may be intriguing to you in itself, or informative about the organization of the markup, to view your current admin pages without the base css, or with css turned off in your browser altogether. From that vantage point, you could begin to think through how the bare markup could be restyled to match a mobile presentation.
What I have:
In Rails 3.2.2, I have the following stylesheets:
app/assets/stylesheets
|
|-- application.css
|-- bootstrap_and_overrides.css.less
|
|-- annotations.css.less
|-- maps.css.less.erb
`-- users.css.less.erb
The two first ones are more or less system-default. The other ones are where I define my custom styles.
So, application.css, as usual, includes all the other files:
*= require_self
*= require_tree .
And bootstrap_and_overrides.css.less, of course, includes Twitter Bootstrap as well as some other custom defined LESS variables.
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// other stuff
#brown_text: #332820;
What doesn't work:
Now, in annotations.css.less, I'd like to use #brown_text, but it gives me:
variable #brown_text is undefined
I figure this is because there's no reference from annotations.css.less to the "master" file where the variable would be defined. And it seems that annotations.css.less is compiled first – note that I'm currently in development environment.
So, how can I use my custom LESS variables then, and make them available in other stylesheet files? My current "fix" is to just move all my custom styles into bootstrap_and_overrides.css.less.erb, which doesn't seem very clean at all.
What also doesn't work:
Just importing the LESS files isn't possible, because they use Rails' asset path helpers. And importing an ERB file is also not possible, since the #import statement won't find the file, because it expects a .less suffix.
You don't need to use ERB for asset path helpers – they're actually baked into the less-rails gem, which you can reference here: https://github.com/metaskills/less-rails/#helpers
You should be able to just use asset-path or asset-url anywhere you've used ERB to refer to the assets pipeline.
Given this, the best way to go would be to:
Convert application.css to application.css.less
Delete all the Sprockets directives
#import each individual file in the directory.
Remove the .erb extension from any files that have it, and change ERB asset helpers to less-rails asset helpers.
Make sure annotations.css.less is imported after bootstrap_and_overrides – this is why it's usually not a good idea to use require_tree ., since you can't control the order in which the files are loaded. The way you have it now, annotations.css.less would be loaded before bootstrap_and_overrides – before the variable you want to use even exists.
Hope that helps!
The way twitter-bootstrap-rails is compiling things, you will need to import your other LESS stylesheets into the overrides file. So for an additional file, annotations.less:
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
//other LESS styles
#import "annotations"
For more, look into less-rails, which this gem uses underneath.
I'm using the twitter-bootstrap-rails gem for styles in my app.
At the moment, I'm writing all my style ruls inside bootstrap_and_overrides.css.less, and this turns messy and redundant as the application grows.
I'd like to split the less code to smaller files that will be required on a per page basis, but still be able to use the bootstrap colors and mixins. I found that after I split it into another file, I couldn't use these components anymore. I guess I'm probably not including it correctly or in the proper order - thoughts? thanks.
look at https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less
you should be able to use #import "override-forms.less" in your bootstrap_and_overrides.css.less for example.
When a rails app is created with rails 3.1 or 3.2.0.rc2 it by default creates an app/assets/stylesheets/application.css file, however each controller/model created there after creates an app/assets/stylesheets/<controller or model name>.scss.
Why isn't an application.scss created by default?
How do you properly incorporate an application.scss and get rid of the application.css entirely?
I would just rename it to application.scss and then you can import in your other .scss files like this:
// Inside application.scss
// HTML Reset
#import "reset.scss";
// Users CSS
#import "users.scss";
When you compile the SCSS, it will generate the application.css for you from all of the other imported files or CSS within that file.
application.css just plays like a house keeper, it represents the correct order of other .scss files.
Put the real working CSS in application.css may not good practice, as the comment generated by rails below:
You're free to add application-wide styles to this file and they'll
appear at the top of the compiled file, but it's generally better to
create a new file per style scope.