A set of small JavaScript and SASS plugins that are designed to be reusable and enhance your UI.

Get StartedView project on GitHub

Modals, Notifications,
& Popovers

See it in action

Button, Form,
& Text Styling

See it in action

CSS Loaders, Icon Font,
& Compass Helpers

See it in action

Getting Started

Add to your rails app

Add this line to your application's Gemfile:

gem 'expressionui'

And then execute:

$ bundle

Require expressionui

To require all UI modules, add the following to your application.js:

//= require expressionui.all.js

Also add the expressionui sass to your application.css.sass:

@import expressionui

Or customize what you need

If you don't need all the awesomeness just bring in what you'd like:

Require Specific Modules

Components

Notifications

Example code

$('.selector').notify({ style: 'success', message: 'Your success message goes here' });

/
Your success message goes here
x
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.
!
Your tip goes here
x
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.
i
Your info goes here
x
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.
x
Your error goes here
x
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.

Loading

Example Code

$('.selector').notify({ style: 'none', loading: 'circles', content: 'hidden', position: 'middle' });

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Verba tu fingas et ea dicas, quae non sentias? Ex rebus enim timiditas, non ex vocabulis nascitur. Maximus dolor, inquit, brevis est. Istic sum, inquit. Ut pulsi recurrant? Simus igitur contenti his.

Modals

Example Code

$('#example_modal').modal();

Launch Modal

Buttons

Default Button

Default Button

<a class="btn" href="javascript:;">Default Button</a> <button class="btn">Default Button</button>

Active Button

Active Button

<a class="btn active" href="javascript:;">Active Button</a> <button class="btn active">Default Active</button>

Disabled Button

Disabled Button

<a class="btn disabled" href="javascript:;">Disabled Button</a> <button class="btn disabled">Disabled Button</button>

Other Colors

<a class="btn" href="javascript:;">Default Button</a> <button class="btn">Default Button</button>

Button Sizes

<a class="btn" href="javascript:;">Default Button</a> <button class="btn">Default Button</button>

Popovers and Tooltips

Example code

$('.selector').popover({ content: $('.popover'), close_on_click: 'outside' }); $('.selector').popover({ tooltip: true });

Launch Popover

Menu with tooltips

Forms

Use these stylings by adding .formto your forms.

<div class="form"> <div class="field"> <label for="user_email">Email</label><input id="user_email" name="user[email]" placeholder="email@example.com" size="30" type="text"> </div> <div class="group split"> <div class="field"> <label for="first_name">First Name</label> <input id="first_name" name="first_name" placeholder="First Name" size="30" type="text"> </div> <div class="field"> <label for="last_name">Last Name</label> <input id="last_name" name="last_name" placeholder="Last Name" size="30" type="text"> </div> </div> <div class="group split"> <div class="field"> <label for="user_email">Favorite 80's Movie</label> <select> <option value="A">Back to the Future</option> <option value="A2">The NeverEnding Story</option> <option value="B1">The Terminator </option> <option value="B2">Top Gun </option> <option value="B3">Ghostbusters</option> <option value="C1">Die Hard</option> <option value="C2">Ferris Bueller's Day Off</option> </select> </div> <div class="field"> <label>Update Profile</label> <label><input type="checkbox" value="twitter"> <span>Update your profile</span> </label> </div> </div> <div class="field"> <label>Tell us what you think</label> <textarea placeholder="Yup I'm a textarea"></textarea></div> <div class="group split"> <div class="field"> <label>Mother's Day Reminder</label> <label> <input class="toggle" name="example" type="checkbox" value="1"> </label> </div> <div class="field"> <label>Other Reminder's</label> <label> <span>Anniversary Reminder</span> <input class="toggle" name="example" type="checkbox" value="1"></label> </div> </div> <div class="group split"> <div class="field"> <label>Favorite Memes</label> <label> <input name="example" type="radio" value="1"> <span>Overly Attached Girlfriend</span> </label> <label> <input name="example" type="radio" value="2"> <span>Ermahgerd!</span> </label> <label> <input name="example" type="radio" value="3"> <span>Inappropriate Timing Bill Clinton</span> </label> </div> <div class="field"><label>Athletic Ability</label> <label> <input name="example" type="checkbox" value="1"> <span>I can do 50 handstand pushups</span> </label> <label> <input name="example" type="checkbox" value="2"> <span>I'm practically Rich Froning</span></label> <label> <input name="example" type="checkbox" value="3"> <span>I had a chili cheese dog for lunch</span> </label> </div> </div> <div class="field"> <label>Post my info to:</label> <div class="field outline"> <label> <input type="checkbox" value="twitter"> <span class="icon">t</span> </label> </div> <div class="field outline"> <label> <input type="checkbox" value="facebook"> <span class="icon">F</span> </label> </div> <div class="field outline"> <label> <input type="checkbox" value="tumblr"> <span class="icon">T</span> </label> </div> <div class="field outline"> <label> <input type="checkbox" value="dribbble"> <span class="icon">D</span> </label> </div> <div class="field outline"> <label> <input type="checkbox" value="pintrest"> <span class="icon">P</span> </label </div> </div> <div class="field group split"> <label>Labels inside</label> <div class="field inside_left"> <label class="icon" for="">U</label> <div class="full"> <input id="user_email" name="" placeholder="Username" size="30" type="text"> </div> </div> <div class="field inside_left"> <label for="">Username:</label> <div class="full"> <input id="user_email" name="user[email]" placeholder="email@example.com" size="30" type="text"> </div> </div> </div> </div>

Icon Font

Add.iconto apply icon font

<div class="icon btn xlarge">1</div>

You can also add icons inline by adding.icon_leftor .icon_rightand the attribute

data-icon="e"

<a class="btn icon_left" data-icon="/">Click Here</a>

!
+
/
[
1
4
5
A
B
C
D
E
F
N
P
R
S
T
U
X
a
d
e
f
i
l
p
q
s
t
w
x

Typography and Post Styling

Expressionui uses Normalize.css as a base reset. Normalize is an open-source project by Nicolas Gallagher and Jonathan Neal.

For additional element styling, add post_style to your text blocks

@import expressionui/post_style

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Styling

Oops you've got an error

Hey, let me give you a tip

Perhaps you should do it this way

Yay, I love cookies

Text Elements

mark tag example

code tag example

s tag example

strong tag example

sup tag example

sub tag example

u tag example

img example: expressionui

samp tag example

small tag example

cite tag example

del tag example

dfn tag example

em tag example

i tag example

ins tag example

kbd tag example

var tag example

Blockquotes

Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt.

Configurable Variables

$pad:10px
$ver: "?v=0.51"
$mobile:700px
$tablet:701px
$desktop:1200px
$large_desktop:1500px
$main:#20BBA6
$accent:#00AFD1
$contrast:#1D3037
$background:#EAEDF1
$highlight:#F27935
$circle_color:$accent
$loading_bars:$accent
$font_size:12px
$link:blue
$title:#585050
$text_color:#141414
$font_stack:Helvetica
$serif:Georgia
$icon_font:expressionui-webfont

Helpers

+amp

Fancy Ampersand

+offscreen

Throw an element offscreen. Great for pre-loading images

+font_stack

Your font stack

+serif

Specify a serif font or alternative font to use throughout the site

+inline_block

Cross browser inline block

+group

A more semantic way to "clearfix"

+transition(0.2)

Adds a basic transition to an element

.not_small +min_height(40px) .not_thin +min_width(400px) .not_tall +max_height(40px) .not_wide +max_width(400px)

Cross browser min everything

+text_color([$color], [$text_shadow:false])

Automatic text color Just pass a base, or background color. Optional second parameter if you don't want a shadow.

+smart_gradient([$color], [$direction: both, top, bottom])

Smart gradients. Great for creating depth based off a single color. Optionally specify the direction of the tint/shade.

+smart_border([$color], [$size: 1px], [$direction: both, top, bottom])

Smart borders. Great for applying borders to gradients. Optionally specify the direction of the tint/shade.

+btn_color([$color], [$background: null])

Roll your own buttons using the smart helpers. Provide a background color for more contrast on the button borders.

+btn([$color], [$background: null], [$style: flat])

Make your own buttons in any color. Just pass the color you want. Optionally specify flat or skeuomorphic.

+shadow_scroll([$background], [$top], [$left], [$right], [$height], [$z-index])

Make a top shadow appear when you start to scroll. for position absolute scroll areas

+text_replace

Remove the text on any element while keeping the layout. Great for old school text image replacement.

+complement([$color])

Automagically select a complementary color. Great for dynamically generated colors.

+text_truncate

Add an ellipse when text is longer than the width of the container. Single line only.

+multiline_text_truncate($lines)

Multiline text truncate. Pass the number of lines you wish to show.Doesn't work on typekit fonts

+tablet-only

Tablet only media query.

+tablet-and-above

Tablet and above media query

+desktop-only

Desktop only media query

+desktop-large

Desktop large media query for your larger screens

.card_wrapper width: 2000px +mobile-only width: auto +media_min_width(701px) width: ($card_width*2) + ($pad+5) +media_min_width(1000px) width: ($card_width*3) + ($pad+5)*2 +media_min_width(1300px) width: ($card_width*4) + ($pad+5)*3 +media_min_width(1600px) width: ($card_width*5) + ($pad+5)*4 +media_min_width(1900px) width: ($card_width*6) + ($pad+5)*5 +media_min_width(2200px) width: ($card_width*7) + ($pad+5)*6

Custom min and max width media queries.

+icon_font

Apply the expressionui icon font to an element. You if its inline we've got you covered.

+flex_me

Flexbox helpers. Add the col(n) classes to specify your flex preference.