Migrating Web Project to Xamarin: Using LESS and CSS and Pseudo HTML Tags
Working on design for organizations that are many years or century on market where design is process and “simple” change has mass effect on milion of users, retailers, subbranches, copy papers, business cards and discussions with design team and product owners.
In other words: Design is delivered as it is and have to be done.
Goal of this article is show how easy is to start delving enterprise design needs.
To show this process I found perfect style guide similar to what I already work but PUBLIC:
Very good enterprise style guide or even design system, how you can see
CSS HTML is language that designers are using.
Setup: Adding LESS support
Instead of fallowing @benetskyybogdan instructions decided that I download Bohdan project and included to mine project and do some modifications
2. Ups npm install
3. Edit gulp.js and run via task runner
MainPage.css was created in Xamrin.Forms project.
Branding book and corporate colors there is not much discussion.
UX Library - Colours
The Scania brand colours are derived from the Scania symbol and wordmark and effectively establish, represent and…
As you could see colors.less and variables.less are delivered.
- Add less files to StyledApp.LESS
- Import variables into colors
3. Modify gulp.js to include all LESS files
4. Run less task
5. See result files in Xamarin.Forms project
Fonts and Icons
Fonts and icons will be handled this way:
Adding Embedded Fonts: Custom Fonts in Xamarin.Forms | Xamarin Blog
Gerald There are a number of posts about using custom fonts in Xamarin.Forms. However, embedded fonts definitely takes…
Developer need to handle Regular, Bold, Italic, Headline, Headline Bold as well as Condensed, Condensed Bold and a Condensed Italic versions as well as Cyrylic alphabet versions that would be ? 8x2=16 font to handle, that would give: x H1..HX, p1…pX styles ?? , a lot of styles to handle.
Unfortunately I haven’t found anywhere on top ttf files, so for let’s assume that fonts where delivered. For example will take
This font, created by Darrell Flood, is free to use for personal use (tho I appreciate donations!) Please give as much…
I often don’t use svg or images if is not really required, in most cases delivered by graphic designers via:
IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites…
For example purpose I will also use random font:
Designed by Francesco Canovaro, Byŏm is a contemporary sans serif typeface family based on natural, round shapes that…
CSS HTML is language that designers understand, to avoid unnecessary discussions that H1 is Title … or “Mobile Apple Guidelines” it much easier to define XAML in way that design team will understand it and maybe will be able to review XAML to deliver best user experience, look and feel.
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
Design teams are sometimes open for changes but more often it’s long process threw many people. It is easy to start with existing style guide delivered from web css and include it to Xamarin.Forms. Pseudo HTML is just a notation to easily communicate with design team. XAML is alien thing for designers but html/css is thing that is even done high school.
Once style guide / design system components are defined as body, badges, headers, buttons… than making UI is as building from Lego, that is fast and easy. Implementing full style guide depend on design but it is likely that enterprise customers already paid for design, they understand that all is custom and are willing to have it done.
OK, if liked the idea of Pseudo HTML / pHTML leave a comment, clap ….