UI ASSET
Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.
If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework
In this section we will describe all the current "ui", the stylized buttons and everything around them.
Why did we build all this? Simple ... Most of the web UI is not directly editable via CSS. It was therefore necessary to generate constructs capable of emulating them. HTML superstructures that, to clarify the idea, serve to make what is normally a gray interface with few possibilities user friendly. These "special structures" make the cross-browser user interface more usable and certainly more interesting for the user. Most of these structures are enclosed in simple outboxes (or modals, or offboxes, maybe you know them that way) pre-generated and editable in style thanks to the theme.
Since version 2.8 the system has been optimized in various aspects, including usability, stability and the implementation of some new buttons. From now on, just use the button class to set its size and normalize everything. It will then be via theme that you will manage the appearance of the latter or the modals that derive from it.
Remember that the system prefers a "concept wrap". To simplify, although in some cases the classes work when applied directly to an input:
// Exemple 1: in many cases this is an excellent solution for usability.
<a class="button"> my button link </a>
<button class="button"> ... </button>
//Exemple 2:
<a class="button" target="_self" href=" ... ">
<img class="before" src="data:image/svg+xml;base64, PHN2ZyB ... " />
MY WHATSAPP
</a>
However, the appropriate standard remains a winding in the div / span (_ so ... it's not mandatory but now it can be done_). Trust ... it has its advantages.
<div class="button"> ... </div>
<span class="button"> ... </span>
Another example of basic buttons:
// or for actions
<div class="button">
<a>link</a>
</div>
<div class="button">
<button> classic </button>
</div>
<div class="button">
<input type="submit" value="SUBMIT" />
</div>
<div class="button">
<input type="reset" value="RESET" />
</div>
// or for text
<div class="button">
<input type="text" placeholder="your text" />
</div>
<div class="button">
<input type="email" placeholder="[email protected]" />
</div>
<div class="button">
<input type="search" placeholder="search now" />
</div>
<div class="button">
<input type="url" placeholder="www.yoursite.com" />
</div>
<div class="button">
<input type="tel" placeholder="+39 000 00 00 0000" pattern="[0-9]{10}" />
</div>
<div class="button">
<textarea> .. </textarea>
</div>
all buttons can be found in the [online tester]
After interacting with a button, the framework returns the value chosen by the user in two different formats:
a) value of the text in a P tag inside the
button
b) value in the original input (where possible).
c) wherever possible, as for future versions, within the ui object (example: ui.selectbox[2] ....).
A simple label format
<div class="button">
<label> Label </label>
</div>
another complex exemple...
<div class="button clearized disabled">
<label> Label </label>
</div>
icon tries to position any image in the correct way on a button
<div class="button">
<img class="before" src="data:image/...">
<img class="center" src="data:image/...">
<img class="after" src="data:image/...">
</div>
alternatively you can always use the [standard icons]
If the upload involves more than one element, the system will first check if the files have the right extension, if the amount of files falls within the range and if the total weight or a single element exceeds the values expressed in the input.
If everything is ok, a visa will appear and, if multiple files, the box to open the list of selected files. Otherwise it will generate an error.
<div class="button-file">
<input type="file" />
<p class="ellipsis">Upload File</p>
</div>
or very complex...
<div class="button-file">
<input type="file" multiple="true" size="0.5" maxsize="1.5" minlength="1" maxlength="8" accept="png, jpeg, jpg"/>
<p class="ellipsis">Upload a File</p>
</div>
Select, at click, generates an outbox (to be stylized via theme) for the selection of elements. Dropdown, at click, generates a relative panel.
<div class="button-select"> // or dropdown
<input type="hidden" name value>
<input type="search" placeholder="Search start with..." value>
<label> select an option... </label>
<select value="select an option...">
<optgroup label="Coding:">
<option value="1">VALUELABEL</option>
....
</optgroup>
....
</select>
</div>
from 2.8 we have some additional details.
- the system now provides a hidden input as direct output
- the system now distinguishes value from label inside the select (value = "1" and VALUELABEL)
- the system will keep track of the values if they are already in the hidden field
- the system accept multiple values into hidden (value="3,5,10" multiple)
- As you can see, it will be possible to integrate an internal search (it is optional) to the simple entry of the search field.
At the click automatically generates an outbox datepicker (to be stylized via theme) for the selection of date.
The datepicker is one of the most complex ui present. This is because there are many variations of reading and date format all over the world. Not being able to know where you will publish your work we have provided the button of different options:
-
set a table format:
table types built month by month
UTC: The count of the days and the week starts from Sunday
EUR: The counting of the days and the week starts from Monday -
set a date format
in short is the "Day Month Year" type output for users (in the output label)
DMY DYM MYD MDY YDM YMD -
set a -compact design
attribute class that allows you to delete the extra rows of the days table
from 2.8:
-
recuve a start value exemple: value="10-12-2019"
-
set date range available exemple: min="2015" max="2015"
-
set if multiple date (not raccomented)
exemple:
// classic compact
<div class="button-date UTC MDY -compact">
<input type="hidden" value name />
<label>Select a date...</label>
</div>
// typically European format:
<div class="button-date EUR DMY">
<input type="hidden" value name />
<label>Select a date...</label>
</div>
// classic whit start date, min and max
<div class="button-date EUR DMY">
<input type="hidden" value="10-12-2019" name="" min="2015" max="2015"/>
<label>10-12-2019</label>
</div>
// checkin/out dates:
<div class="button-date EUR DMY">
<input type="hidden" name value/>
<input type="hidden" name value/>
<label>Select a date...</label>
</div>
An important note: It is advisable to retrieve the data of the user choice through the input and not the label tag. This is because the input will always express in international terms (YMD) the value chosen regardless of the settings on the user into the Ui.
The last thing to know. From 2.8 on, it is possible to drag and drop the months and years to facilitate use on the mobile.
A simply a method to select the time of a potential appointment via clock. You can set in hidden input a value, min and max range of hours. an exemple:
<div class="button-clock">
<input type="hidden" name="" value="09:30" min="06:00" max="16:00">
<label>Hours:Minutes</label>
</div>
Progressive count, or countdown, of time.
an exemple:
<div class="button-chronos -reversed">
<input type="hidden" name value>
<label>HOURS:MINUTES:SECONDS</label>
</div>
Number slider with + and - button to select a value in a defined range
<div class="button-number">
<input type="number" min="-20" max="20" value="0" readonly />
<span>+</span>
<span>-</span>
</div>
It can be single or multi-range.
It's a complex button that can enclose different input-ranges with different values and steps.
What it does is construct a reference cursor that runs in sync with the real range, checking if the parameters, between a range and the other, do not overlap.
The available options derive from the original range:
value = "n" the starting value
min = "- n" the minimum value
max = "+ n" the maximum value
step = "n" the value, numerically, between the various steps
step = "n%" the value, in the sliding direction of the cursor
<div class="button-range">
<label><small>min</small><small>max</small></label>
<div class="sliders">
<span class="monitor"><small>0</small></span>
<input type="range" value="-10" min="-10" max="10"/><span></span><b></b>
<input type="range" value="-0" min="-10" max="10"/><span></span><b></b>
<input type="range" value="10" min="-10" max="10"/><span></span><b></b>
</div>
</div>
simple stars rating system
<div class="button-rating">
<input type="hidden" value="3" readonly />
<span class="stars"></span>
</div>
simple password hide/show system
<div class="button-password">
<input type="text" value="" placeholder="Write your pass"/>
<input type="password" value="" placeholder="Write your pass"/>
<img alt="hide/show" title="show your password" src="...." />
<img alt="hide/show" title="hide your password" src="..." />
</div>
see html exemple for have an svg icons equal of demo
<div class="button-checkbox">
<input type="checkbox" name value="1" />
<label>mylabel</label>
</div>
<div class="button-radio">
<input type="radio" name="namelayer" value="1" />
<label>mylabel</label>
</div>
Since version 2.7, if you use a div instead of the spans, the div replaces the icon and creates a selection border occupying the entire area. Since version 2.8, the inputs are checked and at the change of state of: checked the value will become true / false 1/0.
You can then build selective actions (yes / not) through a group and radios:
<div class="button-group">
<div class="button align-[left]">
<label>Do you accept?</label>
</div>
<div class="button-radio" style="width:150px;">
<input type="radio" name="selection" value="1" checked="true" />
<p>YES</p>
</div>
<div class="button-radio" style="width:150px;">
<input type="radio" name="selection" />
<p>NO</p>
</div>
</div>
Method to group the buttons. set-mobile makes monolith the first linear construct.
<div class="button-group">
//all button
//linear - overflow ellipsed
</div>
<div class="button-group setmobile">
//all button
//under 900px is monolithic
</div>
note: button in div is block (wide)
note: button in span is inline (partial)
note: setmobile is always wide
In many frameworks there is no distinction between the "primary, secondary, etc" button types and logical actions.
In the first case we talk about "visual order": a full-bodied button and with contrast will be noticed before a skinny and without backgrounds. This is why they are called primaries, secondary etc ... gradually they are noticed one after the other.
The framework equalizes each one on a standard, to keep the system solid but to eliminate what is superfluous it is possible to take advantage of the reset classes:
.clearized .nobkg .noborder .noshadow .noradius_
an exemple of usage:
<div class="button">
//primary
<button> BUY NOW! </button>
</div>
<div class="button nobkg">
//secondary
<button> Save in wish list </button>
<div>
<div class="button clearized">
//tertiary button
<button> remove from cart </button>
<div>
the same concept helps us to create custom buttons starting from the current theme we are using, for exemple:
<div class="button-MYEXTENSION clearized">
<p>my button users output</p>
<div class="absolute-center animatedcssbackground"></div>
</div>
When it comes to logic, however, we are describing the states of a given action or, to be more precise, a potential consequence of it. To do this the typical colors are used:
no color (or basic color) = common actions
red = attention, non-reversible or dangerous action
orange = attention to potentially dangerous action
blue = everything ok, action that is preferable to complete
green = perfect, action completed successfully
in the framework they are directly defined on the theme through suggested classes such as:
<div class="button bkg-error"></div>
<div class="button bkg-alarm"></div>
<div class="button bkg-news"></div>
<div class="button bkg-pass"></div>
or...
<div class="button border-error"></div>
<div class="button border-alarm"></div>
<div class="button border-news"></div>
<div class="button border-pass"></div>
Install the files and set up the document. The topic: [from start to...]
List and use of all class of the framework. The topic: [Classes]
The file loader, an add-on for read ad upload files via web. The topic: [File Loader system]