We are very happy to let you know that we have released a new skin for aria templates, called atflatskin. The new skin is available from Aria Templates version 1.4.12 and, as you can imagine from the name, it follows the latest web design patterns giving to the Aria Templates widgets a flat look and feel.
In order to use it, just include this script inside your aria templates application:
and you are ready to go.
The goal of atflatskin is to give a new modern and fresh style to the aria templates widgets, in order to give to the users a different option other than the default atskin. In order to introduce the new design for the skin it was needed to add some features to the framework, features that other skins can benefit too, such as CSS rounded corner without using sprites and other small stuff.
Let’s have a look at the features introduced for skins in general:
- font-size and mouse over are now generic customizable properties;
- text-decoration property of Link widget is now customizable;
- overlay now has the property border-radius available through the skin;
- Splitter widget now has border-radius and background-color properties;
- Icon widget has few new properties: background-size, background-color, border-radius, border-top, border-bottom, border-left, border-right;
- it’s now possible to embed SVG directly through the skin using the data URI;
- Simple frame has new properties as: margin-top, margin-bottom, margin-left, margin-right, border-top, border-bottom, border-left, border-right, border-radius, box-shadow, font-weight, skip border, frame height;
- a new flat layout;
- a new color palette;
- all the icons are svg images embedded inside the skin, using the data URI (so no requests to the server to fetch them);
- new icons for: confirmation/error/info/warning messages, home, arrows, double arrows, checkboxes, radiobuttons, select, selectbox, multiselect, autocomplete, datepicker, close and maximize icon, zoom in, zoom out, expand, collapse, add, remove, save;
- new layout for the Calendar widget;
- new layout for the Autocomplete widget (input field and popup);
- new layout for the DatePicker widget (input field and popup);
- new layout for the Multiselect widget (input field and popup);
- new layout for the Fieldset widget;
- new layout for the List widget;
- new layout for the TabPanel widget;
- new layout for Tooltip widget;
- new layout for Textfield, Datefield, Numberfield widgets;
- new layout for the Button and IconButton widget;
- new layout for the Dialog widget;
- now the Gauge widget is only CSS, no sprites at all;
- new spinner used as loading indicator;
- new layout for the Splitter widget and a new icon (for both, vertical and horizontal);
- new SortIndicator icon;
The skin has been made to work with modern browsers, so Chrome, Firefox, Safari/Mac and internet explorer 10.