Right now I have an app which frontend is coded with Bootstrap 3 (I'm using bootstrap-rails gem). I would like to use also Materialize.css framework in the same app so I downloaded its stylesheet. My question is how to make these two frameworks play well together? I require Materialize.css stylesheet in my Application.scss file like so:
*= require 'materialize'
but current styles are seem to be mixed (I mean Bootstrap and Materialize.css styles try to override each other).
Is it even possible to make them work together or should I create different Application.html file for the parts I wanna use second CSS framework anyway?
Thanks in advance.
You mentioned that you are already using the bootstrap gem for your app, so you should ideally just cherry-pick the stuff you want from materialize, instead of importing the framework wholesale. Get the sass version of the framework, and import the parts you want.
Related
As a front-end designer converting designs (PSD, Sketch, AdobeXD, ..etc) to dynamic HTML pages manual. I'm using bootstrap framework with jQuery library.
When I started this job it took long time to convert the designs to html, after that the time decreased because the work becomes classic and it is routine. But every design is different and I start from the scratch using bootstrap component then adding my override CSS and JS.
I wondering if there is tools or ideas to improve my work and do things faster??
What I know is that I can create my own JS or CSS codes that I use
usually (common things). Then, I can include these files all projects
that I'm working on.
I need other tools and ideas to use.
There are different front end starter tools (boilerplate) which you may use as a basis and write you code on top of them each time.
Also consider remove bootstrap if you need everytime to override it, as you said.
It is better to have less dependencies for sure.
Also try to write your html/css as like you create page full of components, which are independent. Use CSS BEM methodology and try to make components as reausable as you can.
In that into mind you may create something like your own library / framework of most used common components between projects and just to include them everytime.
You may provide simple customization via CSS native variables or LESS/SASS ones with help of mixins.
In using asp.net I have a scenario where the master page is implementing version 2.2 of BootStrap. But there is some content I'd like to use BootStrap 3.3 for. If I try and upgrade or implement 3.3 over 2.2 in any ways, it breaks some of my code. Any ideas for how to "selectively upgrade" HTML/BootStrap to say, everything that's inside a "Div" tag?
You can do'it realy easy by isolating Bootstrap with LESS, there is a good tuto to do this by "Chris Youderian".
https://formden.com/blog/isolate-bootstrap
Depends on how hacky you want to get. If it's just one feature, just copy the part of the .css from bootstrap 3.3 you want in its own css file and import this css file after the 2.2 version is loaded either in your build script or after your 2.2 version in your tag.
If you have a more specific question about which feature (if you're including js files as well) then we'll have to dig deeper.
Warning: You have to be careful with what you're overwriting from the 2.2 as it can break other css parts. And as #DavidG pointed out, I would avoid doing this entirely.
I needed to use use both bootstrap 3 and 4 on my project as a plugin which was written with bootstrap 3 looked terrible in bootstrap 4.
Tried to follow advice in the link shared in Hicham's answer. Couldn't get it to work. But following the cue, did some stuff manually and it worked. It took me 2hrs to finish step 4 though.
Steps:-
Download preferred bootstrap 3 version from https://blog.getbootstrap.com/archive
Put it in custom css folder (or anywhere else) in your project.
Add its link in your header
(CAREFUL with this step) Prepend '.b3 ' without quotes to every selector in the downloaded bootstrap version using ctrl-H command. This will take a long time considering mistaken conversions. (e.g - Conversion of "ol" selector to ".b3 ol" results in conversion of the word "control" to "contr.b3 ol" which needs to be reversed.
Put all your contents which require bootstrap 3 inside a div tag with class="b3"
Done.
I made a remake of an older website which used tables for everything (structure and content). Now I did it in a (hopeful) "more modern way". All basement-things are div's now, but in my content I still use tables because I always have to display stuff as a table, and why I shouldn't do this with the table-tag?
Anyway, now I'm about to sort the CSS stuff, and try to organize it in a efficiency way. How do you do this ? ...
I got a main.css which should store all stuff which is used more then once in different files
One css file for each page in case that I have to edit some stuff written in main.css
but what if I got the CSS tag input { width: 150px; } in main.css, and input { width: 100px; } in idontknow.css. It works (that on idontknow.html the input is 100 isntead of 150 px, but is it a way modern web-developers do?
What about having a central point for maintenance which could mean placing all stuff in one CSS file?
First of all, if you want to build a modern website from my points of view, you should definitely use CSS Preprocessors like SASS or LESS.
I suggest you to use Foundation Zurb Responsive framework. It's mobile first, because every single modern website should be responsive. It uses SASS and there are 3 ways of getting started using it.
SASS allows you to create and separate your styles for each page, without messing them together. So basically you will have _home.scss, _header.scss, _footer.scss, but when you compile - you will have everything created in one style file. Additionally CSS and JS can by minified as well.
I suggest you to start with - SASS
After that to get yourself familiar with Foundation
You could use something like SASS/SCSS (http://sass-lang.com/) to work organized with your stylesheet files, and compile them into a single main.css for the production site.
In development, it is not necessary to have quick loading times, but on the production site, a single CSS file will speed up the loading process of the page.
You could use SASS.
But...
Have you heard about web components or Polymer-project?
https://www.polymer-project.org
The main idea is make use of styles and scripts inside each component, so that you could have the right place to put your styles and also, for the purpose of web components, reuse your components (new html elements in Polymer) anywhere in your html files.
And of course you could have a main.css for the whole page.
You should try to have only one Stylesheet in the end. It´s just the best for the performance of your website because it saves one request.
You can achieve that by using classes and IDs. As Pete mentioned you can also target body-elements with a class or an ID. And you can also give Elements multiple Classes.
Use case:
I have main stylesheet - main.less and another one for particular section of site - app.less.
Also I use Twitter Bootstrap. And for example in main.less I have several overrides for bootstrap, and in app.less I want to mixin Bootstap class into my own one (lets take - .clearfix) - for more DRYness of my code. So I will import bootstrap.css in it and mixin needed class. On web-page at first I will include Bootstrap and other libs, then main.less and then app.less. And that will make overrides in main.less cleared, and all becomes to be messy!
How to correctly do such imports? Is it possible at all with any CSS preprocessors, not only LESS?
Is including bootstrap into the less files an option for you, like you do in development?
My approach in SCSS is like that:
style.scss (doesnt have any own declarations)
imports bootstrap.scss first
then imports site specific .scss files, which may contain overrides.
By doing that I can fully control the order of the files and therefore the order of declarations in the generated css file.
Of course one has to decide to trade in the ability to let Bootstrap load via CDN when included, but in my case I use a very down narrowed version of Bootstrap anyway.
Bootstrap is not meant to be used like that. I mean if you use the compiled version, you should not override it. The idea is to use the less files and modify them. The approach which you are using is kinda messy and I think that there is no elegant way. I'll suggest to avoid including of compiled bootstrap.css and checkout the pure less version.
After downloading a complete pack of bootstrap 3 from http://getbootstrap.com, I noticed that there is a separate css file for theme. How to make use of it? Please explain?
I included bootstrap-theme.css in my existing bootstrap project, but there is no difference in output.
Upon downloading Bootstrap 3.x, you'll get bootstrap.css and bootstrap-theme.css (not to mention the minified versions of these files that are also present).
bootstrap.css
bootstrap.css is completely styled and ready to use, if such is your desire. It is perhaps a bit plain but it is ready and it is there.
You do not need to use bootstrap-theme.css if you don't want to and things will be just fine.
bootstrap-theme.css
bootstrap-theme.css is just what the name of the file is trying to suggest: it is a theme for bootstrap that is creatively considered 'THE bootstrap theme'. The name of the file confuses things just a bit since the base bootstrap.css already has styling applied and I, for one, would consider those styles to be the default. But that conclusion is apparently incorrect in light of things said in the Bootstrap documentation's examples section in regard to this bootstrap-theme.css file:
"Load the optional Bootstrap theme for a visually enhanced experience."
The above quote is found here http://getbootstrap.com/getting-started/#examples on a thumbnail that links to this example page http://getbootstrap.com/examples/theme/. The idea is that bootstrap-theme.css is THE bootstrap theme AND it's optional.
Themes at BootSwatch.com
About the themes at BootSwatch.com: These themes are not implemented like bootstrap-theme.css. The BootSwatch themes are modified versions of the original bootstrap.css. So, you should definitely NOT use a theme from BootSwatch AND the bootstrap-theme.css file at the same time.
Custom Theme
About Your Own Custom Theme: You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
For an example of the css styles have a look at: http://getbootstrap.com/examples/theme/
If you want to see how the example looks without the bootstrap-theme.css file open up your browser developer tools and delete the link from the <head> of the example and then you can compare it.
I know this is an old question but posted it just in case anyone is looking for an example of how it looks like I was.
Update
bootstrap.css = main css framework (grids, basic styles, etc)
bootstrap-theme.css = extended styling (3D buttons, gradients etc). This file is optional and does not effect the functionality of bootstrap at all, it only enhances the appearance.
Update 2
With the release of v3.2.0 Bootstrap have added an option to view the theme css on the doc pages. If you go to one of the doc pages (css, components, javascript) you should see a "Preview theme" link at the bottom of the side nav which you can use to turn the theme css on and off.
First, bootstrap-theme.css is nothing else but equivalent of Bootstrap 2.x style in Bootstrap 3. If you really want to use it, just add it ALONG with bootstrap.css (minified version will work too).
Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It gives 3D effects on the buttons and some other elements.
As stated by others, the filename bootstrap-theme.css is very confusing. I would have chosen something like bootstrap-3d.css or bootstrap-fancy.css which would be more descriptive of what it actually does. What the world sees as a "Bootstrap Theme" is a thing you can get from BootSwatch which is a totally different beast.
With that said, the effects are quite nice - gradients and shadows and such. Unfortunately this file will wreak havoc on BootSwatch Themes, so I decided to dig into what it would take to make it play nice with them.
LESS
Bootstrap-theme.css is generated from the theme.less file in the Bootstrap source. The affected elements are (as of Bootstrap v3.2.0):
List items
Buttons
Images
Dropdowns
Navbars
Alerts
Progress bars
List Groups
Panels
Wells
The theme.less file depends on:
#import "variables.less";
#import "mixins.less";
The code uses colors defined in variables.less in several places, for example:
// Give the progress background some depth
.progress {
#gradient > .vertical(#start-color: darken(#progress-bg, 4%); #end-color: #progress-bg)
}
This why bootstrap-theme.css totally messes up BootSwatch Themes. The good news is that BootSwatch Themes are also created from variables.less files, so you can simply build a bootstrap-theme.css for your BootSwatch Theme.
Building bootstrap-theme.css
The right way to do it is to update the Theme build process, but here here is the quick and dirty way. Replace the variables.less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme.css file for your Bootswatch Theme.
Building Bootstrap itself
Building Bootstrap may sound daunting, but it is actually very simple:
Download the Bootstrap source code
Download and install NodeJS
Open a command prompt and navigate to the bootstrap source folder. Type "npm install". This will add the "node_modules" folder to the project and download all the Node stuff you need.
Install grunt globally (the -g option) by typing "npm install -g grunt-cli"
Rename the "dist" folder to "dist-orig" then rebuild it by typing "grunt dist". Now check that there is a new "dist" folder which contains all you need to use your custom Bootstrap build.
Done. See, that was easy, wasn't it?
I know this post is kinda old but...
As 'witttness' pointed out.
About Your Own Custom Theme You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
I see it as Bootstrap has seen over the years that everyone wants something a bit different than the core styles. While you could modify bootstrap.css it might break things and it could make updating to a newer version a real pain and time consuming. Downloading from a 'theme' site means you have to wait on if that creator updates that theme, big if sometimes, right?
Some build their own 'custom.css' file and that's ok, but if you use 'bootstrap-theme.css' a lot of stuff is already built and this allows you to roll your own theme faster 'without' disrupting the core of bootstrap.css. I for one don't like the 3D buttons and gradients most of the time, so change them using bootstrap-theme.css. Add margins or padding, change the radius to your buttons, and so on...