I am working on a Vue component that is going to be shared between two different platforms (Web/Mobile). I also want the component to have the same style/look on both platforms. Each platform is using a different CSS framework.
What is the best way to go about making the style/look the same? Without having two completely different components.
I can think of a few options
Having a prop to set the style
Two different templates and use a mixin
Similar to 1 but have a CSS module that can be toggled
Scope the style so it is not dependent on the platform css framework
Related
Just recently I have begun working with React, and to some extent front-end development. I am using the Material UI framework to develop an application, and I have chosen to use its "styling with JavaScript" approach: styles are defined as JavaScript objects, rather than traditional CSS, for example. All good so far.
I have my components in a component directory, and in a separate directory called style I have a matching file for each component where I define the useStyle hook (per component). That way, each component's style is defined via a unique import.
Now that I am integrating a non-Material UI third party library, the styling it ships with is defined with CSS, so I can just import the CSS file in my React component file to use the styling. But now I end up with a mixture of styling techniques.
Is there a single, consistent, and recommended approach for styling React applications? Is using multiple styling techniques recommended?
I want to create a web component using svelte. To create a web component it's necessary to include the svelte tag option
<svelte:options tag="{"my-custom-component}"></svelte:options>
It creates a custom component with that name but doesn't work properly because we have to provide this tag for all the child components as well! I added it to all the child components but it still doesn't work, turns out I use third-party libraries and I don't know any way to have that option there!
Is there a way to create the custom components with svelte which includes third-party libraries?
You can use regular svelte components (including third party) ones inside your component.
But you'll need to compile those with different compiler settings in your rollup/webpack config.
And due to the nature of scoped styling in web components (Shadow DOM) the css won't work in these components. So it depends on the library if it still works.
You might be able to turn off scoped styling in the future:
Issue #1748: Custom element without shadow DOM
But scoped styling could have been the reason why you wanted/needed webcomponents in the first place.
I like the DataGrid from Clarity Design System. But I want just to use the DataGrid in one component. The other components shouldn't be affected.
I'm using Angular CLI for my project.
The DataGrid just works if I reference the CSS in the .angular-cli.json as follows:
"styles": [
"../node_modules/bootstrap-4-grid/css/grid.css",
"../node_modules/clarity-icons/clarity-icons.min.css"
]
The DataGrid doesn't work if I copy the styles directly to the componet's .css file.
How can my problem be solved?
Unfortunately, Clarity does not provide support for the use of just individual components, and you must include the full clarity-ui styles in your styles array for it to work. Including it inside of the component styles will cause issues because of encapsulation mode in Angular and how it will process the CSS in ways that the Datagrid will not understand.
Clarity is intentionally created as a full design system, and we don't bundle any of the components individually for consumption. There are many reasons, but the major one is that to ensure proper and consistent UX Clarity expects to be the foundation of your application design. The best suggestion I can make is to let Clarity define your design instead of Bootstrap.
UPDATE: The project on NPM is now at #clr/ui instead of clarity-ui.
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
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