{% extends "layouts/app.twig" %} {% import 'macros/base.twig' as m %} {% import 'macros/form.twig' as f %} {% block title %}{{ __('Design') }}{% endblock %} {% set colors=['success', 'info', 'warning', 'danger'] %} {% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %} {% set types_color=[ ['primary', 'light'], ['secondary', 'light'], ['success', 'light'], ['danger', 'light'], ['warning', 'dark'], ['info', 'dark'], ['light', 'dark'], ['dark', 'light'], ] %} {% set types_buttons=types|merge(['link']) %} {% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %} {% set linksum='Lorem ipsum! Dolor link amet, consectetur adipisici elit!' %} {% block content %}

{{ block('title') }} {{ themes[theme] }}

Elements small

Headings small

H4 small

H5 small
H6 small

Lists

This page should be used when creating and testing new designs to find usability and/or design issues. {{ lipsum|replace({'…': '.'}) }}

  • Unordered
  • List
  • Items
  1. Ordered
  2. List
  3. Items

{{ linksum|raw }} {{ lipsum }}

Themes

Tables

Header 1 Header 2 Header 3
Table content {{ lipsum }} {{ m.glyphicon('ok') }}
Another content {{ m.glyphicon('remove') }}

Navigation Tabs

Navigation Pills

Texts

{{ linksum|raw }}
{{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}

{% for color in types %}

{{ color|capitalize }}: {{ linksum|raw }}

{% endfor %}

Badges

{% for type in types_color %} {{ type[0]|capitalize }} {% endfor %}

Buttons

{% for type in types_buttons %} {{ f.button(type|capitalize, {'btn_type': type, 'name': 'button-' ~ type}) }} {% endfor %}

Alerts

{% for color in colors %}

{{ color|capitalize }}

{{ m.alert(lipsum, color) }}
{% endfor %}

Forms

{{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
{{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
{{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
{{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
{{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
{{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
{{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
{{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
Button
{{ f.button('Button', {'btn_type': 'default'}) }}
Submit button
{{ f.submit() }}
Checkbox
{{ f.checkbox('form-input-checkbox', 'Checkbox', true) }} {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
Radio

Other

Code

3.1415926535897932384626433832795028841971693993751058209749445923

Macros

base.twig

angel()

{{ m.angel() }}

glyphicon(glyph)

{{ m.glyphicon('star') }}

alert(message, type)

{{ m.alert('Test content', 'info') }}

user(user)

{{ m.user(demo_user) }}
{{ m.user(demo_user_2) }}

button(label, url, type, size)

{{ m.button('Label', '#', 'info', 'sm') }}

form.twig

input(name, label, type, opt)

{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}

textarea(name, label, opt)

{{ f.textarea('textarea-name', 'Label', {'required': true, 'rows': 2, 'value': lipsum}) }}

select(name, data, label, selected)

{{ f.select('select-name', {'foo': 'Foo', 'bar': 'Bar'}, 'Label', 'bar') }}

checkbox(name, label, checked, value)

{{ f.checkbox('checkbox-name', 'Label', false) }}
{{ f.checkbox('checkbox-name', 'Label', true, 'on') }}

hidden(name, value)

{{ f.hidden('hidden-name', 'hidden value') | escape }}

button(label, opt)

{{ f.button('Label', {'btn_type': 'default', 'name': 'button-name', 'value': 'buton-value'}) }}

submit(label, opt)

{{ f.submit() }}

{% endblock %}