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
Related
It is possible to scope styles in Vue component using this approach:
<style scoped src="bootstrap.css"></style>
But issue here arises when there are several components on a page using bootstrap and scoping it several times leads to a CSS code duplication issue - bootstrap.css is included multiple times.
Is there a way to reduce such CSS code duplication or is there another way to have scoped CSS?
Building using webpack and gulp task runner through Visual Studio
It is a legacy ASP.NET Web Forms app and importing styles globally breaks page styling.
Holy grail here is that adding scoped reference to bootstrap.css in vue component, but some magic tool/plugin during webpack build step could automatically check what classes are being used and scope (or extract) only those classes only, so code duplication still exists but not that huge as scoping same CSS files several times and I don't have to pick each of those classes manually and add it to scoped css section. Example of this scenario is .NET assembly weaving.
UPDATE: Ended up with using
<style scoped src="bootstrap.css"></style>
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
As I become more familiar with Angular, and the vast number of modules out there for making an application really shine, I am also becoming overwhelmed at understanding the basic logic of CSS overloading, and how to manage the imports to get the desired behavior.
For instance, I have pulled the following libraries into my Angular application; Boostrap, Bootcards, boostrap-select, font-awesome, and some custom bootstrap-wizard libraries for a modal tab-based wizard.
All of these libraries require being defined in the index.html page of my Angular app (both the CSS files the JS files). How do you manage the desired behaviors so that one components styles don't override another components styles? What are the best practices around bringing in multiple components and using them in an Angular app, without negatively affecting the applications previous behaviors?
You have 3 choices:
Place more important CSS files AFTER less important ones so the more important override when both have same attribute names.
Manually go in stylesheet and change attribute names.
Instead of including the stylesheet in index, include it in your html file
What is the convention when it comes to AngularJS directives and styling them?
Do I style via JS or stylesheet? How do I keep things self-contained and modular?
It depends heavily on the framework you use. In many MVC frameworks, you can write your own view helpers which automatically append a JS-file and CSS-file belonging to the same directive. Otherwise, you can use directive templates or Shadow DOM.
There is no convention as this is an issue with other libraries like extjs. However, in extjs, each component has a config to put styles in much like inline styles.
My approach is to include a separate css with the directive as it nicely separates the styling. And since angular directives allow separate template, your html is nicely separated from the javascript as well.
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.