LeoNguyen.

com

Outline
- References (bit.ly/1jdFrJA) - Bootstrap references (bit.ly/1tIFHpy) 01. Pattern 02. Text 03. UI Framework 04. Navigation: - Horizontal Navigation - Vertical Navigation - Accordion - Popover 05. Input: - Button - Dropdow List - Datepicker - Form - Widget 06. Display: - Progress Bar - Notification - Tags - Effect - Others

01. Pattern

Noise Texture
- www.cssmatic.com/noise-texture

Ultimate CSS Gradient Generator

- http://www.colorzilla.com/gradient-editor/

SVGenerator
- svgeneration.com

Pattern.CSS3 Pattern
- Enter code: jsfiddle.net/leonguyen/PmXHY/

02. Text

Text Shadow
- www.themeshock.com

CSS Type Set

- www.csstypeset.com

Type Tester
- www.typetester.org

Icon Builder
- http://livetools.uiparade.com/icon-builder.html

Text.Text-Shadow
- Enter code: jsfiddle.net/leonguyen/uCL5g/

03.UI Framework

Outline
- Compatibility - Reset - Boilerplate - Framework

Compatibility

IE version
- jsfiddle.net/leonguyen/UERWV/

Reset

Eric Meyers Reset CSS

- http://bit.ly/1bxTgRl

Normalize.css
- http://necolas.github.com/normalize.css

Others
- HTML5 Doctor CSS Reset (www.html5doctor.com) - Yahoo! (YUI 3) Reset CSS (bit.ly/1bQc2Sk) - CSS Reset (www.cssreset.com) - Selectivizr (www.selectivizr.com)

Boilerplate

HTML5 Boilerplate
- www.html5boilerplate.com

Initializr
- www.initializr.com

Shibui
- projects.craftedpixelz.co.uk/shibui/

CSSFlow
- www.cssflow.com

CSS Layout Generator

- csslayoutgenerator.com

Faux Width CSS Layouts

- faux-width-css-layouts

Fixed Width CSS Layouts

- fixed-width-css-layouts

Framework

Twitter Bootstrap
- getbootstrap.com - startbootstrap.com

Twitter Bootstrap - Template

- TemplateVamp (bit.ly/1bqpnEk)

Foundation
- foundation.zurb.com

Semantic UI
- semantic-ui.com

UIkit
- getuikit.com

Others
- Topcoat (topcoat.io) - Gumby (gumbyframework.com) - HTML KickStart (www.99lime.com) - MaxmertKit (http://maxmert.com) - MetroUI (http://metroui.org.ua) - Responsive Web Page Layouts (www.responsivewebcss.com) - Ratchet iPhone (http://maker.github.com/ratchet) - ChocolateChip-UI (www.chocolatechip-ui.com)

jQuery UI

jQuery UI
- www.jqueryui.com

jKit
- jquery-jkit.com

04.Navigation

HozNav.Top Bar
- Enter code: jsfiddle.net/leonguyen/ybwSm/

HozNav.Dark Navigation
- Enter code: jsfiddle.net/leonguyen/fZDwP/

HozNav.Tabbed Navigation
- Enter code: jsfiddle.net/leonguyen/zFpXm/

HozNav.Graphite Navigation
- Enter code: jsfiddle.net/leonguyen/yaqXn/

HozNav.Light Horizontal Navigation

- Enter code: jsfiddle.net/leonguyen/EJFaZ/

HozNav.Dark Horizontal Navigation

- Enter code: jsfiddle.net/leonguyen/8j7xS/

HozNav.Menu Notification Badges

- Enter code: jsfiddle.net/leonguyen/scShN/

HozNav.Sky Mega Menu

- Enter code: jsfiddle.net/leonguyen/AMKAV/

HozNav.App Navigation with Notification Badges

- Enter code:

VetNav.Inset Side Navigation

- Enter code: jsfiddle.net/leonguyen/K3Mg7/

Accordion

Accordion.Vertical Navigation Menu

- Enter code: jsfiddle.net/leonguyen/9ATK5/

Popover

Popover.Animated Profile Popover

- Enter code: jsfiddle.net/leonguyen/q5gGr/

Popover.iOS Style Popover

- Enter code: jsfiddle.net/leonguyen/QWg9G/

DropList.Search Dropdown
- Enter code: jsfiddle.net/leonguyen/Pscfr/

Form

Form Builder
- http://livetools.uiparade.com/form-builder.html

Form.Login Form
- Enter code: jsfiddle.net/leonguyen/EC4zA/

Form.Login Form 2
- Enter code: jsfiddle.net/leonguyen/P33km/

Form.Login Form 3
- Enter code: jsfiddle.net/leonguyen/VEpjJ/

Form.Login Form 4
- Enter code: jsfiddle.net/leonguyen/PcLjA/

Form.Login Form 5
- Enter code: jsfiddle.net/leonguyen/aswUB/

Form.Login Form 6
- Enter code: jsfiddle.net/leonguyen/GBRsE/

Form.Facebook Login Form

- Enter code: jsfiddle.net/leonguyen/tExNq/

Form.Dark Login Form

- Enter code: jsfiddle.net/leonguyen/2EuU5/

Form.Login Form
- Enter code: jsfiddle.net/leonguyen/hSXQR/

Form.Sky Login Form

- Enter code: jsfiddle.net/leonguyen/qMSjp/

Form.Sign Up Form
- Enter code: jsfiddle.net/leonguyen/k92aH/

Form.Registration Form
- Enter code: jsfiddle.net/leonguyen/jyCpu/

Form.Modal Box Contact Form

- Enter code: jsfiddle.net/leonguyen/PWAvz/

Form.Newsletter Sign Up Form

- Enter code: jsfiddle.net/leonguyen/yX7Du/

Form.Checkout Form
- Enter code: jsfiddle.net/leonguyen/AfmYG/

Form.Settings Panel
- Enter code: jsfiddle.net/leonguyen/tPfKD/

Form.Medialoot CSS UI
- Enter code: jsfiddle.net/leonguyen/xzXDr/

Widget

Widget.File Download Widget

- Enter code: jsfiddle.net/leonguyen/VwFGP/

Widget.Simple To-do List

- Enter code: jsfiddle.net/leonguyen/WL7NB/

Widget.Task List
- Enter code: jsfiddle.net/leonguyen/Yy86v/

Widget.Tabbed Widget
- Enter code: jsfiddle.net/leonguyen/SP4Rn/

Widget.Shopping Cart Checkout Widget

- Enter code: jsfiddle.net/leonguyen/5QdsS/

Widget.Mini Social App

- Enter code: jsfiddle.net/leonguyen/jmAet/

Widget.OS X-style Transparent Window

- Enter code: jsfiddle.net/leonguyen/kCZrb/

05. Input

Button

CSS3 Button Generator

- www.css3buttongenerator.com

Button Maker
- www.css-tricks.com

Button Builder
- http://livetools.uiparade.com/button-builder.html

Button Download
- www.button-download.com

Button Essentials
- bit.ly/1dLygDf

Button.CSS Buttons
- Enter code: jsfiddle.net/leonguyen/uuqdu/

Button.Glossy Buttons
- Enter code: jsfiddle.net/leonguyen/uTgWS/

Button.Download Buttons
- Enter code: jsfiddle.net/leonguyen/98qRD/

Button.3D Buttons
- Enter code: jsfiddle.net/leonguyen/3Ru4S/

Button.Multi-colored Push Buttons

- Enter code: jsfiddle.net/leonguyen/Txtek/

Button.Social Buttons
- Enter code: jsfiddle.net/leonguyen/uT3Xy/

Button.Share Buttons
- Enter code: jsfiddle.net/leonguyen/dU3e7/

Checkbox

CSS Checkbox
- www.csscheckbox.com

Button.Check Buttons
- Enter code: jsfiddle.net/leonguyen/bkK57/

Button.Toggle Switches
- Enter code: jsfiddle.net/leonguyen/aRu6D/

Button.Simple Toggle Switch

- Enter code: jsfiddle.net/leonguyen/Xxfjz/

Button.Selection Widget
- Enter code: jsfiddle.net/leonguyen/ze4xy/

Dropdown List

DropList.Mini Dropdown Menu

- Enter code: jsfiddle.net/leonguyen/hRu6F/

Datepicker

Datepicker.Dark Datepicker
- Enter code: jsfiddle.net/leonguyen/CccK9/

Datepicker.Mini Calendar
- Enter code: jsfiddle.net/leonguyen/y5vNA/

Datepicker.Little Calendar
- Enter code: jsfiddle.net/leonguyen/Z3hNH/

Datepicker.Month Picker
- Enter code: jsfiddle.net/leonguyen/8AdTe/

Other

Ribbon
- http://livetools.uiparade.com/ribbon-builder.html

FESS
- www.fess.me

ProCSSor
- procssor.com

Layer Styles
- layerstyles.org

CSS3 PIE
- css3pie.com

Spritebox
- spritebox.net

Shorthand Cheat Sheet

- bit.ly/1b6yrb8

06. Display

Menu

CSS Menu Maker

- cssmenumaker.com

CSS3 Menu
- css3menu.com

Progress Bar

Progress.Multi-colored Progress Bar

- Enter code:

Progress.Animated Progress Bar

- Enter code:

Progress.Metal Progress Bar

- Enter code:

Notification

Notification.Growl Notification
- Enter code:

Notification.Notification Windows
- Enter code:

Tags

Notification.Sliding Tags
- Enter code:

Effect

Hover.css
- ianlunn.github.io/Hover/

Others

View.Notepaper Blockquote
- Enter code: jsfiddle.net/leonguyen/H8ybr/

View.Notepad
- Enter code: jsfiddle.net/leonguyen/VLPGj/

View.Pricing Table
- Enter code: jsfiddle.net/leonguyen/aBkBB/

View.Plans & Pricing Table

- Enter code: jsfiddle.net/leonguyen/WDHXF/

View.Analytics Widget
- Enter code: jsfiddle.net/leonguyen/g2gZs/

View.Chunky Calculator
- Enter code: jsfiddle.net/leonguyen/cRgHA/

View.Flip-down Clock
- Enter code: jsfiddle.net/leonguyen/SwseL/

View.Ribbon
- Enter code: jsfiddle.net/leonguyen/nzzp3/