README

x.ui.10

getting started

install with npm

npm i x.ui --save

import x.ui in your [project].scss

@import '~x.ui/scss/x.ui'

create your [project-config].scss

this file only contains the needed parameters for your interface. import your config file in this order:

@import '~x.ui/scss/x.ui'

your parameters overwrite the excisting definitions in _xui-config.scss. Go directly to scss/_xui-config.scss or explore all config-options in the documentation.

update x.ui 9

in x.ui there are several breaking changes. please follow this instruction to update to x.ui 10

 `~x.ui/src/x.ui` // old
 `~x.ui/scss/x.ui` // new

1. update mixins and funcion references

all functions and mixins are kebab-case now. Also some names are simplified for better convinience

renamed arrayMagic() to array-magic()
renamed getBreakpoint() to bp()
renamed flattenColor() to flatten-color()
renamed getColor() to get-color()
renamed getSpace() to get-space()
renamed setContrast() to set-contrast()
renamed setHover() to set-hover()
renamed shadeByContrast() to shade-by-contrast()
renamed stripUnit() to strip-unit()
renamed systemColor() to system-color()
renamed varColor() to var-color()
renamed nextBp() to next-bp()
renamed getBrightness() to get-brightness()
renamed colorDifference() to color-difference()
renamed colorPass() to color-pass()
renamed colorMargin() to color-margin()
renamed contrastRatio() to contrast-ratio()
renamed checkCompliance() to check-compliance()
renamed findContrastLoop() to find-contrast-loop()
renamed brightnessDifference() to brightness-difference()
renamed set-map-breakpoints() to set-data-map-breakpoints()
renamed macro-metrics() to metrics()

2. update config params

changed $base-weight to $base-font-weight
changed $body-font to $body-font-family
changed $headings-font to $headings-font-family
changed $hover-shading to $_set-hover-shading
changed $xui-checkbox- config variables
changed $xui-radio- config variables
rename $divider-color to $base-divider-color
rename $divider-background to $divider-color
rename $divider-background-invert to $divider-color-invert
rename $nav-link-selected# to $nav-link-active#

3. update modifier classes

all modifier classes now have the same prefix is-

rename .has-margin# to .is-margin#
rename .has-padding# to .is-padding#
rename .has-radius# to .is-radius#
rename .has-height# to .is-height#
rename .has-min-height# to .is-min-height#
rename .has-width# to .is-width#
rename .has-min-width# to .is-min-width#
rename .is-bordered to .is-border
change .no-padding to .is-padding-0
change .has-padding[-side] to .has-padding[-side]-3
change .has-padding[-side]-smallest to .has-padding[-side]-1
change .has-padding[-side]-small to .has-padding[-side]-2
change .has-padding[-side]-big to .has-padding[-side]-5
change .no-margin to .is-margin-0
change .has-margin[-side] to .has-margin[-side]-3
change .has-margin[-side]-smallest to .has-margin[-side]-1
change .has-margin[-side]-small to .has-margin[-side]-2
change .has-margin[-side]-big to .has-margin[-side]-5

4. update changed class names

rename .flex-spacer to .flex-space
rename .bumper-small to .bumper.bumper_small
rename .bumper-big to .bumper.bumper_big
rename .spacer-small to .spacer.spacer_small
rename .spacer-big to .spacer.spacer_big
rename .alert-small to .alert.alert_small
rename .alert-big to .alert.alert_big
change .is-visible# to is-block# or is-flex#
change .is-raised# to is-elevated#
change .is-lifted# to is-elevated#
change .is-rounded# to is-radius#
change .toolbar to .titlebar
change .title to .titlebar
change .is-positioned# to .is-placed#
change .img_responsive to .img-responsive
change .img_full to .img-fullwidth
change .bubble to .tag
rename .slider to .range-slider

5. remove classes

remove .well-small and .well-big
remove .is-hidden-from#
remove .btn_glow
remove data-animate use another animation library instead
remove .pull

6. update markup

change .form-group markup to

<div class="field-group">
  <label class="field-group__label">...</label>
  <input class="input" />
  <p class="field-group__info">...</p>
</div>

<div class="field-group field-group_boolean">
  <label class="field-group__label">field-group label</label>
  <input type="checkbox" />
</div>

change .xui-checkbox markup to

<div class="xui-checkbox">
  <input type="checkbox">
  <label class="xui-checkbox__label">...</label>
</div>

change .xui-radio markup to

<div class="xui-radio">
  <input type="radio">
  <label class="xui-radio__label">...</label>
</div>

change .xui-toggle markup to

<div class="xui-toggle">
  <input id="" type="checkbox">
  <label for="" class="xui-toggle__label">
    <div class="xui-toggle__switch"></div> 
    ...
  </label>
</div>

change .nav markup to

<ul class="nav">
  <li class="nav__item">...</li>
  <li class="nav__divider"></li>
  <li class="nav__item">...</li>
</ul>

change .dialog, .deck, .overlay, .toast, .snackbar markup to

<div class="modal-wrapper">
  <div class="modal">
    <!-- whatever you want -->
  </div>
</div>

change .xui-accordion markup to

<div class="xui-accordion">
  <input id="" name="" type="radio"/>
  <label for="" class="xui-accordion__handle">...</label>
  <div class="xui-accordion__target">...</div>
</div>

7. update grid markup

change data-flex-item="grow" to data-col="auto"
change data-flex-item="grow-even" to data-col="auto"
change data-flex-item="fit-self" to data-col="fit"
change data-row to data-grid
remove all is- prefixes from data-flex values
change breakpoint postfix from - to @ e.g. @sm
change data-grid="is-small" to data-grid="small-gutter"
change data-grid="default" to data-grid="default-gutter"
change data-grid="is-center" to data-grid="center"
change data-grid="is-end" to data-grid="end"
change data-grid="is-start" to data-grid="start"

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

x.ui 9.x doc

x.ui 9.x documentation

Usage no npm install needed!