- page_title "UI Development Kit", "Help" - 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' %li = link_to 'Nav', '#nav' %li = link_to 'Buttons', '#buttons' %li = link_to 'Dropdowns', '#dropdowns' %li = link_to 'Panels', '#panels' %li = link_to 'Alerts', '#alerts' %li = link_to 'Forms', '#forms' %li = link_to 'Files', '#file' %li = link_to 'Markdown', '#markdown' %h2#blocks Blocks .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 %code .row-content-block .example .row-content-block %h4 Normal block inside content = lorem .row-content-block.second-block %h4 Second block = lorem .lead Cover block for profile page with avatar, name and description %code .cover-block .example .cover-block .avatar-holder = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: '' .cover-title John Smith .cover-desc = lorem .cover-controls = link_to '#', class: 'btn btn-gray' do = icon('pencil') = link_to '#', class: 'btn btn-gray' do = icon('rss') %h2#lists Lists .lead Simple list using %code .content-list .example %ul.content-list %li One item %li One item %li One item .lead List with avatar, title and description using %code .content-list .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 .lead List with hover effect %code .well-list .example %ul.well-list %li One item %li One item %li One item .lead List inside panel .example .panel.panel-default .panel-heading Your list %ul.well-list %li One item %li One item %li One item %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 %h2#navs Navigation .lead Holder for top page navigation. Includes navigation, search field, sorting and button %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 %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' } %span Sort by name = icon('chevron-down') %ul.dropdown-menu %li %a Sort by date = link_to 'New issue', '#', class: 'btn btn-new btn-inverted' .lead Only nav links without button and search %code .nav-links .example %ul.nav-links %li.active %a Open %li %a Closed %h2#buttons Buttons .example %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 %h2#dropdowns Dropdowns .example .clearfix .dropdown.inline.pull-left %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown = icon('chevron-down') %ul.dropdown-menu %li %a{ href: "#" } Dropdown Option .dropdown.inline.pull-right %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown = icon('chevron-down') %ul.dropdown-menu.dropdown-menu-align-right %li %a{ href: "#" } Dropdown Option .example %div .dropdown.inline %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown = icon('chevron-down') %ul.dropdown-menu.dropdown-menu-selectable %li %a.is-active{ href: "#" } Dropdown Option .example %div .dropdown.inline %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown = icon('chevron-down') .dropdown-menu.dropdown-select.dropdown-menu-selectable .dropdown-title %span Dropdown Title %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } } = icon('times') .dropdown-input %input.dropdown-input-field{ type: "search", placeholder: "Filter results" } = icon('search') .dropdown-content %ul %li %a.is-active{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li.divider %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } 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 %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown loading = icon('chevron-down') .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading .dropdown-title %span Dropdown Title %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } } = icon('times') .dropdown-input %input.dropdown-input-field{ type: "search", placeholder: "Filter results" } = icon('search') .dropdown-content %ul %li %a.is-active{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li.divider %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } Dropdown Option %li %a{ href: "#" } 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 %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } } Dropdown user = icon('chevron-down') .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user .dropdown-title %span Dropdown Title %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } } = icon('times') .dropdown-input %input.dropdown-input-field{ type: "search", placeholder: "Filter results" } = icon('search') .dropdown-content %ul %li %a.dropdown-menu-user-link.is-active{ href: "#" } = link_to_member_avatar(@user, size: 30) %strong.dropdown-menu-user-full-name = @user.name .dropdown-menu-user-username = @user.to_reference .example %div .dropdown.inline %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Dropdown page 2 = icon('chevron-down') .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two .dropdown-page-one .dropdown-title %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } } = icon('arrow-left') %span Dropdown Title %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } } = icon('times') .dropdown-input %input.dropdown-input-field{ type: "search", placeholder: "Filter results" } = icon('search') .dropdown-content %ul %li %a.dropdown-menu-user-link.is-active{ href: "#" } = link_to_member_avatar(@user, size: 30) %strong.dropdown-menu-user-full-name = @user.name .dropdown-menu-user-username = @user.to_reference .dropdown-page-two .dropdown-title %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } } = icon('arrow-left') %span Create label %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } } = icon('times') .dropdown-input %input.dropdown-input-field{ type: "search", placeholder: "Name new label" } .dropdown-content %button.btn.btn-primary Create .example %div .dropdown.inline %button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } } Projects = icon('chevron-down') .dropdown-menu.dropdown-select.dropdown-menu-selectable .dropdown-title %span Go to project %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } } = icon('times') .dropdown-input %input.dropdown-input-field{ type: "search", placeholder: "Filter results" } = icon('search') .dropdown-content .dropdown-loading = icon('spinner spin') :javascript $('#js-project-dropdown').glDropdown({ data: function (term, callback) { Api.projects(term, { order_by: 'last_activity_at' }, function (data) { 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 = dropdown_tag("Projects", options: { title: "Go to project", filter: true, placeholder: "Filter projects" }) %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 %h2#alerts Alerts .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 .lead Horizontal form when label rendered inline with input %code form.horizontal-form .example %form.form-horizontal .form-group %label.col-sm-2.control-label{ :for => "inputEmail3" } Email .col-sm-10 %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/ .form-group %label.col-sm-2.control-label{ :for => "inputPassword3" } Password .col-sm-10 %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/ .form-group .col-sm-offset-2.col-sm-10 .checkbox %label %input{ :type => "checkbox" }/ Remember me .form-group .col-sm-offset-2.col-sm-10 %button.btn.btn-default{ :type => "submit" } Sign in .lead Form when label rendered above input %code form .example %form .form-group %label{ :for => "exampleInputEmail1" } Email address %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/ .form-group %label{ :for => "exampleInputPassword1" } Password %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/ .checkbox %label %input{ :type => "checkbox" }/ Remember me %button.btn.btn-default{ :type => "submit" } Sign in %h2#file File %h4 %code .file-holder - blob = Snippet.new(content: "Wow\nSuch\nFile") .example .file-holder .js-file-title.file-title Awesome file .file-actions .btn-group %a.btn Edit %a.btn.btn-danger Remove .file-contenta.code = render 'shared/file_highlight', blob: blob %h2#markdown Markdown %h4 %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 You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("user/markdown")}.