Hipster UI Language

• 

  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.

Inspiration

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

Built With

• css
• node.js
• office-ui
• sass