I don't use Bootstrap, but 1 thing made me use it.
The class collapse with certain button.
I have got more than 2 thousand line of CSS and when I linked and imported BOOTSTRAP, it started remaking all my styles. In another word, Bootstrap styles and My Own CSS styles are collapsing and making unusable and ugly UI.
The question is:
Can I include only style classes that I really need?
Googled :D
I have no XP in this situation...
Within the bootstrap documentation I have found that you can download the styles separately, selecting which ones you need
https://getbootstrap.com/docs/3.4/customize/#download
https://i.stack.imgur.com/PWl7H.png
https://i.stack.imgur.com/zFCoP.png
Related
I am playing around with Angular.dart as app framework and trying Twitters Bootstrap components and CSS for styling. I did run into an issue almost immediately, since Bootstrap does not seem to handle ShadowDOM, and Angular.dart uses the ShadowDOM for Components.
This would essentially mean I cant build Angular components with Bootstrap.js. Using Bootstrap components only requiring CSS works fine with applyAuthorStyles: true in NgComponent annotation.
Is there any way to also build angular.dart components using bootstrap js components?
/Cenk
Several things can be fixed using applyAuthorStyles: true but selectors that cross the shadowDOM boundary don't work. You would have to change Bootstrap's css.
applyAuthorStyles is deprecated or already removed
Here Feature Request: Add templates for NgDirectives or a NgComponent non-shadow dom option is also a discussion going on about this topic.
It mentions a ng-pseudo directive that should help solving this issue.
AFAIK ShadowDOM will be ported to AngularJS as well maybe this creates some ally and eventually an improvment.
Polymer (JS and Dart) have the same problem.
I am trying the new Visual Studio Version, which comes with the built-in Bootstrap Template. Since I wanted to use Bootstrap 3, I upgraded all files according to a helpful thread: ASP.NET MVC 5 and Bootstrap 3
This works fine, but I have trouble to apply a different Theme.
As far as I understand, I can simply replace the bootstrap.css with a different theme and the theme "should" work (I deduced this from http://bootswatch.com/) - but for me the Thema always stays at the ASP.NET default, which I doesn't like.
So: How can I change the damned theme? Ideally, I want to use: http://bootswatch.com/cerulean/
Thank you very much.
Bootstrap's css comes in 2 files: bootstrap.css and bootstrap-theme.css.
I didn't see how it is implemented in mvc5 template, but I'm pretty sure it is done using bundles. So, you got to check the bundles.cs file and replace bootstrap-theme.css there with theme of your choice.
I tried mixing polymer web component w/dart and Foundation CSS framework and so far things simple things are working like button, grid, menu. I guess if i run into an issue, I just need to port the javascript I need to dart. Anyone try this or thinking of trying this?
This was trick to get CSS to leak into component.
class ClickCounter ... {
...
bool get applyAuthorStyles => true;
...
http://i.stack.imgur.com/oNoGR.png
Yes I try this too.
The first thing I tried was create one style file for each component and use the sass #extends to make each component style, my goal was to abstract the zurb, so if I want change the theme, or css framework I just need change the sass file.
But zurb-foundation depends on a base file that have to be include, I can't create one file just for buttons, because de buttons in foundation depend on variables seted in the main file, this generate a huge file with redundant css for each component.
The second thing I tried was warp the basic components, like button, lets say a
<x-button></x-button>
Then in my sass file I include the zurb button file, and make x-button #extends .button or #include .button that make buttons and x-button with the same look. This work for basic elements.
The other way is to applyAuthorStyles and let the css leak
I'm not sure what is the best way, because each approach has its pitfalls.
Why I wrap basic components? To have common behavior and API. For example: enable and disable components, in a form. All my basic components in polymer (x-button, x-input, etc) extends from my framework class, in this framework class I have the common behavior enable and disable, so I can progamattic enable and disable components with the same API.
This is a slow work in proggress, more for fun, and I stop working on this because I need to spend more time creating applications and not creating frameworks. Unfortunately there is no good component framework for Dart as in Javascript like ExtJs and Dojo.
But the Idea was make a component set (with common behavior) and use sass frameworks to the visual effect, maybe abstract the css framework in a way it can be plug and change the look and feel of the application, and that is not easy because some components have specific html markup
I just defined some forms in /lib/form/doctrine/ But the form elements currently don't have any CSS formatting.
Is there a default stylesheet that I can quickly copy/paste to style the forms, error messages, etc.?
It's not out of the box for Symfony but Blueprint CSS is a nice CSS framework, and when I used symfony 1.4, it used to color automatically the errors (I don't know if they changed the class names and stuff).
It's a bit heavy, but it ensures a solid structure if you use it for your development.
I just used Symfony's CSS from the admin. It was exactly what I was looking for - good results with minimal effort. Thanks for the suggestion cuhuak.
I am working on building a site and i'm trying to use jquery ui themes for as much of the styling as possible. and the jGrowl site says it can be theme rolled.
from the site:
Changes in 1.2.2
Notification can now be theme rolled for jQuery UI, special thanks to Jeff Chan!
there isn't really any explanation as to how and i searched far and wide for an explanation to no avail.
You do not need to do anything, simply include the jquery-ui css. There are example files included for different themes in the download