YUI3 CSS Extras

First, include it on your page

Add the CSS on your page:

<!-- This module depends on Normalize.css so pull that in first -->
<link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/1.0.2/normalize.css">

<!-- Now, the CSS file for CSSExtras... -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2013.01.09-23-24/build/gallerycss-cssextras/gallerycss-cssextras.css">

Optionally, you can load it through the YUI().use():

  YUI({
    //specify a gallery build
    gallery: 'gallery-2013.01.09-23-24'
  }).use(gallerycss-cssextras', function(Y) {
    Y.log('YUI Loaded');
  });

Images

Styling of three different types are available for images, eliptical, rounded, bordered. To use them, just add one of these classes to the <img> tag

When using class yui3-img-eliptical, if the width and height of the image are equal, it will appear as a circle.

Thumbnails

Add the class yui3-thumbnails to the container <ul>, Then add one of the classes, yui3-thumb-eliptical, yui3-thumb-rounded, or yui3-thumb-bordered, to the <a>, .

• 
• 
• 
• 

  Rocket – game concept

  This is a great shot from Jozef Mak from Dribbble.

Adding a <div class="caption"> allows you to customize the thumbnail with additional content.

if you have YUI grids on the page, add yui3-u-* for multi-column thumbnails that scale to fit the columns.

• 
• 
• 
• 

  Thumbnail label

  Curabitur et sapien ac diam pharetra lacinia quis ac tortor. Suspendisse dictum fermentum dui at mollis. Nunc pulvinar blandit diam in vehicula.

Badges

To create a badge, use a <span> tag, and add one of the badge classes as shown below

A badge Success badge 4 Badges can have a bunch of content 8 or not much at all.

Alerts

Create alerts by adding a class to it's <div>.

Default Alert

The default alert can be set by adding the yui3-alert class name.

Error Alert

Alerts in red have the connotation of something going wrong. The error alert can be set by appending the yui3-alert-error class name in addition to the yui3-alert class name.

Warning Alert

If you want to send a warning notification, use the warning alert. It can be set by appending the yui3-alert-warning class name in addition to the yui3-alert class name.

Success Alert

Mission successful? Use the Success Alert! It can be set by appending the yui3-alert-succes class name in addition to the yui3-alert class name.

Contextual Modals

Contextual Modals with Grids

You can use grids within these contextual menus for interesting effects.

Buttons

Buttons are provided through cssbutton, so you'll need the following stylesheet:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssbutton/cssbutton-min.css">
        

A regular button Selected

Secondary Error Success Warning

Block

Large Button

Large buttons have twice the padding of regular buttons. Apply the yui3-button-large class name.

Big click target Big Success

Small Buttons

Small buttons have half the padding of regular buttons. Apply the yui3-button-small class name.

Smaller target Smaller Secondary Button Smaller Warning Button Smaller Error Button