Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
É daqui que você vai começar. Nosso Boilerplate responsivo tem header, menu lateral e uma estrutura de conteúdo principal que é fluida, ou seja, sem largura limitada.
- Sempre que quiser fazer um painel de administração ou um sistema completo, responsivo e bonitão.
- Se você está pensando em fazer um site. Essa estrutura foi planejada especialmente para painéis de administração e não é recomendada para sites.
Você pode inserir um título, um logo, informações adicionais com menor destaque. Do lado direito, uma área para acesso ao perfil e atalhos para outras funcionalidades.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<div class="ls-topbar">
<!-- Barra de Notificações -->
<div class="ls-notification-topbar">
<!-- Links de apoio -->
<div class="ls-alerts-list">
<a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain"><span>Notificações</span></a>
<a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain"><span>Ajuda</span></a>
<a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain"><span>Sugestões</span></a>
</div>
<!-- Dropdown com detalhes da conta de usuário -->
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
<a href="#" class="ls-ico-user">
<span class="ls-name">João</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu">
<ul>
<li><a href="#">Meus dados</a></li>
<li><a href="#">Faturas</a></li>
<li><a href="#">Planos</a></li>
<li><a href="#">Sair</a></li>
</ul>
</nav>
</div>
</div>
<span class="ls-show-sidebar ls-ico-menu"></span>
<!-- Nome do produto/marca -->
<h1 class="ls-brand-name">
<a href="#" class="ls-ico-earth">
Nome do produto
</a>
</h1>
</div>
<main class="ls-main"></main>
<aside class="ls-notification">
<nav class="ls-notification-list" id="ls-notification-curtain">
<h3 class="ls-title-2">Notificações</h3>
<ul>
<li class="ls-dismissable">
<a href="#">Nam quo nisi voluptatem</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Porro aut dolorum ut tempore explicabo et non sit unde quas officiis ut</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Error odio explicabo et consequatur quasi sunt</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Ea et numquam dolor quasi qui</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Vitae temporibus tempore rerum est iure rerum</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
</ul>
<p class="ls-no-notification-message">Não há notificações.</p>
</nav>
<nav class="ls-notification-list" id="ls-help-curtain">
<h3 class="ls-title-2">Feedback</h3>
<ul>
<li><a href="#">> velit consectetur cum rerum dolores officiis</a></li>
<li><a href="#">> similique id at doloribus consequatur non</a></li>
</ul>
</nav>
<nav class="ls-notification-list" id="ls-feedback-curtain">
<h3 class="ls-title-2">Ajuda</h3>
<ul>
<li><a href="#">> Guia</a></li>
<li><a href="#">> Wiki</a></li>
</ul>
</nav>
</aside>
<aside class="ls-sidebar">
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account ls-active">
<a href="#" class="ls-ico-user">
<span class="ls-name">Franco Molina dos Santos Silva</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu" aria-hidden="true">
<ul>
<li><a href="#" role="option">Meus dados</a></li>
<li><a href="#" role="option">Faturas</a></li>
<li><a href="#" role="option">Planos</a></li>
</ul>
<a href="#" class="ls-btn-logout" role="combobox" aria-expanded="false">Sair</a>
</nav>
</div>
<h1 class="ls-brand-name ls-ico-earth"><a href="home">Nome do produto</a></h1>
</aside>
Você pode ter um header cinza adicionando a classe .ls-topbar-gray no elemento com a classe .ls-topbar, conforme o exemplo abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="ls-topbar ls-topbar-gray">
<!-- Barra de Notificações -->
<div class="ls-notification-topbar">
<!-- Links de apoio -->
<div class="ls-alerts-list">
<a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain"><span>Notificações</span></a>
<a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain"><span>Ajuda</span></a>
<a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain"><span>Sugestões</span></a>
</div>
<!-- Dropdown com detalhes da conta de usuário -->
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
<a href="#" class="ls-ico-user">
<span class="ls-name">João</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu">
<ul>
<li><a href="#">Meus dados</a></li>
<li><a href="#">Faturas</a></li>
<li><a href="#">Planos</a></li>
<li><a href="#">Sair</a></li>
</ul>
</nav>
</div>
</div>
<span class="ls-show-sidebar ls-ico-menu"></span>
<!-- Nome do produto/marca -->
<h1 class="ls-brand-name">
<a href="#" class="ls-ico-earth">
Nome do produto
</a>
</h1>
</div>
Muito semelhante ao header principal, com a inclusão de um botão voltar na lateral superior esquerda. Esta versão deve ser utilizada quando o painel é acessado a partir de uma listagem. O botão voltar substitui a navegação pelo browser e também ajuda o usuário a se localizar, indicando que ele está um nível abaixo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<div class="ls-topbar">
<!-- Barra de Notificações -->
<div class="ls-notification-topbar">
<!-- Links de apoio -->
<div class="ls-alerts-list">
<a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain2"><span>Notificações</span></a>
<a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain2"><span>Ajuda</span></a>
<a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain2"><span>Sugestões</span></a>
</div>
<!-- Dropdown com detalhes da conta de usuário -->
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
<a href="#" class="ls-ico-user">
<span class="ls-name">João</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu">
<ul>
<li><a href="#">Meus dados</a></li>
<li><a href="#">Faturas</a></li>
<li><a href="#">Planos</a></li>
<li><a href="#">Sair</a></li>
</ul>
</nav>
</div>
</div>
<span class="ls-show-sidebar ls-ico-menu"></span>
<a href="#" class="ls-go-next"><span class="ls-text">Voltar à lista de serviços</span></a>
<h1 class="ls-brand-name">
<a href="#" class="ls-ico-earth">
<small>Nome do produto</small>
identificador da unidade
</a>
</h1>
</div>
<main class="ls-main"></main>
<aside class="ls-notification">
<nav class="ls-notification-list" id="ls-notification-curtain2">
<h3 class="ls-title-2">Notificações</h3>
<ul>
<li class="ls-dismissable">
<a href="#">Sequi consectetur optio quo et sit consequuntur assumenda</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Doloremque illum sed nihil distinctio delectus est alias itaque</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Tempora et nesciunt doloribus blanditiis autem</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Illo at quo dolores ducimus aut qui laboriosam explicabo optio voluptate sint delectus perferendis accusantium</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Omnis eos iusto magnam explicabo ut sint error totam quis dolorem ut dolorem</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
</ul>
<p class="ls-no-notification-message">Não há notificações.</p>
</nav>
<nav class="ls-notification-list" id="ls-help-curtain2">
<h3 class="ls-title-2">Feedback</h3>
<ul>
<li><a href="#">> ducimus quo harum provident eum laborum</a></li>
<li><a href="#">> porro aliquid omnis et sequi sint</a></li>
</ul>
</nav>
<nav class="ls-notification-list" id="ls-feedback-curtain2">
<h3 class="ls-title-2">Ajuda</h3>
<ul>
<li><a href="#">> Guia</a></li>
<li><a href="#">> Wiki</a></li>
</ul>
</nav>
</aside>
<aside class="ls-sidebar">
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
<a href="#" class="ls-ico-user">
<span class="ls-name">Franco Molina dos Santos Silva</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu" aria-hidden="true">
<ul>
<li><a href="#" role="option">Meus dados</a></li>
<li><a href="#" role="option">Faturas</a></li>
<li><a href="#" role="option">Planos</a></li>
</ul>
<a href="#" class="ls-btn-logout" role="combobox" aria-expanded="false">Sair</a>
</nav>
</div>
<div class="ls-sidebar-inner">
<a href="#" class="ls-go-prev"><span class="ls-text">Voltar à lista de serviços</span></a>
<nav class="ls-menu">
<ul>
<li class="ls-active"><a href="#" class="ls-ico-dashboard">Dashboard</a></li>
<li><a href="#" class="ls-ico-stats">Item de menu</a></li>
<li><a href="#" class="ls-ico-image">Item de menu</a></li>
</ul>
</nav>
</div>
</aside>
Do mais simples ao mais complexo, com o Locastyle é possível criar painéis para todos os tipos de demanda. O menu pode receber até itens de 2º nívele as páginas internas podem ser divididas em seções.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<div class="ls-topbar">
<!-- Barra de Notificações -->
<div class="ls-notification-topbar">
<!-- Links de apoio -->
<div class="ls-alerts-list">
<a href="#" class="ls-ico-bell-o" data-counter="8" data-ls-module="topbarCurtain" data-target="#ls-notification-curtain3"><span>Notificações</span></a>
<a href="#" class="ls-ico-bullhorn" data-ls-module="topbarCurtain" data-target="#ls-help-curtain3"><span>Ajuda</span></a>
<a href="#" class="ls-ico-question" data-ls-module="topbarCurtain" data-target="#ls-feedback-curtain3"><span>Sugestões</span></a>
</div>
<!-- Dropdown com detalhes da conta de usuário -->
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
<a href="#" class="ls-ico-user">
<span class="ls-name">João</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu">
<ul>
<li><a href="#">Meus dados</a></li>
<li><a href="#">Faturas</a></li>
<li><a href="#">Planos</a></li>
<li><a href="#">Sair</a></li>
</ul>
</nav>
</div>
</div>
<span class="ls-show-sidebar ls-ico-menu"></span>
<a href="#" class="ls-go-next"><span class="ls-text">Voltar à lista de serviços</span></a>
<h1 class="ls-brand-name">
<a href="#" class="ls-ico-earth">
<small>Nome do produto</small>
identificador da unidade
</a>
</h1>
</div>
<main class="ls-main"></main>
<aside class="ls-sidebar">
<div data-ls-module="dropdown" class="ls-dropdown ls-user-account">
<a href="#" class="ls-ico-user">
<span class="ls-name">Franco Molina dos Santos Silva</span>
(fmolina)
</a>
<nav class="ls-dropdown-nav ls-user-menu" aria-hidden="true">
<ul>
<li><a href="#" role="option">Meus dados</a></li>
<li><a href="#" role="option">Faturas</a></li>
<li><a href="#" role="option">Planos</a></li>
</ul>
<a href="#" class="ls-btn-logout" role="combobox" aria-expanded="false">Sair</a>
</nav>
</div>
<div class="ls-sidebar-inner">
<a href="#" class="ls-go-prev"><span class="ls-text">Voltar à lista de serviços</span></a>
<nav class="ls-menu">
<ul>
<li class="ls-active"><a href="#" class="ls-ico-dashboard">Dashboard</a></li>
<li><a href="#" class="ls-ico-stats">Item de menu</a></li>
<li><a href="#" class="ls-ico-image">Item de menu</a></li>
<li class="ls-submenu">
<a href="#" class="ls-ico-cog">Item de menu pai</a>
<ul role="menu">
<li><a class="ls-submenu-item" href="#">Item de submenu</a></li>
<li><a class="ls-submenu-item" href="#">Item de submenu</a></li>
<li><a class="ls-submenu-item" href="#">Item de submenu</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
<aside class="ls-notification">
<nav class="ls-notification-list" id="ls-notification-curtain3">
<h3 class="ls-title-2">Notificações</h3>
<ul>
<li class="ls-dismissable">
<a href="#">Sed architecto doloribus nam sed optio labore deserunt</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Vero voluptas et eveniet recusandae</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Omnis velit sint autem molestias voluptatem laudantium quis ut atque ut reiciendis et quo</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Quia voluptas non natus est quis</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
<li class="ls-dismissable">
<a href="#">Non neque maiores libero aut officiis est laudantium velit ipsum blanditiis voluptates</a>
<a href="#" data-ls-module="dismiss" class="ls-ico-close ls-close-notification"></a>
</li>
</ul>
<p class="ls-no-notification-message">Não há notificações.</p>
</nav>
<nav class="ls-notification-list" id="ls-help-curtain3">
<h3 class="ls-title-2">Feedback</h3>
<ul>
<li><a href="#">> exercitationem fugit assumenda non consequatur minus</a></li>
<li><a href="#">> sit odio sit nesciunt nihil facere</a></li>
</ul>
</nav>
<nav class="ls-notification-list" id="ls-feedback-curtain3">
<h3 class="ls-title-2">Ajuda</h3>
<ul>
<li><a href="#">> Guia</a></li>
<li><a href="#">> Wiki</a></li>
</ul>
</nav>
</aside>