from one side i have ionic application, from other side i have pure HTML, CSS3 that contain all the UI/UX. i want to merge theme and give my ionic application the same L&F of my HTML and CSS3 that was design.(i want it be the same 100%)
what is the best way to do it? how i do it?
Note:
i see that i can edit variable and class in ionic SCSS file(my customization override file), but because ionic have his own CSS it override some of my basic CSS like body, h1,h2,h3… element and it create a mess.
i use the slide box and i want also that is L&F will be like my HTML and CSS that design it also differently and i didnt note to specific variables, so what i need to do with JS component from Design aspect?
Write a CSS override sheet that overrides the Ionic base styles. Remember, it’s all CSS and HTML at the end of the day so it works the same way as any other web technology.
if you need to override global for h1, etc, for all pages, then the best chance is using SASS, but if you only change for small part for some page only, then its better to override via custom style.css
The issue is that i have CSS and HTML that i get from designer, and for small example it contain:
h1{
text-align: left;
}
but ionic css(sass) by default have more attributes to h2, so it will add them to h2 element. This is why in general the L&F will NOT be the same as regular HTML and CSS without ionic.
i think the best solution is to handle both variable and maybe css ionic class(if needed) to create not 100% percent but very similar to the design that it get.
Thanks Guys