Skip to content
Tomáš Zvěřina edited this page Sep 13, 2016 · 5 revisions

fnx|ui comes in with handy utilities you can use.

Typography: http://demo.fnx.io/fnx_ui/css/demo_typography.html

Use classes fs-s, fs-m, fs-l, fs-xl, etc. to change font-size. Align text (text--center, text--left, text--right) and decorate it (bold, underline, italics, strike, monospace).

Padding, margin, border: http://demo.fnx.io/fnx_ui/css/demo_utils.html

Use padding--top, padding--small--left, padding--big--bottom, margin-*, border--left, border--vertical etc to fine tune your UI. "Big" padding (margin) has the same size as the height of an input or a button. See full list of all possibilities.

Shadows: http://demo.fnx.io/fnx_ui/css/demo_shadows.html

Create material-ish depth of your UI with shadow, shadow--big and shadow--huge.

Positioning:

Use class relative, to give you element relative position. Use class fit, to give it:

.fit {
   position: absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
}

Fit works nicely with flex--column, see main content source code here: http://demo.fnx.io/fnx_ui/ng2/#/Cookbook/Table.

Clone this wiki locally