Commit b5c3e1a4 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Add GitLab UI development kit

parent 1475cb9a
.gitlab-ui-dev-kit {
> h2 {
font-size: 27px;
border-bottom: 1px solid #CCC;
color: #666;
margin: 30px 0;
font-weight: bold;
}
}
...@@ -15,4 +15,7 @@ class HelpController < ApplicationController ...@@ -15,4 +15,7 @@ class HelpController < ApplicationController
def shortcuts def shortcuts
end end
def ui
end
end end
- 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 'Buttons', '#buttons'
%li
= link_to 'Panels', '#panels'
%li
= link_to 'Alerts', '#alerts'
%li
= link_to 'Forms', '#forms'
%h2#blocks Blocks
%h3
%code .well
.well
%h4 Something
= lorem
%h2#lists Lists
%h3
%code .well-list
%ul.well-list
%li
One item
%li
One item
%li
One item
%h3
%code .panel .well-list
.panel.panel-default
.panel-heading My list
%ul.well-list
%li
One item
%li
One item
%li
One item
%h3
%code .bordered-list
%ul.bordered-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#buttons Buttons
.example
%button.btn.btn-default{:type => "button"} Default
%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#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#alert 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
%h3
%code form.horizontal-form
%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
%h3
%code form
%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
...@@ -7,9 +7,8 @@ Gitlab::Application.routes.draw do ...@@ -7,9 +7,8 @@ Gitlab::Application.routes.draw do
authorized_applications: 'oauth/authorized_applications', authorized_applications: 'oauth/authorized_applications',
authorizations: 'oauth/authorizations' authorizations: 'oauth/authorizations'
end end
#
# Search # Search
#
get 'search' => 'search#show' get 'search' => 'search#show'
get 'search/autocomplete' => 'search#autocomplete', as: :search_autocomplete get 'search/autocomplete' => 'search#autocomplete', as: :search_autocomplete
...@@ -33,13 +32,11 @@ Gitlab::Application.routes.draw do ...@@ -33,13 +32,11 @@ Gitlab::Application.routes.draw do
receive_pack: Gitlab.config.gitlab_shell.receive_pack receive_pack: Gitlab.config.gitlab_shell.receive_pack
}), at: '/', constraints: lambda { |request| /[-\/\w\.]+\.git\//.match(request.path_info) }, via: [:get, :post] }), at: '/', constraints: lambda { |request| /[-\/\w\.]+\.git\//.match(request.path_info) }, via: [:get, :post]
#
# Help # Help
#
get 'help' => 'help#index' get 'help' => 'help#index'
get 'help/:category/:file' => 'help#show', as: :help_page get 'help/:category/:file' => 'help#show', as: :help_page
get 'help/shortcuts' get 'help/shortcuts'
get 'help/ui' => 'help#ui'
# #
# Global snippets # Global snippets
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment