➜ BUTTONS KIT:
All ui in framework
❯❯ Basic Ui the resets :
All ui is in 'button' wrap. all button wrap reset inner input and ui element. In short: From non-cross-browser inputs to units that are always the same for everyone
link
button
input submit
input reset
label
input email
input phone
input url
input search
input number
text
password
left, right,center
simple textarea
❯❯ Ui in group:
Regardless of which button is, it can be grouped into a "button-group". If you want to make it vertical in the mobile version it will be necessary to add "setmobile" to the class.
button-group (classic)
button-group (setmobile)
❯❯ Manage the size of the buttons :
All buttons have a fixed size set by the theme. This magnitude is elastic and intrinsic to the text you format within it. Emphasizing that we're talking about elastic fonts on elastic layouts: The button will be text between 12px and added padding of 10px
(it's an example, becouse the it's size is a css calc from multi-ranges, see the theme)
These dimensions can be changed in the theme or directly but you can use pad and space of core. Now... You may have noticed that the theme is a core system override. If you wrote the padding on the theme directly you would replace the core classes with that. How to do? here's the trick you need: [class*=button]:not([class*='-group']):not([class*='pad-']):not([class*='space-']) { padding:MYPADDING; } into theme and all core sizes will be available again ;)
❯❯ Ui logical presets:
Create usability combo via logical theme classes (we suggest building custom classes)
❯❯ Ui Check & Radio design:
Radio
Radio
Checkbox
"Explicit" (A group of radio)
❯❯ Ui Redesigned:
button-password
button-rating
number
range
select
dropdown
select + search
dropdown + search
select + search + multiple
dropdown + search + multiple
clock
timer
date (UTC YMD -compact)
date (EUR DMY)
date (EUR DMY min max start)
date (EUR DMY multi date)