New aria templates flat skin

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:

<script src="/aria/css/atflatskin-1.4-12.js"></script>

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;


Other than that, the new atflatskin presents:


  • 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 new skin has a new font-size: 14px, bigger than atskin, it uses border-radius: 3px for input fields and border-colors for error state and mandatory/read only/disabled fields. It uses a new color to highlight elements inside a dropdown menu.

The skin has been made to work with modern browsers, so Chrome, Firefox, Safari/Mac and internet explorer 10.

You can see how atflatskin looks like, having a look to the gallery below.


Leave a Reply

Your email address will not be published. Required fields are marked *