I'm working on an app where each user can define custom colors for its dashboard. Like textColor, accentColor and backgroundColor;
The entire UI will use those colors.
I know how to set a css property dynamic but doesn't seem correct to do it every single element.
I was wondering if I can create a dynamic css and inject it into the app. (is it too much workaround?)
I managed to make it work by using a server-side generated theme.css (something like /users/1.css). Can you smell it?
What's the proper way to do it?
We've developed an application that had to be white label, so we've created directives for the editable items and the directives listened to the service that handled the layout package from server, overwriting if needed the property. In your case you could choose to have only textColor, accentColor and backgroundColor directives instead of each layout component have your own layout directive.
I'm currently looking for a way to actually receive an entire scss from server that would overwrite the variables inside Sass, but I could not find any approach yet.
I would also share this article, that could be helpful:
https://engineering.thetrainline.com/how-we-implemented-a-single-page-application-using-react-3f22e4d545c4
Related
I'm looking to find best practices for providing developers the ability to style elements that exist within my React shared component.
For instance, I have a drop down and I wanted the developers to be able to select a predefined theme that would enable then to select a highlight color, font size, font family for the list element that exists within my drop down component. I created enums for the each of the default themes and provided a way to allow devs to define the theme object and add css to the properties that sat behind that enum. I then injected the style into the functional component.
However, I quickly realized that if I didn't provide a way for the developer to lets say adjust a facet of an element outside of the scope of the theme interface such as the font weight, the developer would not be able to style it and i'd have to go in and add it in and test that it works with all the other style combinations which became tedious and a lot of overhead.
I was wondering if there is an implementation whereby I provide refs to the elements in the component and provide and open-ended CSSProperties style prop that would allow the dev to style to their hearts content? Is there a best practice to do this? Please provide a short example if possible?
One caveat is that frameworks such as Next JS will encode the css modules and make it difficult to allow the user to provide css that'll manipulate the component due to the css element encoding or appended id's. This is why I thought the refs approach might work.
The best solution for you would be using :part . This allows styling through the shadow dom boundary of the parts of your component that you want.
See:
mozilla documentation
an explanation by the person who proposed this: explainer
and some other documentation
If you have an existing angular application, that already have localization working (i.e text load in different languages) if one of those is RTL direction (Hebrew/Arabic etc) how would you go about writing the code for that?
Remember it's not enough to change the dir="rtl" on those warpper/html. For example elements in nav bar have to be mirrored and floated to right.
Popover (when you hover elements) need to change direction and so the list goes on.
Approaches tested for accommodating RTL:
1.
Setting text direction BEFORE we load the app in our app-load module (Using app_initializer)
In that function we can set the dir attribute on the HTML and lang
Based on the user's local language
Later when we bootstrap our angular application we can look into that html attribute
This (1) I like and want to keep doing.
2.
Using only css/less/sass to change the looks of the site after we have 1 working
Those styles (as we want) will only get applied for languages with rtl direction
But when we tried to rotate (mirror) nav links (in header) and change popover directions things got very tricky.
The order of elements in the html as well as the styles need to change, and for some components the changes were significant, therefore we tried approach number 3.
We can still leverage using this approach with the next ones (combine them) so this is still useful.
On more specifics what didn’t work with less was the use of dispaly: flex on a wrapper elements
With combination of :nth-child(i)
Selectors with order: j;
To rotate elemenst in nav bar
Only things like float: right were successful
Also tested some
-webkit-transform: scaleY(-1);
With combination of display:inline-block;
3.
If we could have a simple way to dictate which templateUrl we load into the components
We could then have for A.compoenent one a.html template (default ltr direction) and another
A-rtl.html based on a condition.
See fore ref:
Angular 2 dynamic template url with string variable?
Essentially splitting the templates into 2 but the HUGE benefit would be that we can have the .ts code once
This will be greatt but I can't get this to work.
Even if it’s possible it seems that it will prevent AOT compilation. (or not?)
See for ref: (old post but still relevant)
https://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/
The angular official documentation approach
https://angular.io/guide/dynamic-component-loader
This is working! The issue is that this isn’t exactly what we want. In this approach we load separate COMPONENTS into a placeHolder and not separate TEMPLATES
4.
This approach is to use *ngIf on the template wrapping our ltr (current template) with
And adding a seperate one below it with
There will be some duplication in this case, but this isn’t really code (it’s HTML) it’s simply markup, plus like this we have much more control on how things look and where, and if we need to use for example popover-rtl component instead of the current popover (which again isn’t currently compatible with RTL) we can EASILY do so.
In this approach there are several simple approaches to determine for every component if we are on ltr or rtl text direction (for the ngIf)
In short is using a baseComponent, or a service.
Note: both approaches 3,4 can use what we did in 1 and 2.
Any suggestion on how to get approach 3 working?
Ideally I can get a condition to determine which templateUrl I should load for the component so the the code in .ts is there for both and only markup is different.
Please suggest on Annular 6+ version if possible.
P.S been using this site for over 10 years almost every day and that is my first questions, thumb me up please :)
Thanks!
although a long time passed from your posting:
create a base component, that will hold all the logic.
create as many components per your liking (one for RTL, one for LTR etc). each component will inherit from the base component. each component will have it's own HTML template, styles etc.
you select which component to show, via routing, ngIf or whatever suites you needs.
I'm building an advanced, full-page WYSIWYG tool using Vue. For this, I need to dynamically render a CSS stylesheet based on JSON blobs that contain CSS properties into the <head> of a page.
What is the most performant way to do this? Vue uses the concept of scoped CSS, which is compiled at build time. It doesn't allow runtime modification. What I need is the ability to modify, compile and render the CSS at runtime.
Current solution
I currently have a regular Vue component, in which I use a reducer to transform the JavaScript into a CSS string, which is rendered inside a <style> tag.
However, this entire string gets re-rendered on every single CSS change. This is not performant enough for my use case.
Desired solution
A solution that would render my CSS rules without relying on a single Vue component, so that it's picked up by Vue's Virtual DOM and benefits from its performance.
Now that I'm writing this, I think it might be a solution to render a Vue component for every single CSS class, but I'm not sure if that would work. I'm curious to hear other perspectives to this problem.
We have a Angular 1.x app. Each screen/layout has multiple widgets. We have new requirement to inject a help icon into every widget. To make the setup less intrusive, we have come up with a controller which looks up for the widgets and then injects the icon dynamically.
I would like to ask the UI experts here regarding the appraoch to be used to select the widgets (and hence inject the icon into them). Is selecting by a CSS selector better than selecting by ID (say widget ID)? What are the pros and cons of both approaches?
Thanks,
Midhun
I believe the best way is to create attribute level directive instead.
it can be parameterized like help-article="create_category" or even using several attributes
it's safer to keep classes and id for styling while linking logic to custom attributes
more expected in angular world
I'm building my first Yii2 app in bootstrap and I was looking at a few templates to base the UI in. The problem is that each one offers a few unique form elements that I like. Is it relatively easy to copy form elements from one theme to another?
For example, copying the Ui Elements > Tree View from http://wrapbootstrap.com/preview/WB0B30DGR into another template like http://wrapbootstrap.com/preview/WB0F0419C.
Thanks!
Depending on your experience in CSS and Javascript. I also customized on several occasions templates bootstrap changing some elements. First, it is whether you intend to do only the changes to the graphics and then only the changes to boostrap.css or if you want to supplement / modify the parts managed via javascrit. For graphics all template-type bootstrap behave the same way, then it needs to identify exactly which categories you care about and modify them with the catatteristiche want. For the part controlled by javascrit the situation is similar only the most delicate and complex.