Awesome UI for @VoltFramework applications, based on Bootstrap 3.3.0 and Font Awesome.
Blocks of ui can be created with a few simple lines, such as <:awesome:panel:image title="My headline" image_url="src.png" />
These blocks are composable and each has its own css/jss
Warning: This component is still in alpha but has been used successfully in deployed apps. Example from an app done at a hackathon:
Add this line to your application's Gemfile:
gem 'volt-awesome'
And then execute:
$ bundle
Or install it yourself as:
$ gem install volt-awesome
<:awesome:panel>
<:awesome:panel:image href="{{ '/people/' + id }}" image_url="{{ lion_king.png }}" />
<:awesome:panel:profile name={{John Smith}} image_url="heri.png">Lorem ipsum dolor sit amet, consectetur adipiscing elit</:awesome:panel:profile>
<:awesome:panel:navfooter>
<:awesome:link icon="eye" href="{{ '/people/' + id }}" title="172"/>
<:awesome:link icon="comment" href="{{ '/people/' + id }}" title="34"/>
<:awesome:link icon="heart-o" href="{{ like(id) }}" title="210"/>
</:awesome:panel:navfooter>
</:awesome:panel>
<:awesome:panel title="LOGIN TO YOUR ACCOUNT">
<h3>Email</h3>
<:awesome:field placeholder="{{ email }}" icon="user"/>
<h3>Password</h3>
<:awesome:field placeholder="{{ password }}" icon="lock"/>
...(TODO)
</:awesome:panel>
<:awesome:panel title="DATA TRANSFER">
<:awesome:panel:image image_url="{{ graph_image_url }}" />
<:awesome:panel:info>
<:awesome:panel:infoicon title="video" number="62%" />
<:awesome:panel:infoicon title="photo" number="21%" />
<:awesome:panel:infoicon title="audio" number="10%" />
</:awesome:panel:info>
<:awesome:panel:navfooter>
<:awesome:link icon="cloud-upload" href="{{ '/projects/' + id }}" title="Upload files"/>
<:awesome:link icon="share-alt" href="{{ '/pledges/' + id }}" title="share link"/>
<:awesome:link icon="history" href="{{ '/pledges/' + id }}" title="back up"/>
</:awesome:panel:navfooter>
</:awesome:panel>
