#chico ui

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

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