Add this line to your application's Gemfile:
gem 'expressionui'
And then execute:
$ bundle
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
If you don't need all the awesomeness just bring in what you'd like:
Require Specific Modules$('.selector').notify({
style: 'success',
message: 'Your success message goes here'
});
$('.selector').notify({
style: 'none',
loading: 'circles',
content: 'hidden',
position: 'middle'
});
<a class="btn" href="javascript:;">Default Button</a>
<button class="btn">Default Button</button>
<a class="btn active" href="javascript:;">Active Button</a>
<button class="btn active">Default Active</button>
<a class="btn disabled" href="javascript:;">Disabled Button</a>
<button class="btn disabled">Disabled Button</button>
<a class="btn" href="javascript:;">Default Button</a>
<button class="btn">Default Button</button>
<a class="btn" href="javascript:;">Default Button</a>
<button class="btn">Default Button</button>
$('.selector').popover({
content: $('.popover'),
close_on_click: 'outside'
}); $('.selector').popover({
tooltip: true
});
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>
.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>
Expressionui uses Normalize.css as a base reset. Normalize is an open-source project by Nicolas Gallagher and Jonathan Neal.
For additional element styling, addpost_style to your text blocks @import expressionui/post_style
Oops you've got an error
Hey, let me give you a tip
Perhaps you should do it this way
Yay, I love cookies
mark tag example
code tag example
s tag example
strong tag example
sup tag example
sub tag example
u tag example
img example: 
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
Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt.
$pad:10px$ver: "?v=0.51"$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+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.