Sexy CSS3 Flashes
Use these CSS3 flashes in your rails app. DEMO: http://plapier.github.com/sexy-css3-flashes/
These flashes solve the problem of flash messages being displayed inline, which tends to often break an application layout or page styling. Sexy-CSS3-Flashes are absolutely positioned so they float above page content, therefore page layouts remain intact and undisturbed.
These flashes are also optimized for iphone/ipad use.
- Sass 3.1.1+
Everything in flashes directory, place respectively in your rails app:
- _flashes.html.erb partial into app/views/shared/
- sass files into public/stylesheets/sass/
Add the flashes partial to your layouts:
<%= render :partial => 'shared/flashes' -%>
Styles / Themes
There are two default themes provided: DARK & LIGHT.
Alternatively, a CUSTOM theme can be defined in _custom-theme.scss. See CUSTOM Theme below.
DARK or LIGHT Theme
To toggle between light & dark color themes, edit _flashes.scss:
$flashStyle: dark; OR $flashStyle: light;
The highlights and shadows differ between DARK and LIGHT styles, therefore if you change the gradient colors, it is necessary to use the appropriate flashStyle theme.
If you want to change the flash message background gradient using the dark theme, edit the following variables:
$dark-background-from: #595959; $dark-background-to: #3C3C3C;
If you want to change the flash message background gradient using the light theme, edit the following variables:
$light-background-from: #F5F5F5; $light-background-to: #959595;
You can provide a custom background color for your custom theme by editing this variable:
If you desire more flexibility with styling Sexy-CSS3-Flashes, you can optionally set the flashStyle to custom in _flashes.scss
_custom-theme.scss: Provided is a sass partial which contains the scss architecture to add your custom styles and css properties to. The commented styles are there to provide a basic starting point for styling the flashes.
Add all your custom styles here.
The animation behavior can be changed within flashes.js. The default time to display the flashes is 3 seconds; on mobile it is extended 2 seconds longer — 5 seconds by default.
These CSS3 flashes were created on the grounds of providing better functionality and visual appeal. They look best in WebKit-based browsers and Firefox, with all other browsers degrading rather gracefully. If you use these flashes in the wild, drop me a note and let me know. http://twitter.com/phillapier