This is some awesome code
} p %{This is a paragraph withcode.}.html_safe
end
docs 'Dropdowns' do
span.dropdown {
a.dropdown_toggle 'Click me',
'data-toggle' => 'dropdown'
div.dropdown_menu {
ul.dropdown_body {
li {
a 'Hey!'
}
li {
a 'No!'
}
}
}
}
end
docs 'Forms' do
form {
input type: 'text'
label.checkbox {
input type: 'checkbox'
text 'Foo'
}
div.input_sub {
label.checkbox {
input type: 'checkbox'
text 'This is a sub-option of foo.'
}
}
div.form_actions {
button.button.primary 'Submit'
}
}
end
docs 'Grid' do
div.grid {
div.item.six_columns 'six_columns'
div.item.six_columns 'six_columns'
}
div.grid.gutter_none {
div.item.three_columns 'three_columns (gutter_none)'
div.item.three_columns 'three_columns (gutter_none)'
div.item.three_columns 'three_columns (gutter_none)'
div.item.three_columns 'three_columns (gutter_none)'
}
end
docs 'Labels' do
span.label.label_error 'Error'
text ' '
span.label.label_success 'Success'
text ' '
span.label.label_info 'Info'
text ' '
span.label.label_warning 'Warning'
end
docs 'Links' do
a.uppercase 'Uppercase'
text ' '
a.smallbold 'Smallbold'
end
docs 'Lists' do
ul {
li 'This'
li 'is a'
li 'list!'
}
end
docs 'Modals' do
a 'Open modal', 'data-toggle' => 'modal', href: '#modal'
widget Dvl::Components::Modal.new(title: 'Awesome modal', id: 'modal') do
div.modal_body {
text 'This is the modal body!'
}
end
br
a 'Confirmation modal', 'data-toggle' => 'modal', href: '#confirmModal'
widget Dvl::Components::Modal.new(
title: 'Are you sure?',
id: 'confirmModal',
html_opts: { class: 'modal_confirm' }
) do
div.modal_body {
text 'Are you sure?'
}
div.modal_footer {
a.button.error 'OK'
}
end
end
docs 'Pagination' do
div(class: 'pagination-wrapper') {
ul {
li { a '‹' }
li { a '1' }
li { span '2' }
li { a '3' }
li { a '›' }
}
}
end
docs 'Progress' do
div.progress {
div.progress_inner(style: "width: 30%") {
text '30%'
}
}
end
docs 'Sidebar' do
div.sidebar_box {
ul.sidebar_data {
li {
div.sidebar_data_icon {
i '✓'
}
div.sidebar_data_text {
div.sidebar_data_label 'Label'
div.sidebar_data_value 'Value'
div.sidebar_data_details 'Details'
}
}
}
}
end
docs 'Tables' do
table {
thead {
tr {
th 'ID'
th 'Name'
}
}
tbody {
tr {
td '1'
td 'Bob'
}
tr {
td '2'
td 'Job'
}
}
}
end
docs 'Tooltips' do
%w(top right bottom left).each do |x|
a x.capitalize,
'data-toggle' => 'tooltip',
'data-placement' => x,
'data-container' => 'body',
title: "Tooltip on the #{x}!"
text ' '
end
end
docs 'Typography' do
h1 'Heading 1'
h2 'Heading 2'
h3 'Heading 3'
h4 'Heading 4'
h5 'Heading 5'
h6 'Heading 6'
p 'Lorem ipsum.'
p.microcopy {
text 'This is some awesome .microcopy.'
a.microcopy_action 'Microcopy action'
}
end
end
end
class Flashes < Base
def main
ul {
li {
a 'Success', href: 'javascript:DvlFlash("success", "You did it!")'
}
li {
a 'Info', href: 'javascript:DvlFlash("info", "An informational message...")'
}
li {
a 'Error', href: 'javascript:DvlFlash("error", "Oh no, an error occured!")'
}
}
end
end
class Footer < Base
def main
br
br
widget Dvl::Components::Footer.new(application_name: 'dvl-core')
end
end
end
class App < Sinatra::Base
set :root, File.dirname(__FILE__)
set :scss, { load_paths: [ "#{self.root}/../vendor/assets/stylesheets", "#{self.root}/../vendor/assets/stylesheets/dvl" ] }
register Sinatra::AssetPack
assets do
serve '/css', from: '../vendor/assets/stylesheets'
serve '/js', from: '../vendor/assets/javascripts'
end
get '/' do
Views::Home.new.to_html
end
get '/flashes' do
Views::Flashes.new.to_html
end
get '/footer' do
Views::Footer.new.to_html
end
run! if app_file == $0
end