Customize sass : Help for my Ionic app for my probation period


#1

Hello the community,

I am french and i follow a formation in school for 1 year to become a mobile dev, my probation period for 4 months is to develop a mobile app cross-platform with Ionic in a web agence. Im not an expert in web technologies for the moment but I learn more each days. My main skill is the Java language and Android.

My main question is how to perform a good app integration with Ionic and sass ? I mean its easy to build a nice ios-like interface with default Ionic elements but for my project I have a .psd from the graphiste with custom styles and icons. What is the good way to do that ? Use default styles only for make the interface and custom the classes after with sass ? Don’t use the defaults styles and create all styles from scratch ? I am a little lost with this problem and I am open at all suggestions.

Thanks and sorry for my approximate english :slight_smile:

ps : if some french guys are on the forum, i will be happy to talk with them in Molière language ! Pm me :smiley:


#2

Hi Jerome,

(I’m also french :slight_smile: )

Basically, ionic is “just” an UI layer on the top of angular so yes, you can perfectly custom it to fit your design. For our projects we overload some ionic mixins (typo, forms, buttons) & we add our own style using sass.

So short answer: do the both !

Long answer:

  1. Look at all the existing ionic css components : http://ionicframework.com/docs/components/. Rebuilding the wheel is not very “productive” so it can be good to see if some of them perfectly fit your needs.
  2. Look at your mockups to determinate some “design patterns” : same typo, same elements that looks likes card, same shape,…
  3. Determinate for each design pattern which can be easily build by customizing ionic component and the other that you have to build by yourself.

#3

Hi ghz,

Happy to see a other french :D. Thanks for your answer, I love that :). Exactly what I was missing !

I have one other question about the icons. I have icons in SVG from the graphiste and I thought about the best solution to use it into Ionic.