YUI3 CSS Extras

First, include it on your page

Add the CSS on your page:

<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

Photography by Bob Protus

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

Photography by Bob Protus

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> .

• yui3-thumb-eliptical
• yui3-thumb-rounded
• yui3-thumb-bordered
• 

  Landscape

  Beautiful desert images in Utah. By Bob Protus

  yui3-thumb-bordered

Photography by Bob Protus

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

Code

Designate text as being code as in this example...

For example: When using a <div> make sure to...

To show a block of code, wrap it in a <pre>...</pre> tag.

for (i = 0; i < 10; i+=1) {
    myValue = i;
}

Badges

To create a badge, use a <span> tag, and add one of the badge classes as shown below. Badges are great for categorizing and color-coding items.

1 success warning A 3.8 inverse

Notifications

Create notifications by adding a class to it's <div>. Subtle grey notifications can be implemented by using the yui3-alert-subtle class name. Create a more noticible alert by using the yui3-alert-urgent. Regular notifications can be created by using the yui3-alert-normal.

Contextual Modals

Contextual Modals are great for displaying small amounts of additional content on demand. They can be triggered upon some user interaction. These modal boxes can contain any type of content that you want.

To implement these modals, use the markup below. You can change the classname from top to left, right, or bottom based on what direction you want the arrow to point.

Contextual Modals with Grids

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

Buttons

Buttons are provided through the cssbutton button. You can use it from the CDN:

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

Attach the .primary or .error class names to toggle styles.

Highlights Primary Button Be Careful!

Large Button

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

Big click target

Small Buttons

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

Smaller target.