Result of re-architectured buttons
Clean HTML Markup of all buttons
Color configuration stored in a SASS List
Font size and font weight configuration
CSS Typography class generator
CSS color class generator
Buttons sharing same properties are only defined once. Makes code more efficient and readable.
While browsing the SASS code of Office UI Fabric I saw a lot of ways to improve the code.
What it does
Create new custom classes based on Office UI Fabric design definitions.
How I built it
I used my SimpleStyle Style Guide as a starting point and transfered some of the pattern of Office UI fabric. I created configuration files for things like font size, font width and colour. Those configurations was used to automatically generated the class names of the framework. In addition the font size have been converted to EM instead of fixed pixels to increase the accessibility.
Challenges I ran into
I need to re-architecture all the class names and controls.
Accomplishments that I'm proud of
Works as expected.
What I learned
SASS is as powerful as expected.
What's next for Hipster UI Language
Add additional patterns and controls from Office UI Fabric
Source code available on GitHub