├── grid-template
    ├── test.css
    └── test.html
└── ui-connector
    ├── dashboard.css
    └── dashboard.html


/grid-template/test.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *:before,
  3 | *:after {
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | .page {
  8 |   display: grid;
  9 |   background-color: #292929;
 10 |   color: #ffffff;
 11 |   line-height: 1;
 12 |   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 13 | }
 14 | 
 15 | .header {
 16 |   padding: 25px;
 17 |   background-color: #242424;
 18 | }
 19 | 
 20 | .navigation {
 21 |   padding: 25px;
 22 |   background-color: #826550;
 23 | }
 24 | 
 25 | @media (min-width: 768px) {
 26 |   .navigation {
 27 |     order: -1;
 28 |   }
 29 | }
 30 | 
 31 | /* Statistics */
 32 | 
 33 | .statistics {
 34 |   display: grid;
 35 |   background-color: #ffffff;
 36 | }
 37 | 
 38 | @media (min-width: 768px) {
 39 |   .statistics {
 40 |     grid-template-columns: 1fr 1fr;
 41 |   }
 42 | }
 43 | 
 44 | @media (min-width: 1024px) {
 45 |   .statistics {
 46 |     grid-template-columns: 1fr 1fr 1fr;
 47 |   }
 48 | }
 49 | 
 50 | .statistics_header {
 51 |   padding: 25px;
 52 |   background-color: #ffffff;
 53 |   color: #000000;
 54 | }
 55 | 
 56 | @media (min-width: 768px) and (max-width: 1023px) {
 57 |   .statistics_header {
 58 |     grid-column: 1 / 3;
 59 |   }
 60 | }
 61 | 
 62 | @media (min-width: 1024px) {
 63 |   .statistics_header {
 64 |     grid-column: 1 / 2;
 65 |     grid-row: 1 / 3;
 66 |   }
 67 | }
 68 | 
 69 | .statistics_table,
 70 | .statistics_body,
 71 | .statistics_row {
 72 |   display: contents;
 73 | }
 74 | 
 75 | .statistics_table {
 76 |   width: 100%;
 77 |   border-collapse: collapse;
 78 | }
 79 | 
 80 | .statistics_cell {
 81 |   padding: 25px;
 82 | }
 83 | 
 84 | .statistics_cell--one {
 85 |   background-color: #404040;
 86 | }
 87 | 
 88 | .statistics_cell--two {
 89 |   background-color: #4e4e4e;
 90 | }
 91 | 
 92 | .statistics_cell--three {
 93 |   background-color: #353535;
 94 | }
 95 | 
 96 | .statistics_cell--four {
 97 |   background-color: #404040;
 98 | }
 99 | 
100 | /* Advantages */
101 | 
102 | .advantages {
103 |   padding: 25px;
104 |   display: grid;
105 |   grid-gap: 25px;
106 |   background-color: #242424;
107 | }
108 | 
109 | @media (min-width: 1024px) {
110 |   .advantages {
111 |     grid-template-columns: 1fr 1fr 1fr;
112 |   }
113 | }
114 | 
115 | .advantages_item {
116 |   padding: 25px;
117 |   background-color: #353535;
118 | }
119 | 
120 | /* News */
121 | 
122 | .news {
123 |   padding: 25px;
124 |   display: grid;
125 |   grid-gap: 25px;
126 |   background-color: #f8f5f2;
127 |   color: #000000;
128 | }
129 | 
130 | @media (min-width: 768px) {
131 |   .news {
132 |     grid-template-columns: 1fr 1fr;
133 |   }
134 | }
135 | 
136 | @media (min-width: 1024px) {
137 |   .news {
138 |     grid-template-columns: 1fr 1fr 1fr;
139 |   }
140 | }
141 | 
142 | .news_item {
143 |   padding: 25px;
144 |   background-color: #e5ddd5;
145 |   color: #000000;
146 | }
147 | 
148 | /* Footer */
149 | 
150 | .footer {
151 |   padding: 25px;
152 |   display: grid;
153 |   grid-gap: 25px;
154 |   background-color: #292929;
155 | }
156 | 
157 | @media (min-width: 768px) {
158 |   .footer {
159 |     grid-template-columns: 1fr 1fr 1fr;
160 |   }
161 | }
162 | 
163 | .contacts {
164 |   padding: 25px;
165 |   background-color: #353535;
166 | }
167 | 
168 | @media (min-width: 768px) and (max-width: 1023px) {
169 |   .contacts {
170 |     grid-column: 1 / 3;
171 |   }
172 | }
173 | 
174 | .copyright {
175 |   padding: 25px;
176 |   background-color: #353535;
177 | }
178 | 
179 | .social {
180 |   padding: 25px;
181 |   background-color: #353535;
182 | }
183 | 
184 | @media (min-width: 768px) and (max-width: 1023px) {
185 |   .social {
186 |     grid-row-start: 2;
187 |     grid-column: 1 / 4;
188 |   }
189 | }
190 | 


--------------------------------------------------------------------------------
/grid-template/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <link rel="stylesheet" href="test.css" />
 5 |     <title>Grid Template</title>
 6 |   </head>
 7 |   <body class="page">
 8 |     <header class="header">
 9 |       header
10 |     </header>
11 |     <nav class="navigation">
12 |       navigation
13 |     </nav>
14 |     <section class="statistics">
15 |       <header class="statistics_header">
16 |         statistics header
17 |       </header>
18 |       <table class="statistics_table">
19 |         <tbody class="statistics_body">
20 |           <tr class="statistics_row">
21 |             <td class="statistics_cell statistics_cell--one">
22 |               statistics item
23 |             </td>
24 |             <td class="statistics_cell statistics_cell--two">
25 |               statistics item
26 |             </td>
27 |           </tr>
28 |           <tr class="statistics_row">
29 |             <td class="statistics_cell statistics_cell--three">
30 |               statistics item
31 |             </td>
32 |             <td class="statistics_cell statistics_cell--four">
33 |               statistics item
34 |             </td>
35 |           </tr>
36 |         </tbody>
37 |       </table>
38 |     </section>
39 |     <section class="advantages">
40 |       <div class="advantages_item">
41 |         advantages item
42 |       </div>
43 |       <div class="advantages_item">
44 |         advantages item
45 |       </div>
46 |       <div class="advantages_item">
47 |         advantages item
48 |       </div>
49 |     </section>
50 |     <section class="news">
51 |       <div class="news_item">
52 |         news item
53 |       </div>
54 |       <div class="news_item">
55 |         news item
56 |       </div>
57 |       <div class="news_item">
58 |         news item
59 |       </div>
60 |       <div class="news_item">
61 |         news item
62 |       </div>
63 |       <div class="news_item">
64 |         news item
65 |       </div>
66 |       <div class="news_item">
67 |         news item
68 |       </div>
69 |     </section>
70 |     <footer class="footer">
71 |       <div class="contacts">
72 |         contacts
73 |       </div>
74 |       <div class="social">
75 |         social
76 |       </div>
77 |       <div class="copyright">
78 |         copyright
79 |       </div>
80 |       <script src="test.js"></script>
81 |     </footer>
82 |   </body>
83 | </html>
84 | 


--------------------------------------------------------------------------------
/ui-connector/dashboard.css:
--------------------------------------------------------------------------------
 1 | *,
 2 | *:before,
 3 | *:after {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0px;
 9 | }
10 | 
11 | .container {
12 |   display: grid;
13 |   background-color: #eaeff1;
14 |   line-height: 1;
15 |   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
16 | }
17 | 
18 | @media (min-width: 1024px) {
19 |   .container {
20 |     min-height: 100vh;
21 |     grid-template-columns: 255px 1fr;
22 |     grid-template-rows: 50px 1fr 50px;
23 |   }
24 | }
25 | 
26 | .header {
27 |   display: grid;
28 |   padding: 25px;
29 |   grid-template-columns: 5fr 1fr 1fr;
30 |   background-color: #009be5;
31 | }
32 | 
33 | @media (min-width: 1024px) {
34 |   .header {
35 |   }
36 | }
37 | 
38 | .navigation {
39 |   padding: 25px;
40 |   background-color: #242424;
41 |   color: #ffffff;
42 | }
43 | 
44 | @media (min-width: 1024px) {
45 |   .navigation {
46 |     grid-column: 1 / 2;
47 |     grid-row: 1 / 4;
48 |   }
49 | }
50 | 
51 | .dashboard {
52 |   display: grid;
53 | }
54 | 
55 | @media (min-width: 1024px) {
56 |   .dashboard {
57 |     grid-template-rows: 60px 1fr;
58 |   }
59 | }
60 | 
61 | .footer {
62 |   display: grid;
63 |   align-content: center;
64 |   justify-content: center;
65 | }
66 | 
67 | .copyright {
68 |   padding: 25px;
69 | }
70 | 
71 | .tabs-body {
72 |   display: grid;
73 |   padding: 50px;
74 |   background-color: #eaeff1;
75 | }
76 | 
77 | .tabs {
78 |   list-style: none;
79 |   padding: 20px;
80 |   margin: 0px;
81 |   background-color: #009be5;
82 |   border-bottom: 1px solid #dcdcdc;
83 | }
84 | 
85 | .tabs li {
86 |   float: left;
87 |   text-align: justify;
88 |   font-size: 19px;
89 |   padding: 10px;
90 |   cursor: pointer;
91 | }
92 | 


--------------------------------------------------------------------------------
/ui-connector/dashboard.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <link rel="stylesheet" href="dashboard.css" />
 5 |     <title>Title</title>
 6 |   </head>
 7 |   <body>
 8 |     <div class="container">
 9 |       <header class="header">
10 |         <div>Logo</div>
11 |         <div>Help</div>
12 |         <div>Avatar</div>
13 |       </header>
14 |       <nav class="navigation">
15 |         navigation
16 |       </nav>
17 |       <section class="dashboard">
18 |         <ul class="tabs">
19 |           <li class="tab">
20 |             <a class="tab-title" href="#tab-users">Users</a>
21 |           </li>
22 |           <li class="tab">
23 |             <a class="tab-title" href="#tab-settings">Settings</a>
24 |           </li>
25 |         </ul>
26 |         <div class="tabs-body">
27 |           <div id="tab-users">User1</div>
28 |           <div id="tab-settings">Setting1</div>
29 |         </div>
30 |       </section>
31 |       <footer class="footer">
32 |         <div class="copyright">
33 |           copyright
34 |         </div>
35 |       </footer>
36 |     </div>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------