I'm interested in using the impressive Bootstrap popover jquery plugin, but don't want to pull-in the entire massive bootstrap.css, since it run over my existing style sheets.
I've tried to cherry-pick the tooltip-only components out of the CSS, but failed. Any ideas as to the best way to go about this?
You need to select two check boxes on the custom download page. Select the appropriate CSS JS Component in step one and then select the corresponding jQuery plugin in step 2.
See http://twitter.github.com/bootstrap/download.html
Related
I'm trying to replicate the bootstrap button style without having to import the bootstrap CDN into my project. Is there an efficient way to do this?
Yes, you can. Open this page - https://getbootstrap.com/docs/3.3/customize/ and check/uncheck what you want
In your case you need to check
Common CSS - Buttons
Components - Buttons groups
Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.
Download the package here: https://v4-alpha.getbootstrap.com/getting-started/download/
Then open it and go into the SCSS directory. Look for _buttons.scss.
Open it, copy the styles, paste them into your CSS. You may have to hard code any SASS vars they use.
I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
I jut recently tried to upgrade jQuery UI, and after I did I was shocked to find that it completely changed the look of my site. I'd like to use the jQuery UI logic, and I'd like to have whatever minimal CSS is needed to (say) make a dialog have the right dimensions, but I don't want any of jQuery UI's fonts/colors/backgrounds/etc.
Is there any way to get a CSS file like that? I tried playing around with the theme roller, but it seems to assume I want styles for some color and some font, when I don't want any at all.
The root directory of a jQuery UI download zip should include jquery-ui.structure.css which contains just the structural CSS without any of the themeing. You may have to add some of your own styles on top of that to get a usable UI.
Im developing a custom html / css / js front end from scratch, ie. all the elements are designed and i dont need a front end framework with buttons, headers, layouts etc.
What i do need however is a responsive scaffolding grid (i know i could write this from scratch but why reinvent the wheel) Id like to use bootstraps scaffolding grid system as im familiar with it from other projects ive worked on (where i was using the frameworks design elements).
Is there a simple way to do this, without overriding the css of every element in my custom-styles.css file ?
Download the LESS or SASS source, and compile only the areas you want to include in your project.
Made this Grunt build with only the Bootstrap 3.3.5 grid:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~10KB minimized.
If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.
You can use the customize option here
http://getbootstrap.com/customize/
Select just scafolding and responsive utilities.
You might have to change some more stuff because the normalizing css is still included
I would like to change the css feel of my datatable. I am currently using jquerydatatables.css and jquery-ui.css. Is there any free download of datatable css?
Did you try checking the datatables website?
https://datatables.net/manual/styling/theme-creator
They provide support for several themes.
This online style builder will let you customise the colouring of the DataTables stylesheet to fit in seamlessly with your web-site or app. Simply select the colours you want for your table using the options below, and click the Create stylesheet button. The page will then reload and show your customised table below, with the CSS available to copy and paste for your site.
Here is the correct link-
Data tables applying your own css for changing the css of datatables.
You can provide it your own theme.
Just select the colors and
styling.
It will generate a CSS for your applied styling.
You can copy
in your css file.
You are good to go.
Hope this helps...