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?
Related
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.
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
Microsoft provides a fantastic template for developing Angular (not AngularJS) in ASP.NET Core as outlined in their article "Building Single Page Applications on ASP.NET Core with JavaScriptServices".
While it's very straightforward, there is one portion of the template that caught me off guard: instead of there simply being an app.module.ts file, there are both an app.module.client.ts and an app.module.server.ts.
I failed to find anything that explains this on the web. Does anyone have any idea why there are these two separate files for the app module, what their specific uses are, how to use them, etc.?
If it helps at all, here is what the full template looks like:
I should note that ClientApp/app/models and ClientApp/app/services are two folders I added for my own purposes; they are not part of the template. Also, app.module.shared.ts is actually very straight-forward and just prevents having to write some code twice, so don't worry about it.
Here is what the two files look like:
Let me start by prefacing that I'm not 100% on the accuracy of this statement, but since nobody else seems to have answered, I'll give it a shot.
Microsoft SPA with Angular 2 utilized Angular Universal to do the AOT rendering. It has now been upgraded to use Angular 4, which doesn't use Angular Universal. My thought is that it instead broke up the app.module.ts into a client and server file to help with AOT rendering.
The app.module.shared.ts file is actually just a global constant that is used by app.module.client.ts and app.module.server.ts. Because it all gets rendered into a couple js files during publication, it doesn't really matter that they split up the app.module file.
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");
}