I have some development experience with Razor and decided to give Blazor a try.
I ran into an already familiar problem - integrating validation with Bootstrap: Blazor validation result classes do not match Bootstrap's ones.
In Razor, I can override the generated class names by adding the following code to the _ValidationScriptsPartial.cshtml file:
const settings = {
valid: 'is-valid',
invalid: 'is-invalid'
/* other classes go here */
}
$.validator.setDefaults(settings)
$.validator.unobtrusive.options = settings
I tried to find solutions, but all I found was just copying of Bootstrap styles and replacing class names (something like this).
Is there some better way to do this, or will I have to duplicate all Bootstrap validation styles just to integrate it with the Blazor. I would like to avoid this, because when updating Bootstrap, I will have to do the same procedure again.
This problem seems even stranger when you remember that the default Blazor app template comes pre-configured to work with Bootstrap.
Just came across this section in the documentation.
And it worked for is-valid and is-invalid classes.
And I also found that wonderful article about how to implement custom ValidationMessage in 25-30 lines of code.
Related
I have started a new .NET Core template with Angular (with Microsoft identity) and I have started with the UI.
So here I see that the .net core identity uses bootstrap default, and it is not possible to reach that. The solution around that is to create a CSS-folder in "wwwroot", that will be read after the default bootstrap. Even though I would have like to create my own bootstrap theme, I can live with this.
But now I see that the angular lives with a different "theme". Even though it uses many of the same classes I have to define each class in my angular app also in the "styles.scss".
So many classes will be pretty similar (especially if I use NGbootstrap).
So I tried to import "wwwroot/css/site.css" into my styles.scss, so I didn't need to write it twice, that did of course not work.
Is there any way to use the same CSS document in both places, or is that something I should avoid?
New user to 3rd party bootstrap templates for Ember and need help.
I purchased the INSPINIA admin template from www.wrapbootstrap.com. The download comes with multiple pre-created projects with INSPINIA built in (e.g., Angular, Rails, etc.) but not for Ember. I reached out to the creator to see if they could include a project for Ember and they said no.
So, I am curious, does anyone know how to add INSPINIA to an Ember web application? Is it as simple as ember install bootstrap and then copy the *.css file? Note: the INSPINIA template comes with way more files than just a *.css, and I am using ASP.NET CORE 2.2 for the web API.
Any help is appreciated.
When I did the same thing a few years ago, I bought the theme just for the themed css. I used their less and integrated that into my existing ember build. Nowadays I'd use the scss but it's unimportant.
What is important is understanding that bootstrap js components will not simply work in the context of your ember application. If you want callbacks, events, binding, etc to exist in the context of ember (ie within ember's runloop and lifecycle), you will need to wrap each individual component. Luckily, ember-boostrap does exactly that for you. This addon provides the easiest way for you to pull in your bootstrap scss. This addon also does not use bootstrap's js, but rather is a full implementation of the bootstrap component's in a way that is ember-aware.
ember-bootstrap deliberately excludes bootstrap.js
because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results.
This is the main motivation behind ember-bootstrap. It is possible to
import bootstrap.js from bower_components or the vendor folder. This
is NOT recommended or supported, and you will be on your own. You have
been warned!
Once you've gotten the scss preprocessing properly set up in your ember-cli-build.js file, you should be able to use their markup more or less directly. You will need to have some understanding, though, of when you're encountering bootstrap markup (stuff with data classes that will be handled by bootstrap's js). In moments like that, you simply use ember-bootstrap components instead
I'm writing a single-page web application, but I'm struggling with some frameworks.
It seems almost every modern framework, like Bootstrap or Framework7
uses very basic classnames like row or navbar.
Because of this I can't use both frameworks on a webpage at the same time, which is limiting my options. For some pages (like a homepage) Bootstrap is nice, but for other pages I prefer the components of Framework7.
Is there any way to solve this problem, other than using entirely different HTML-files ?
The following options can be used to namespace CSS:
iframe per framework
Create a SASS file which namespaces each framework using the cascade by prefixing each framework rule with a selector which maps to a parent element with the specified class name.
References
How to namespace Twitter Bootstrap so styles don't conflict
Prevent iFrame from taking parent CSS
I want to use a UI framework for the admin backend in a Wordpress plugin. Unfortunately, most frameworks apply many styles globally rather than explicitly. These global resets and overrides work well for sites built from the ground up, but they can wreak havoc when implemented into an existing architecture such as the Wordpress backend.
I am looking for a UI framework that is (1) designed to be or (2) can be overridden to be applied only to a given region of the page such as by a class name on a parent div. This would allow me to apply the framework to my specific options regions, while leaving the rest of the backend untouched.
I recently started working with YUI's Pure.css, which has an almost non-existant global reset paired with explicit classes all starting with the 'pure-' prefix. However, this framework is a little more lightweight than I'd like. I am looking for something a little more feature-rich along the lines of Bootstrap or Semantic UI.
You can prefix Bootstrap for example, either way you can handle it with less or prefix them yourself with this tool http://www.css-prefix.com/ since this should work for any framwork
for less you'll need something like this
.yourpluginname-bs {
#import (less) url("bootstrap.css");
}
I've started a Rails project and implemented bootstrap-sass into it. A short time later I found a theme/template using a different version of twitter bootstrap. I've added the template to the app but the view doesn't align perfectly as was intended. I then added the specific assets that came with the theme/template to my project (such as jquery version, ANOTHER older bootstrap version) and the result is almost perfect. However, there are still some alignment issues. When I inspect the CSS I can see it's happening because of conflicts between the two versions of bootstrap.
I'm thinking I should make it so that this template only uses the version of twitter bootstrap that came with it. If so, how do I do this? How do I make it so that a rails view will only use a certain css stylesheet and not read from others?
(If this is not the best solution, what are some alternatives I should consider?)
Thanks
Try this out:
1) use 2 layouts (application.html.erb and new_application.html.erb)
2) have two master javascript/css file (application.js and new_application.js, application.css and new_application.css)
3) inside your application.html.erb include the first application.js and application.css, on your second layout, import the new application js and css
4) for the specific parts of your page, on the controlle inherit from the right parent controller for whichever layout you want.
class NewBootstrapController < ActionController::Base
layout 'new_application'
end
class OldBootstrapController < ActionController::Base
layout 'application'
end
Best practice is to try to view your project as consisting of "components" rather than pages. So focus on keeping the styling for your components up-to-date and consistent.
So rather than coding for individual pages, which doesn't scale and is difficult to maintain even with small(ish) projects, look for ways to turn elements into reusable components. Bootstrap is this way by default, so if there are certain components you use more than others, make those the priority for refactoring, and then look for repeating patterns across your pages and try to think about how you can create semantic, component-based classes to describe them.
Instead of this:
.sidebar-home {}
Try this:
.sidebar-narrow {} // or whatever describes your element
The operative point here is that if you will ever work on more than this project, get into the good habit of thinking about your CSS/HTML as consisting of components, and you will be able to reuse code and become much faster at identifying patterns in your UI.