Chico UI Blog

Hi everyone,

We released a new micro version and those are the bugs fixed:

986 - ch.Min validator

982 - Tabs: It doesn’t emit the event “select” the first time.

981 - Custom validators change received value

Hi there,

We are releasing this new version with some improvements and fixed bugs:

974 - Layer: It's closed with any element that contains the .ch-close class name.

968 - Carousel: redraw() must not go to the first page after calculation.

967 - Carousel: Must be able to eliminate its items.

966 - Carousel: Align arrows without using inline css.

960 - Wrong space between button and links in the form actions.

852 - Content: Configuration with cache "false" keeps caching content.

Hi everyone!

We are releasing a new version of Mesh.

Responsive Mesh

Mesh is now simpler than the previous version and more light. But the main improvement is that Mesh is responsive.

Let's take a look at how the columns will be sized. The left image shows you the desktop size, and the right side shows you how it will be displayed in a devices with less than 480px.

Hi everyone!

With this update, we're bringing you a new feature and some improvements!

New Feature

Wizard

We're introducing the Wizard component to our CSS Library.

Improvements

Modal & New Lite Modal

Two little improvements:

The line under the heading inside the modal was deprecated.

The paddings were incremented up to 20px.

The actions are aligned left side instead to the center.

Modal uses the ch-box-lite class instead ch-box one.

We have added support for the Lite Modal layout.

Important Change

The following CSS class name has changed and it's not backward compatible.

ch-form-options has changed by ch-list-options

Other Improvements

778 - Typography: Create a file with typographies styles

787 - Loading: It should be transparent

780 - Tooltip: Merge styles with shared message boxes

806 - Validation: styles were changed

809 - CSS Library: general styles adaptation

Bug Fixing, Tasks & little changes

807 - Floats: the content public method doesn't set the content when component is active Bug

740 - jQuery: Update to v1.8.3

776 - Delete the .ch-clearfix css class

793 - JS + CSS: Deprecate the .lt-ie7 and .ie6 implementations

Hi everyone!

We have some improvements to the framework that requires some changes. 

The new Content

The Content feature manages and it is responsible for the content inside the component. Most components like Layer, Modal, Tabs, Validation, Zoom uses this feature.

The content could be have three different sources: 

DOM Element 

URL

String

The DOM Element way was changed

Now you must set the jQuery Object instead of the CSS Selector. Let's see it in action.

Before this change, it was like the following example.

$('.layer').layer('#layerContent'); 

But now, you must set it in this as a jQuery object.

$('.layer').layer($('#layerContent')); 

If you are sending the options as a configuration object do the following.

$('.layer').layer({'content': $('#layerContent')});

Maybe you want to add a HTML fragment.

$('.layer').layer($('<p>This is the new content!.</p>'));

If you are instantiating a layer and store it in a variable: 

var layer = $('.layer').layer();

Then, from the content method you can set a different content.

layer.content($('#layerContent'));

Also, the Layer allows you to change the content from the show method.

layer.show($('#layerContent'));

Improvements & changes

Validation default messages

Now, each Validation has a default message. 

If you set a Max validation like this:

$('.amount')required().and().max(10); 

You will get the following:

Component names

To be accurate with the standards, we have changed some component names. 

The TabNavigator component now is called Tabs and the Expando is called Expandable. 

You should instantiate the component in this way 

$('.tabs').tabs(); 

instead the old way 

$('.tabs').tabNavigator();

Don't be worried, you will be able to change it progressively. The old name and the new name will be together for a few versions.

Performance and flexibility

We are going to change the class taxonomy and other things, to be faster, stronger, more flexible and more performant.

In this version we:

started to unify the mobile and desktop framework at the same repository.

release a test engine using Jasmin.

are moving to prototype inheritance way.

changed the Factory.

deprecated the Controllers class.

Bug Fixing

v0.12.2

774 - Tabs: When it gets its content via ajax, it doesn't wor

773 - Floats: The public "content" should be a method, like previous versions

v0.12.1

Hi everyone! 

We've released a minor version it has some visual changes, new features, improvements & resolved issues. 

What did it change?

The UI design team has released a new look & feel. It could be important that you know those changes when you update the v0.11.1. The relevant modifications are in Form, Menu, Message Boxes & Spinners. Take a look!

Form

Message Boxes

Menu

New Features

Spinner Control

The spinner changed its look and it has 3 sizes: .ch-loading-small, .ch-loading, .ch-loading-big 

Other new features

746 - Form: Create big inputs

745 - Datagrid: create new table with controls

Improvements

Close 

The close component now can be used in many ways, with an A, SPAN, P or DIV element. Please, notice in the WAI-ARIA role attribute. It's used to indicate that the element has behavior and its semantic is changed. So, the SPAN element is now a BUTTON, not a sectioning element.

<a href="#close" role="button" class="ch-close"></a> <span role="button" class="ch-close"></span> <p role="button" class="ch-close"></p> <div role="button" class="ch-close"></div>

Other improvements

724 - Core CSS: Close button isn't aligned

715 - CSS Sprites: reduce the file size of PNG files

712 - DatePicker: The floating element should be aligned to the center

Bug Fixing 

744 - DatePicker: disabled days can be selected.

742 - Modal: if you create a new float widget into a modal, closable property fails.

741 - Tabs: The first tab always is open.

720 - Pagination: Hover styles applied in the first and last child always

717 - Layer: width configuration doesn't overwrite min-width in .ch-layer

714 - Tabs: the first tab doesn't show

713 - CSS: The pseudoselector is wrong.

711 - Tabs: .select() method should be getter and setter

708 - Modal: The widget closes by itself when It's showing the second time

Hi Guys!

This version comes with some new features, most improvements and a lot of fixed bugs!

No more support to old features

We have been bringing support to features that were deprecated several months ago.

We think you had a really good time to migrate to the new features and improvements.

It's lighter!

Improvements

See all improvements

Icons

We added an open source font-icon library (Font Awesome) as part of our framework. It provides a better and integrated solution. The font-icons library allows you to be more versatile in setting the size and the color that you want. It's easier and doesn't require a sprite update for every new icon size or color you want to change.

You can use the icons wherever you want! The components are using it too.

This improvement allows us to spare the use of sprites in all major browsers. But yes, we are still supporting to IE7 using sprites.

New Boxes

In addition of ch-box, we've got two new boxes:

ch-box-lite: with no gradient.

ch-box-container: styleless.

Messages as Boxes

Sometimes, we have to give the user feedback in more than one line. That's the reason we made our messages boxes instead of paragraphs.

Now is easier for you to setup a list of errors or a list of tips with feedback messages boxes.

Buttons

The buttons are using now a new box shadow feature to give to it a better, nice and suitable look & feel.

The ch prefix

We have added the ch prefix in all our CSS classes to dismiss any posibility of collision with other frameworks or your own styles.

So you have to use now ch-btn instead of btn.

Bug fixing

696 - Tab Navigator: Vertical tabs has gradient on IE7

684 - Dropdown: the design in "on" state is wrong

682 - Dropdown: The focus and hover shown at the same time

663 - Dropdown: When it hides, it's unbinding all events from document

678 - Carousel: CSS specificity applies to all <li> elements

677 - Carousel: Height isn't updating on adaptive mode

676 - Carousel: asyncData doesn't work without an asyncRender

673 - Carousel: mask height should be the List outerHeight

672 - Carousel: Validate each item on queue

668 - Carousel: on "next()" execution, "prev" event is triggered

671 - Boxes: On IE, gradients ocuppies all available space

670 - Modal: On IE ch-box has a gradient

666 - Menu: select method should return selected child

669 - Email: Regex isn't supporting plus character (+)

620 - Validation: expose bubble instead of float.

Hello y'all! There's a new release of Chico UI.

As always, we're focused on reduce our code weight and improve the performance of the library.

CSS power

We've been working on delete all "cone" images, used by Layer, Tooltip, Validation, Date Picker, Dropdown and more widgets.

Instead of sprites, now we're doing it with CSS. This means we're saving all the images requests.

This was made possible by pseudo-elements ::after and ::before with the content property.

Graceful degradation

On oldies browsers with no support for pseudo-elements, we're requesting only one image file with all cones.

Bug fixing

Also, we've been fixing some bugs:

#658 - Navs: FX doesn't work the first time

#652 - Carousel: When I set a width by conf, margins are not calculated

#640 - Layer: relatedTarget is null

#637 - Navs: Remove ch-hide className on show

#626 - Modal: When close with ESC don't hide the dimmer

Hola!

This release we focused on the Carousel. We’ve been working on scalability, some new features and bug fixing:

Adaptive

This Carousel provides a fully adaptive structure, so you can use it in your responsive designs.

You have to set the size of each <li>element via CSS (as always) and this will be its minimum size when the widget fits to layout.

More configurable

We expanded the possibilities of configure the Carousel (now with CSS too), adding class names to behaviors and adding more configuration parameters. Now you can:

Set a maximum amount of elements showed per page.

Modify the buttons flow to put them over the mask, on sides or delete them.

Change the behavior of the disabled buttons.

Change the distance between the mask and borders.

Bug fixing

440 - Carousel: 2 items are showed when 3 items must be showed

441 - Carousel: Mismatch on items margin

597 - Carousel: prev and next buttons are created in every resize {Awful bug!}

617 - Packer: missing slash in the URL

625 - Url: The regular expresion don't support some sintaxs

Find more

Keep reading all the information about Carousel:

Widget demo

API documentation

Closed issues

Working photos :P

We just have renewed our download center!!

Widgets

There's no more "abstracts", "utilities", "dependencies" or "interfaces" to choose. Just select widgets you want and we do the rest.

Nuget package

We add a reference to the Chico UI Nuget package for those who uses Visual Studio. This feature is available by contribution of Emmanuel Larrieux (@elarrieux) from Montevideo, Uruguay.

Complete archive

Hi everyone!

We are releasing the version v0.10.5. You can grab it from our site.

The Joiner

This robust application allows you to play with Chico's individual files, providing a real-time compilation of all files into one, for testing and development usage. 

Read more

Navs improvements

The Dropdown, Expando and Tab now have got the isActive() method. It provides boolean information of the activeness of the component. 

Bug Fixing

606 - Checkbox and radio labels works with two click         

598 - Fixing gremlin arrows on carousels

589 - TabNavigator: doen't load the content when the URL is with a hash

588 - TabNavigator: selecting a tab that doesn't exist throw an error

585 - Validators - Reposition doesn't work

583 - Carousel: documentation errors 

579 - Url: It must allow port

563 - Buttons: ch-btn-small breaks when used on a link

561 - Validators - Unless form() is instanced, watchers don't deactivate html5 validations

Rock solid

As part of a group of improvements we are making in the structure and internal tools, we are introducing the Joiner.

This robust application lets you program into the separated files of Chico, providing a real-time compilation of all files into one, for testing and development usage.

Using

To see it in action, get the library on GitHub and run the Joiner through NodeJS. Use it through port 3000 on browser or any tag like "link", "script", "img", etc.:

$ cd chico/libs/joiner && node app.js

Accessing

All JavaScript files in development mode (uncompressed):

http://localhost:3000/js

All JavaScript files in production mode (minified):

http://localhost:3000/js/min

All stylesheet files in development mode (uncompressed):

http://localhost:3000/css

All stylesheet files in production mode (minified):

http://localhost:3000/css/min

And you can get the assets too (images, sprites, etc.):

http://localhost:3000/assets/xxxxx.*

Configuration

There is a configuration file on JSON format. It's on /libs folder and lets you change the templates used to generate the joined files, administrate the order of files to be joined, and specify default packages.

License

Hi everyone!

v0.10.4 is up and you can grab it from our site.

Validations

We add .message() method to set or get validations messages:

validation.message(condition, message); // Set new message validation.message(condition); // Get message

Example:

var validation = $(selector).required("This field is required.") .and() .number("This field must be a number"); validation.message("required"); // "This field is required." validation.message("required", "New message to required field."); // Set new message validation.message("required"); // "New message to required field."

Now, there is a new method to toggle the Validation status (enabled/disabled): toggleEnable().

validation.toggleEnable(); // It's disabled validation.toggleEnable(); // It's enabled

Bug Fixing

572 - Validation: .custom() doesn't work if is the last validation

565 - Layer: "rt rb" position doesn't work.

564 - DatePicker: select method returns an object instead of date selected

Hello everyone!

We’ve got a new version up and running, and you can grab it from our site.

There are changes on some class names. We're still supporting the old classes though, at least for a few more versions.

Buttons

We simplified the class names combining them all in only two classes: one that define color, and another for the size.

Color:

ch-btn

ch-btn-skin

Size:

ch-btn-small

ch-btn-big

We also gave ch-btn some default styles, just in case you want to use it alone.

Buttons code snippet:

<input type="button" class="ch-btn" ... />

<input type="button" class="ch-btn ch-btn-big" ... />

<input type="button" class="ch-btn ch-btn-small" ... />

<input type="button" class="ch-btn-skin ch-btn-small" ... />

Icons and Messages Boxes

The icons and messages boxes only  have one class.

Icons code snippet:

<span class="ch-ico-help">Help</span>

<span class="ch-ico-info">Info</span>

<span class="ch-ico-error">Error</span>

<span class="ch-ico-attention">Attention</span>

<span class="ch-ico-ok">Ok</span>

<span class="ch-ico-check">Check</span>

Messages code snippet:

<span class="ch-message-help">Help</span>

<span class="ch-message-info">Info</span>

<span class="ch-message-Error">Error</span>

<span class="ch-message-attention">Attention</span>

<span class="ch-message-ok">Ok</span>

<span class="ch-message-check">Check</span>

Bug Fixing

558 - Controls: reserved word in use.

556 - Floats: The first time that it shows, effects don't work.

554 - AutoComplete: only works two times

546 - Autocomplete, problem with autocompletion from local array

Hello everyone!

We’ve got a new version up and running, and you can grab it from our site.

Positioning the Helper

Now you can decide the "element", "points" and "offset" from where the Helper will be positioned when you create a validation.

To do this you need to add the property context, points or offset in the configuration object. The value of context must be a CSS selector.

$(".theControl").number({ "context": "#someElement", // Element where the Helper be placed "points": "lt lb", // Position references "offset": "10 0" // Displacement form original position });

Controls

The Validation (called Watcher before v0.10.2) was migrated to Controls family. Controls now uses a Float's instance instead a Layer.

Bug Fixing

517 - Countdown: cant add icons or another element beside the input instanced

518 - Countdown: the multiple instance take the last element rendered

529 - Date Picker: i18n on days and month names doesn't reach the calendar

530 - AutoSuggest widget: Callback name is hardcoded

532 - Floats: When "closeHandler" parameter value is "any", event after close is prevented

537 - Autocomplete: If clicked on suggestion, the value doesn't update

AutoComplete

It was improved, now it's part of the Controls family. It can be used within a form. It works like a suggestion list for a specific textfield.

Calendar & Date Picker

Calendar: Is an output widget and it only shows dates and range of dates.

Date Picker: Is an input widget so it lets you select a date. Now you can configurate the component to avoid automatic close when a date is selected.

Bug Fixing