I am starting a developement of a big project and I need to know if to use ViewEncapsulation None or Emulated.
From some reason the default is Emulated but I noticed that Angualr2 Material uses None.
We need to have reusable widgets within the projects and have different styles and also dynamic themes.
I know it's can be done with Emulated but is seems more difficult to manage and not as simple as using CSS rules or override.
What should be the recommended mode for such a project?
The benefits of using 'Emulated' option is, that You will be able to create encapsulated components(styles, template, etc.). Also it will help You to not only create component once(dropdown, table, popup) and reuse it within your current project, but also it can be used in different projects later or being open-sourced, if You will.
The recommended way is using the Emulated option.
It will give you the ability to encapsulate your component, not only the HTML template, but also the styles.
This is the future. It is called web components and I strongly advise you to read about it. For more details, see:
Modular future web components
Shadow DOM strategies in Angular 2
Related
I am currently using Stencil to create a library of web-components. Since it is standard nowadays to support a dark theme I want my web-components to have this build in.
After doing some research I found that :host-context would be a great way to make all components change theme by simply adding a class to the body, but it looks like this feature will never be fully supported.
All of the other ways I found to achieve this, using features such as ::part(), require a significant amount of work from the library's user which I want to avoid.
If anyone has an idea of how to achieve simple theme toggling for web-components please let me know!
I am involved in a project that several people working on a react native project.
I need to find a way to separate the styling tasks form code, in a way that UI develop can work without the need of code developer (from my point of view, a style is a person who define the structure of UI, place components on screen and also define their color and visual representation).
my questions are:
Is there any tools that the style developer can use to create styles and export suitable files for inclusion to project?
How can I make sure that the two team work without duplicating their work by other team? I came from a WPF and Web development, and in that systems, there is a good separation between the UI and codes. For example, In MVVM, the only agreement that stylist and coder should have is the name of component, and the stylist can make all of the styles and coder can do all of the coding without repeating their work (I know that this is over simplified, but the concept is there and a good team can use it). In a web development, stylist create the HTML and CSS, and the coder use angolarJS or JQuery to control the component and attach to their events.
In our styling team we are using skitch, can this tool generate suitable style code for react native? If yes, what would be the workflow?
Any other suggestion on how best to separate styling from coding in react native.
I don't have the best answer for this question, But I can provide you some feedback & tips from my experience.
For separating UI & Business code like in MVVM, you can separate the classes as
Container class (handles all business logic) and
View class (Only responsible for presentation) with styles defined as a separate class that can make use of some universal theme provider
There can be multiple view classes (iOs, Android , if possible Web) but all them will use the main container class for business logic (REfer 1st link for more details)
Refer:
https://blog.cloudboost.io/react-native-a-deep-dive-part-1-5a982f847d20
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
For styling you can opt for some Theme Provider classes that will hold universal themes as an object. The coder can use these styles in the components. The main theme will be defined in the root class with the provider. If you are carefully reusing these styles, you only need to update the styles in one place updating all of them. Also there is support for dark & light themes.
Refer:
https://github.com/callstack/react-native-paper
https://github.com/xinthink/react-native-material-kit
https://github.com/xotahal/react-native-material-ui
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
I made a research, but I didn't find anything to helps me answer this question
When you have a flex project, is it better to use different skins for different components or to use just one big css that has all the styles together?
It is not very clear from the question are you talking about standard components and their custom skins/styles or you're talking about custom components and ways to design them to be customizable?
Anyway I'll try to answer. Spark architecture isn't reject styles and using CSS for component's customization. All the standard components support styles and have out-of-the-box skins which support them. So if you're using standard components with standard skins and it fits your requirements it is better to use available styles for additional customization.
If standard skins of standard components don't fit your needs you have to decide which strategy to choose:
Create skins which support additional customization with CSS. You can choose this option if you're creating some skins for external use (for some other developers or teams). It gives them possibility to use your skins without modification and with additional customization. If you're creating custom components for sale or for a client you also should choose this strategy.
Create skins without additional customization possibilities (all the values such as colors, icons, fills, strokes, fonts are hardcoded). This is the easiest way to create skins. And it allows you to perform skin's modifications easily. You should choose this options if you're creating skins for the particular project with particular look and feel. The main advantage is you can create and modify skins very simple and fast with more flexible usage of external tools such as Flash Catalyst.
I imagine changing the styling is a common requirement. Say a user wishes to change the background colour and the font style. I'm looking for a component fit into any flex application and edit the style sheets.
I know I can build one from scratch using the (get/set)Style methods and using the StyleManager class, however I didn't want to "reinvent the wheel." I assume there is a component that someone has already written - google hasn't thrown up a suitable candidate.
There's no such base component. Setting styles is very personal, so there's no common solution.
BTW, look up here