2015-04-30 13:06:18 -04:00
- page_title "UI Development Kit", "Help"
2015-03-08 17:46:22 -04:00
- lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare."
.gitlab-ui-dev-kit
%h1 GitLab UI development kit
%p.light
Use page inspector in your browser to check element classes and structure
of examples below.
%hr
%ul
%li
= link_to 'Blocks', '#blocks'
%li
= link_to 'Lists', '#lists'
%li
= link_to 'Tables', '#tables'
2015-10-08 07:47:59 -04:00
%li
= link_to 'Nav', '#nav'
2015-03-08 17:46:22 -04:00
%li
= link_to 'Buttons', '#buttons'
2016-03-07 06:22:13 -05:00
%li
= link_to 'Dropdowns', '#dropdowns'
2015-03-08 17:46:22 -04:00
%li
= link_to 'Panels', '#panels'
%li
= link_to 'Alerts', '#alerts'
%li
= link_to 'Forms', '#forms'
2015-03-13 22:20:25 -04:00
%li
= link_to 'Files', '#file'
2015-03-08 18:21:47 -04:00
%li
= link_to 'Markdown', '#markdown'
2015-03-08 17:46:22 -04:00
%h2#blocks Blocks
2016-02-26 09:17:13 -05:00
.lead
Content block separated with botton border
%code .content-block
.example
.content-block
%h4 Normal block inside content
= lorem
.content-block
%h4 Second block
= lorem
.lead
Gray content block with side padding using
2016-04-25 16:02:15 -04:00
%code .row-content-block
2015-10-08 07:47:59 -04:00
2016-02-26 09:17:13 -05:00
.example
2016-04-25 16:02:15 -04:00
.row-content-block
2016-02-26 09:17:13 -05:00
%h4 Normal block inside content
= lorem
2015-10-08 07:47:59 -04:00
2016-04-25 16:02:15 -04:00
.row-content-block.second-block
2016-02-26 09:17:13 -05:00
%h4 Second block
= lorem
2015-03-08 17:46:22 -04:00
2016-02-26 09:17:13 -05:00
.lead
Cover block for profile page with avatar, name and description
2015-12-02 07:40:05 -05:00
%code .cover-block
2016-02-26 09:17:13 -05:00
.example
.cover-block
.avatar-holder
= image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
.cover-title
John Smith
2015-12-02 07:40:05 -05:00
2016-02-26 09:17:13 -05:00
.cover-desc
= lorem
.cover-controls
= link_to '#', class: 'btn btn-gray' do
= icon('pencil')
= link_to '#', class: 'btn btn-gray' do
= icon('rss')
2015-12-02 07:40:05 -05:00
2015-03-08 17:46:22 -04:00
%h2#lists Lists
2016-02-26 09:02:34 -05:00
.lead
Simple list using
2015-10-08 07:47:59 -04:00
%code .content-list
2016-02-26 09:02:34 -05:00
2016-02-26 09:17:13 -05:00
.example
%ul.content-list
%li
One item
%li
One item
%li
One item
2015-10-08 07:47:59 -04:00
2016-02-26 09:02:34 -05:00
.lead
List with avatar, title and description using
%code .content-list
2016-02-26 09:17:13 -05:00
.example
%ul.content-list
%li
= image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%li
= image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
%li
= image_tag 'no_avatar.png', class: 'avatar s40'
.title Title
.description Description
2016-02-26 09:02:34 -05:00
2016-02-26 09:17:13 -05:00
.lead
List with hover effect
2015-03-08 17:46:22 -04:00
%code .well-list
2016-02-26 09:17:13 -05:00
.example
2015-03-08 17:46:22 -04:00
%ul.well-list
%li
One item
%li
One item
%li
One item
2016-02-26 09:17:13 -05:00
.lead
List inside panel
.example
.panel.panel-default
.panel-heading Your list
%ul.well-list
%li
One item
%li
One item
%li
One item
2015-03-08 17:46:22 -04:00
%h2#tables Tables
.example
%table.table
%thead
%tr
%th #
%th First Name
%th Last Name
%th Username
%tbody
%tr
%td 1
%td Mark
%td Otto
%td @mdo
%tr
%td 2
%td Jacob
%td Thornton
%td @fat
%tr
%td 3
%td Larry
%td the Bird
%td @twitter
2015-10-08 07:47:59 -04:00
%h2#navs Navigation
2016-02-26 09:17:13 -05:00
.lead
Holder for top page navigation. Includes navigation, search field, sorting and button
2016-02-03 12:41:55 -05:00
%code .top-area
.example
.top-area
%ul.nav-links
%li.active
%a Open
%li
%a Closed
.nav-controls
= text_field_tag 'sample', nil, class: 'form-control'
.dropdown
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
2016-02-03 12:41:55 -05:00
%span Sort by name
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-02-03 12:41:55 -05:00
%ul.dropdown-menu
%li
%a Sort by date
2016-07-24 01:32:47 -04:00
= link_to 'New issue', '#', class: 'btn btn-new btn-inverted'
2016-02-03 12:41:55 -05:00
2016-02-26 09:17:13 -05:00
.lead
Only nav links without button and search
2016-01-13 09:58:04 -05:00
%code .nav-links
2015-10-08 07:47:59 -04:00
.example
2016-01-13 09:58:04 -05:00
%ul.nav-links
2015-10-08 07:47:59 -04:00
%li.active
%a Open
%li
%a Closed
2015-03-08 17:46:22 -04:00
%h2#buttons Buttons
.example
2016-12-26 05:47:16 -05:00
%button.btn.btn-default{ :type => "button" } Default
%button.btn.btn-gray{ :type => "button" } Gray
%button.btn.btn-primary{ :type => "button" } Primary
%button.btn.btn-success{ :type => "button" } Success
%button.btn.btn-info{ :type => "button" } Info
%button.btn.btn-warning{ :type => "button" } Warning
%button.btn.btn-danger{ :type => "button" } Danger
%button.btn.btn-link{ :type => "button" } Link
2015-03-08 17:46:22 -04:00
2016-03-07 06:22:13 -05:00
%h2#dropdowns Dropdowns
.example
.clearfix
.dropdown.inline.pull-left
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
%ul.dropdown-menu
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
.dropdown.inline.pull-right
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
%ul.dropdown-menu.dropdown-menu-align-right
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
.example
%div
.dropdown.inline
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
%ul.dropdown-menu.dropdown-menu-selectable
%li
2016-12-26 05:47:16 -05:00
%a.is-active{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
.example
%div
.dropdown.inline
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
.dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title
%span Dropdown Title
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
2016-03-07 06:22:13 -05:00
= icon('times')
.dropdown-input
2016-12-26 05:47:16 -05:00
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
2016-03-07 06:22:13 -05:00
= icon('search')
.dropdown-content
%ul
%li
2016-12-26 05:47:16 -05:00
%a.is-active{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li.divider
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
.dropdown-footer
%strong Tip:
If an author is not a member of this project, you can still filter by his name while using the search field.
.dropdown.inline
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown loading
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
.dropdown-title
%span Dropdown Title
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
2016-03-07 06:22:13 -05:00
= icon('times')
.dropdown-input
2016-12-26 05:47:16 -05:00
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
2016-03-07 06:22:13 -05:00
= icon('search')
.dropdown-content
%ul
%li
2016-12-26 05:47:16 -05:00
%a.is-active{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li.divider
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
%li
2016-12-26 05:47:16 -05:00
%a{ href: "#" }
2016-03-07 06:22:13 -05:00
Dropdown Option
.dropdown-footer
%strong Tip:
If an author is not a member of this project, you can still filter by his name while using the search field.
.dropdown-loading
= icon('spinner spin')
.example
%div
.dropdown.inline
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown user
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
.dropdown-title
%span Dropdown Title
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
2016-03-07 06:22:13 -05:00
= icon('times')
.dropdown-input
2016-12-26 05:47:16 -05:00
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
2016-03-07 06:22:13 -05:00
= icon('search')
.dropdown-content
%ul
%li
2016-12-26 05:47:16 -05:00
%a.dropdown-menu-user-link.is-active{ href: "#" }
2016-04-16 16:00:30 -04:00
= link_to_member_avatar(@user, size: 30)
2016-03-07 06:22:13 -05:00
%strong.dropdown-menu-user-full-name
2016-04-16 16:00:30 -04:00
= @user.name
2016-03-07 06:22:13 -05:00
.dropdown-menu-user-username
2016-04-16 16:00:30 -04:00
= @user.to_reference
2016-03-07 06:22:13 -05:00
.example
%div
2016-03-07 06:26:35 -05:00
.dropdown.inline
2016-12-26 05:47:16 -05:00
%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 06:22:13 -05:00
Dropdown page 2
2016-03-07 06:50:39 -05:00
= icon('chevron-down')
2016-03-07 06:22:13 -05:00
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
.dropdown-page-one
.dropdown-title
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
2016-03-07 06:22:13 -05:00
= icon('arrow-left')
%span Dropdown Title
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
2016-03-07 06:22:13 -05:00
= icon('times')
.dropdown-input
2016-12-26 05:47:16 -05:00
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
2016-03-07 06:22:13 -05:00
= icon('search')
.dropdown-content
%ul
%li
2016-12-26 05:47:16 -05:00
%a.dropdown-menu-user-link.is-active{ href: "#" }
2016-04-16 16:00:30 -04:00
= link_to_member_avatar(@user, size: 30)
2016-03-07 06:22:13 -05:00
%strong.dropdown-menu-user-full-name
2016-04-16 16:00:30 -04:00
= @user.name
2016-03-07 06:22:13 -05:00
.dropdown-menu-user-username
2016-04-16 16:00:30 -04:00
= @user.to_reference
2016-03-07 06:22:13 -05:00
.dropdown-page-two
.dropdown-title
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
2016-03-07 06:22:13 -05:00
= icon('arrow-left')
%span Create label
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
2016-03-07 06:22:13 -05:00
= icon('times')
.dropdown-input
2016-12-26 05:47:16 -05:00
%input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
2016-03-07 06:22:13 -05:00
.dropdown-content
%button.btn.btn-primary
Create
2016-03-07 10:37:35 -05:00
.example
%div
.dropdown.inline
2016-12-26 05:47:16 -05:00
%button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
2016-03-07 10:37:35 -05:00
Projects
= icon('chevron-down')
.dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title
%span Go to project
2016-12-26 05:47:16 -05:00
%button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
2016-03-07 10:37:35 -05:00
= icon('times')
.dropdown-input
2016-12-26 05:47:16 -05:00
%input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
2016-03-07 10:37:35 -05:00
= icon('search')
.dropdown-content
.dropdown-loading
= icon('spinner spin')
:javascript
$('#js-project-dropdown').glDropdown({
2016-03-09 05:19:41 -05:00
data: function (term, callback) {
Api.projects(term, "last_activity_at", function (data) {
2016-03-07 10:37:35 -05:00
callback(data);
});
},
text: function (project) {
return project.name_with_namespace || project.name;
},
selectable: true,
fieldName: "author_id",
filterable: true,
search: {
fields: ['name_with_namespace']
},
id: function (data) {
return data.id;
},
isSelected: function (data) {
return data.id === 2;
}
})
.example
%div
2016-03-09 05:19:41 -05:00
= dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" })
2016-03-07 10:37:35 -05:00
2015-03-08 17:46:22 -04:00
%h2#panels Panels
.row
.col-md-6
.panel.panel-success
.panel-heading Success
.panel-body
= lorem
.panel.panel-primary
.panel-heading Primary
.panel-body
= lorem
.panel.panel-info
.panel-heading Info
.panel-body
= lorem
.col-md-6
.panel.panel-warning
.panel-heading Warning
.panel-body
= lorem
.panel.panel-danger
.panel-heading Danger
.panel-body
= lorem
2016-10-20 08:23:35 -04:00
%h2#alerts Alerts
2015-03-08 17:46:22 -04:00
.row
.col-md-6
.alert.alert-success
= lorem
.alert.alert-primary
= lorem
.alert.alert-info
= lorem
.col-md-6
.alert.alert-warning
= lorem
.alert.alert-danger
= lorem
%h2#forms Forms
2016-02-26 09:17:13 -05:00
.lead
Horizontal form when label rendered inline with input
2015-03-08 17:46:22 -04:00
%code form.horizontal-form
2016-02-26 09:17:13 -05:00
.example
%form.form-horizontal
.form-group
2016-12-26 05:47:16 -05:00
%label.col-sm-2.control-label{ :for => "inputEmail3" } Email
2016-02-26 09:17:13 -05:00
.col-sm-10
2016-12-26 05:47:16 -05:00
%input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
2016-02-26 09:17:13 -05:00
.form-group
2016-12-26 05:47:16 -05:00
%label.col-sm-2.control-label{ :for => "inputPassword3" } Password
2016-02-26 09:17:13 -05:00
.col-sm-10
2016-12-26 05:47:16 -05:00
%input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
2016-02-26 09:17:13 -05:00
.form-group
.col-sm-offset-2.col-sm-10
.checkbox
%label
2016-12-26 05:47:16 -05:00
%input{ :type => "checkbox" }/
2016-02-26 09:17:13 -05:00
Remember me
.form-group
.col-sm-offset-2.col-sm-10
2016-12-26 05:47:16 -05:00
%button.btn.btn-default{ :type => "submit" } Sign in
2015-03-08 17:46:22 -04:00
2016-02-26 09:17:13 -05:00
.lead
Form when label rendered above input
2015-03-08 17:46:22 -04:00
%code form
2016-02-26 09:17:13 -05:00
.example
%form
.form-group
2016-12-26 05:47:16 -05:00
%label{ :for => "exampleInputEmail1" } Email address
%input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
2016-02-26 09:17:13 -05:00
.form-group
2016-12-26 05:47:16 -05:00
%label{ :for => "exampleInputPassword1" } Password
%input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
2016-02-26 09:17:13 -05:00
.checkbox
%label
2016-12-26 05:47:16 -05:00
%input{ :type => "checkbox" }/
2016-02-26 09:17:13 -05:00
Remember me
2016-12-26 05:47:16 -05:00
%button.btn.btn-default{ :type => "submit" } Sign in
2015-03-08 18:21:47 -04:00
2015-03-13 22:20:25 -04:00
%h2#file File
2015-12-02 08:42:43 -05:00
%h4
2015-03-13 22:20:25 -04:00
%code .file-holder
- blob = Snippet.new(content: "Wow\nSuch\nFile")
.example
.file-holder
.file-title
Awesome file
.file-actions
.btn-group
%a.btn Edit
2015-12-02 08:42:43 -05:00
%a.btn.btn-danger Remove
2015-03-13 22:20:25 -04:00
.file-contenta.code
= render 'shared/file_highlight', blob: blob
2015-03-08 18:21:47 -04:00
%h2#markdown Markdown
2015-12-02 08:42:43 -05:00
%h4
2015-03-08 18:21:47 -04:00
%code .md or .wiki and others
Markdown rendering has a bit different css and presented in next UI elements:
%ul
%li comment
%li issue, merge request description
%li wiki page
%li help page
2016-08-25 10:19:14 -04:00
You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.