jekyll-sharp-styleguide 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +382 -0
  4. data/_includes/blockquotes.html +4 -0
  5. data/_includes/buttons.html +16 -0
  6. data/_includes/codes.html +64 -0
  7. data/_includes/colors.html +36 -0
  8. data/_includes/columns.html +10 -0
  9. data/_includes/favicons.html +9 -0
  10. data/_includes/footer.html +7 -0
  11. data/_includes/header.html +10 -0
  12. data/_includes/headings.html +10 -0
  13. data/_includes/icons.html +1068 -0
  14. data/_includes/image.html +4 -0
  15. data/_includes/inputs.html +50 -0
  16. data/_includes/lightbox.html +8 -0
  17. data/_includes/lists.html +44 -0
  18. data/_includes/loader.html +5 -0
  19. data/_includes/paragraphs.html +7 -0
  20. data/_includes/scripts.html +5 -0
  21. data/_includes/tags.html +23 -0
  22. data/_layouts/default.html +1 -0
  23. data/_layouts/page.html +5 -0
  24. data/_layouts/post.html +5 -0
  25. data/_sass/_blockquotes.scss +15 -0
  26. data/_sass/_buttons.scss +37 -0
  27. data/_sass/_codes.scss +253 -0
  28. data/_sass/_colors.scss +24 -0
  29. data/_sass/_columns.scss +42 -0
  30. data/_sass/_content.scss +26 -0
  31. data/_sass/_footer.scss +7 -0
  32. data/_sass/_header.scss +37 -0
  33. data/_sass/_headings.scss +66 -0
  34. data/_sass/_helpers.scss +85 -0
  35. data/_sass/_icons.scss +865 -0
  36. data/_sass/_inputs.scss +116 -0
  37. data/_sass/_lightbox.scss +67 -0
  38. data/_sass/_lists.scss +94 -0
  39. data/_sass/_loader.scss +53 -0
  40. data/_sass/_paragraphs.scss +60 -0
  41. data/_sass/_reset.scss +50 -0
  42. data/_sass/_tags.scss +21 -0
  43. data/_sass/_tooltips.scss +56 -0
  44. data/_sass/_variables.scss +30 -0
  45. data/_sass/main.scss +21 -0
  46. data/assets/css/main.scss +4 -0
  47. data/assets/fonts/Feather.svg +276 -0
  48. data/assets/fonts/Feather.ttf +0 -0
  49. data/assets/fonts/Feather.woff +0 -0
  50. data/assets/img/favicons/android-chrome-192x192.png +0 -0
  51. data/assets/img/favicons/android-chrome-512x512.png +0 -0
  52. data/assets/img/favicons/apple-touch-icon.png +0 -0
  53. data/assets/img/favicons/browserconfig.xml +9 -0
  54. data/assets/img/favicons/favicon-16x16.png +0 -0
  55. data/assets/img/favicons/favicon-32x32.png +0 -0
  56. data/assets/img/favicons/favicon.ico +0 -0
  57. data/assets/img/favicons/mstile-150x150.png +0 -0
  58. data/assets/img/favicons/safari-pinned-tab.svg +25 -0
  59. data/assets/img/favicons/site.webmanifest +19 -0
  60. data/assets/img/header_bg.webp +0 -0
  61. data/assets/img/lightbox.jpg +0 -0
  62. data/assets/img/logo.png +0 -0
  63. data/assets/js/copycode.js +49 -0
  64. data/assets/js/loader.js +11 -0
  65. data/assets/js/main.js +60 -0
  66. data/assets/js/tooltip.js +492 -0
  67. metadata +123 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 53d3cc402d10f081423e4749eeeaa619aadba13d30fc2beb85e07a8c98a7c5dd
4
+ data.tar.gz: 2ff201a34417bfb7307670d1826c99229152f6f8942cdd1e71b408d39a35cd62
5
+ SHA512:
6
+ metadata.gz: 4ccff18691b87d5968cdda2968ca9215351adc9f0eacbe33ce53e0d8a0129e8dfcf30a620139fba67d7a84508c1a2846a8cd8d0d9ca7869d639f35693cccc6e4
7
+ data.tar.gz: d386bd69d00bd11aac709c00d52190d47ce27c592d52967aee4dfb141a8b369c78ae92aaecbb124e39037cf6cb966c7f0c465c41f52327aca651403c6e0d2575
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2022 eriktailor
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,382 @@
1
+ # Jekyll Sharp StyleGuide
2
+
3
+ A fresh, lightweight custom built styleguide template to use with Jekyll sites. Just download or clone from the github repo and start building your site upon it.
4
+
5
+ ### [Check out the live demo](https://eriktailor.github.io/jekyll-sharp-styleguide/)
6
+
7
+ ---
8
+
9
+ ## Table of contents
10
+
11
+ 1. [Requirements](#requirements)
12
+ 2. [Features](#features)
13
+ 3. [Installion](#installion)
14
+ 4. [Project structure](#project-structure)
15
+ 5. [Configuration](#configuration)
16
+ 6. [Customize favicon](#customize-favicon)
17
+ 7. [Customize variables](#customize-variables)
18
+ 8. [Assets](#assets)
19
+ 9. [Working with includes](#working-with-includes)
20
+ 10. [Modifying styles](#modifying-styles)
21
+ 11. [Helper classes](#helper-classes)
22
+ 12. [Editing layouts](#editing-layouts)
23
+ 13. [Deploy your site](#deploy-your-site)
24
+ 14. [Resources](#resources)
25
+ 15. [Changelog](#changelog)
26
+
27
+ ---
28
+
29
+ ## Requirements
30
+
31
+ - A basic knowledge of HTML, CSS and Jekyll is required, however the usuage is documented in a short, clear format.
32
+ - Ruby and Jekyll set up on your computer
33
+ - Bunch of creativity to build your own custom site 😋
34
+
35
+ ---
36
+
37
+ ## Features
38
+
39
+ - lightweight, rapid fast loading speed
40
+ - completely responsive using fluid layouts
41
+ - autoprefix css output for browser compatibility
42
+ - compress & minify all html, css and js output
43
+ - helper classes for a quicker workflow
44
+ - custom 6 columns responsoive grid system
45
+ - customized ordered & unordered lists
46
+ - includes a functional lightbox
47
+ - responsive typography and fonts
48
+ - form inputs styling (text, textarea, select, checkbox)
49
+ - code blocks with syntax highlighting
50
+ - copy a code block with one click function
51
+ - 260+ scaleable vector icons to choose from
52
+ - anchor links on every header with hashtag
53
+ - page loader animation effect
54
+
55
+ ---
56
+
57
+ ## Installion
58
+
59
+ Add this line to your Jekyll site's `Gemfile`:
60
+
61
+ ```ruby
62
+ gem "jekyll-sharp-styleguide"
63
+ ```
64
+
65
+ And add this line to your Jekyll site's `_config.yml`:
66
+
67
+ ```yaml
68
+ theme: jekyll-sharp-styleguide
69
+ ```
70
+
71
+ And then execute:
72
+
73
+ $ bundle
74
+
75
+ Or install it yourself as:
76
+
77
+ $ gem install jekyll-sharp-styleguide
78
+
79
+ The project is all set up, you just need to serve it:
80
+
81
+ ```shell
82
+ bundle exec jekyll serve
83
+ ```
84
+
85
+ Or if you want to compile your project for production (minify, autoprefix, etc.), use this command:
86
+
87
+ ```shell
88
+ JEKYLL_ENV=production bundle exec jekyll serve
89
+ ```
90
+
91
+ ---
92
+
93
+ ## Project structure
94
+
95
+ This is the directory structure of the project:
96
+
97
+ ```other
98
+ jekyll-rapid-styleguide/
99
+ ├── _includes
100
+ ├── _layouts
101
+ ├── _sass
102
+ ├── _site
103
+ └── assets
104
+ ├── css
105
+ ├── fonts
106
+ ├── img
107
+ └── js
108
+ ```
109
+
110
+ #### What are these folders?
111
+
112
+ - **\_includes** - contain partials and reusable components
113
+ - **\_layouts** - contain the different site layouts. Currently only the default layout is used.
114
+ - **\_sass** - here you can find the separate style files of each component and partial
115
+ - **\_site** - jekyll builds (or serve) the project's output in this folder.
116
+ - **assets** - containing the assets of the site, nicely separated in relevant folders
117
+
118
+ ---
119
+
120
+ ## Configuration
121
+
122
+ As in every Jekyll project, the base configuration file is `_config.yml` in the project's root folder. Feel free to open it in your text editor and customize the basic details of the site:
123
+
124
+ ```yaml
125
+ title: Jekyll Sharp StyleGuide
126
+ tagline: A styleguide template in Jekyll.
127
+ description: A fresh, lightweight custom built styleguide template in Jekyll.
128
+ author: ErikTailor
129
+ locale: en
130
+ ```
131
+
132
+ > > You can obviously modify other settings in the configuration file as well, however it's not needed for a typical usuage, as these settings cover the best setup for usuage of this styleguide template.
133
+
134
+ ---
135
+
136
+ ## Customize favicon
137
+
138
+ Favicon (or site icon) is the tiny picture near the tab title of your website in a browser. If you have your custom image ready, go to the [favicon generator](https://realfavicongenerator.net/) and select your image. Customize the settings if needed, and make sure that the last setting **Favicon Generator Options** is set for locate favicons from a custom path (instead of project root) and enter `/assets/img/favicons` as a path. Finally download the generated package, and replace the original favicons in the project.
139
+
140
+ ---
141
+
142
+ ## Customize variables
143
+
144
+ To modify the visual elements of the styleguide template, you have to adjust a the style setting variables in `_sass/_variables.scss` file. Open it up in your text editor, and customize it.
145
+
146
+ ### Options
147
+
148
+ | `Colors` | Change the [theme color](https://eriktailor.github.io/jekyll-sharp-styleguide/#colors) variablees |
149
+ | ------------- | ----------------------------------------------------------------------------------------------------- |
150
+ | `Fonts` | Change the [font family](https://eriktailor.github.io/jekyll-sharp-styleguide/#headings) of the theme |
151
+ | `Headings` | Set the size of the [headings](https://eriktailor.github.io/jekyll-sharp-styleguide/#paragraphs) |
152
+ | `Radius` | Set the global border radius value |
153
+ | `Breakpoints` | The responsive breakpoints, where layout changes |
154
+ | `Spacer` | Spacer is a global variable used to define the spacing between elements. |
155
+
156
+ ---
157
+
158
+ ## Assets
159
+
160
+ Every asset of the site is located in the `assets` folder. You can:
161
+
162
+ - add / modify images in the **img** folder
163
+ - add / modify local hosted fonts in the **fonts** folder
164
+ - add / modify javascript files in the **js** folder. If you want to add a new script file to the project, you need to include it in the **js** folder, and call for it in the `_includes/scripts.html` file.
165
+ - do not use the **css** folder at all, as it grabs the output of the stylings in the **\_sass** folder
166
+
167
+ ---
168
+
169
+ ## Working with includes
170
+
171
+ The site partials and reusable components are located in the `_includes` folder. You can always add / modify / remove any of the files, according to the usuage of [Jekyll Includes](https://jekyllrb.com/docs/includes/) as in the original documentation.
172
+
173
+ ### Example
174
+
175
+ Let's say that you want to add a tagline below the site title in the hero section. To do this, you have to edit the `_includes/header.html` partial, by adding the following code below the `<h1>` tag:
176
+
177
+ ```html
178
+ <h1>{{ site.title }}</h1>
179
+ <h2>My amazing tagline</h2>
180
+ ```
181
+
182
+ Save the file, and head to the frontend of your site at `http://localhost:4000` address. You will see, that the new tagline has been nicely added in the header:
183
+
184
+ ![Image.png](https://res.craft.do/user/full/34d81fee-a2e7-021c-d5fc-2e46d6c760cb/doc/E052B4B3-0E45-4588-A5E1-0559D6FDBE22/C71A000B-E4E8-4701-8EBC-1C442A37F093_2/fxwzT6IynS1PVgxKMu5u07H1SyEA9Y2zPmo8NMih8bsz/Image.png)
185
+
186
+ > > **Note:** when you removing an include file, make sure to delete every instances where that include was called, or you will get a Jekyll error in building. So assume you delete **image.html** partial, then you have to delete these everywhere in the project.
187
+
188
+ ---
189
+
190
+ ## Modifying styles
191
+
192
+ If you are familiar with [Sass syntax](https://sass-lang.com/), you can easily modify a component's style in it's `.scss` file. Every component is in a separate file, so you will probably find the element part you are looking for.
193
+
194
+ ### Example
195
+
196
+ For example, you want to change the background color of the button component to black. Open the `_sass/buttons.scss` file, and change the **background-color** attribute's value to dark:
197
+
198
+ ```css
199
+ .btn {
200
+ background: $dark;
201
+ ...
202
+ ```
203
+
204
+ After the build (or serve), if you go to the frontend, you will see that the button's background changed according to your modification made:
205
+
206
+ ![Image.png](https://res.craft.do/user/full/34d81fee-a2e7-021c-d5fc-2e46d6c760cb/doc/E052B4B3-0E45-4588-A5E1-0559D6FDBE22/71628610-C137-455B-AD39-9FCA8B387E03_2/yxNBMNj2TWwdtpdQpEpMZvgvk1LRhmTnolZchgc4Gpsz/Image.png)
207
+
208
+ > > Feel free to edit each `.scss` file to achieve the expected custom layout imagined for your website.
209
+
210
+ ---
211
+
212
+ ## Helper classes
213
+
214
+ The concept was to make available a couple of `css` helper classes in head of the most quick development / customizing workflow. The base idea is that you not neeed to write css code every time you want to do a minor adjustment for example, just use the classes on the element you want to style, and achieve the expected result with less time spent.
215
+
216
+ ### Example
217
+
218
+ Let's say, you want to add a bigger bottom spacing to an element. The usual way would be to target the element with a class or id, and write a css code to achieve the requested spacing, like:
219
+
220
+ ```css
221
+ #mydiv {
222
+ margin-bottom: 50px;
223
+ }
224
+ ```
225
+
226
+ Instead of this, you can just add the `mb-5` class (which is 50px margin to the bottom) to to the element, and get the expected result immediately, without need to write a line of code.
227
+
228
+ ### Margin & Padding
229
+
230
+ The template has a few helper classes for adjusting the target's margin or padding values. The basic syntax is formatted like `<property><direction>-<size>`.
231
+
232
+ - **property:** it can be `m` for margin, and `p` for padding
233
+ - **direction:**
234
+ - `t` for top
235
+ - `e` for right (end)
236
+ - `b` for bottom
237
+ - `s` for left (start)
238
+ - **distance**:
239
+ - `1` for 10px
240
+ - `2` for 20px
241
+ - `3` for 30px
242
+ - `4` for 40px
243
+ - `5` for 50px
244
+
245
+ Actually this is the exact same method what [Bootstrap](https://getbootstrap.com/docs/5.1/utilities/spacing) uses for spacing helpers. So to grab things together, let's say you want to add a left padding of 30px to an element. Just add the class `ps-3` .
246
+
247
+ ```css
248
+ .ps-3
249
+ <padding
250
+ > <start
251
+ > -<30px
252
+ > .mt-1
253
+ <margin
254
+ > <top
255
+ > -<10px
256
+ > .pb-5
257
+ <padding
258
+ > <bottom
259
+ > -<50px
260
+ > .me-4
261
+ <margin
262
+ > <end
263
+ > -<40px
264
+ >;
265
+ ```
266
+
267
+ ### Colors
268
+
269
+ About painting, we will cover two types:
270
+
271
+ \* coloring a background
272
+
273
+ \* coloring a text
274
+
275
+ ### Background color
276
+
277
+ The syntax would be the following: `.bg-<color>`. Colors can be these by default:
278
+
279
+ - **accent**: #2AAB7B
280
+ - **dark**: #17100F
281
+ - **light**: #F6F5F5
282
+ - **white**: #FFFFFF
283
+
284
+ ```css
285
+ .bg-accent {
286
+ background-color: $accent;
287
+ }
288
+ .bg-white {
289
+ background-color: $white;
290
+ }
291
+ ```
292
+
293
+ ### Text color
294
+
295
+ The syntax is: `.text-<color>`. You can use the colors mentioned above. So let's see examples:
296
+
297
+ ```css
298
+ .text-dark {
299
+ color: $dark;
300
+ }
301
+ .text-white {
302
+ color: $white;
303
+ }
304
+ ```
305
+
306
+ ### Opacity
307
+
308
+ It works like this: `.opacity-<number>`. Numbering is by tens, if it's lower, the opacity of the element is as low as that value:
309
+
310
+ ```css
311
+ .opacity-70 {
312
+ opacity: 0.7;
313
+ }
314
+ .opacity-20 {
315
+ opacity: 0.2;
316
+ }
317
+ ```
318
+
319
+ ### Display
320
+
321
+ The last one is making the display css attribute easier to implement. The syntax is `.d-<value>` .
322
+
323
+ - **none**: don't display at all
324
+ - **block**: display as block
325
+ - **inline-block**: display as an inline block
326
+ - **inline**: display as an inline elemenet
327
+
328
+ ```css
329
+ .d-block {
330
+ display: block;
331
+ }
332
+ .d-none {
333
+ display: none;
334
+ }
335
+ ```
336
+
337
+ > > **Note**: You will find the sources of these helper classses in the `_sass/_helpers.scss` file.
338
+
339
+ ---
340
+
341
+ ## Editing layouts
342
+
343
+ In this styleguide template I only use a single layout, the default one at `_layouts/default.html`.
344
+
345
+ You have to edit this file if you may want to:
346
+
347
+ - edit the `<head>` contents
348
+ - modify the wrapper elements of the main content
349
+ - add / remove lightbox, page loader, header, footer, etc.
350
+ - add scripts manually to the bottom of the page
351
+
352
+ > > **Note**: You are always free to create as many layouts as you need, according to [Jekyll's layout](https://jekyllrb.com/docs/step-by-step/04-layouts/) documentation for more information on using layouts.
353
+
354
+ ---
355
+
356
+ ## Deploy your site
357
+
358
+ When you feel ready, and satisfied with the result, you may want to deploy the project to a website. If you planning to use [GitHub Pages](https://pages.github.com/), you can find a [great tutorial](https://eriktailor.github.io/blog/use-any-jekyll-plugins-with-github-pages/) on this written by me.
359
+
360
+ ---
361
+
362
+ ## Resources
363
+
364
+ #### Third-party assets
365
+
366
+ - [Feather Icons](https://dropways.github.io/feathericons/) - 260+ scaleable vector icons included and ready to use
367
+ - [SimpleTooltip](https://github.com/not-only-code/Simpletooltip) - adds a tooltip function where needed
368
+
369
+ #### Jekyll plugins
370
+
371
+ - [jekyll-autoprefixer](https://github.com/vwochnik/jekyll-autoprefixer) - add vendor prefixes for browser compatibility to css output
372
+ - [jekyll-minifier](https://github.com/digitalsparky/jekyll-minifier) - plugin to compress & minify html, css, js files
373
+
374
+ **Note:** these jekyll plugins are not supported by GitHub Pages, so if you plan to host your website with it, you have to know that these plugins won't work.
375
+
376
+ ---
377
+
378
+ ## Changelog
379
+
380
+ #### v0.1.0
381
+
382
+ - Initial release
@@ -0,0 +1,4 @@
1
+ <h3>Blockquotes</h3>
2
+
3
+ <h6>Default</h6>
4
+ <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim inter eros elementum tristique sodales malesuda vivamus elit dolores adipiscing.</blockquote>
@@ -0,0 +1,16 @@
1
+ <h3>Buttons</h3>
2
+
3
+ <div class="row md-3">
4
+ <div class="col">
5
+ <h6>Default state</h6>
6
+ <button class="btn w-100">Click the button</button>
7
+ </div>
8
+ <div class="col">
9
+ <h6>Hover state</h6>
10
+ <button class="btn w-100 hover">Click the button</button>
11
+ </div>
12
+ <div class="col">
13
+ <h6>Disabled state</h6>
14
+ <button class="btn w-100 disabled" disabled>Click the button</button>
15
+ </div>
16
+ </div>
@@ -0,0 +1,64 @@
1
+ <h3>Codes</h3>
2
+
3
+ <h6>Html & Markdown</h6>
4
+ {% highlight html %}
5
+ <section>
6
+ <div class="wrap">
7
+ <h1 class="title">Hello</h1>
8
+ </div>
9
+ </section>
10
+ {% endhighlight %}
11
+
12
+ <h6>Javascript</h6>
13
+ {% highlight javascript %}
14
+ function sayHello(name) {
15
+ if (!name) {
16
+ console.log('Hello World');
17
+ }
18
+ }
19
+ {% endhighlight %}
20
+
21
+ <h6>Scss & Css code</h6>
22
+ {% highlight scss %}
23
+ .selector {
24
+ background: $variable;
25
+ display: block;
26
+ color: red;
27
+ }
28
+ {% endhighlight %}
29
+
30
+ <h6>Scroll code block</h6>
31
+ {% highlight html %}
32
+ <section id="contact">
33
+ <div classs="form-container">
34
+ <form action="#" method="post">
35
+ <!-- Name field -->
36
+ <label for="name">Name:</label>
37
+ <input type="text" id="name" name="name">
38
+
39
+ <!-- Email field -->
40
+ <label for="email">Email:</label>
41
+ <input type="text" id="email" name="email">
42
+
43
+ <!-- Message field -->
44
+ <label for="message">Message:</label>
45
+ <textarea id="message" name="message"></textarea>
46
+
47
+ <!-- Submit button -->
48
+ <button type="submit">Submit</button>
49
+
50
+ </form>
51
+ </div>
52
+ </section>
53
+
54
+ <footer id="footer">
55
+ <div class="footer-container">
56
+ <div class="footer-wrap">
57
+
58
+ <h6 class="copyright-text">2022 © MyWebsite.</h6>
59
+ <a href="contact.html">Contact me</a>
60
+
61
+ </div>
62
+ </div>
63
+ </footer>
64
+ {% endhighlight %}
@@ -0,0 +1,36 @@
1
+ <h3>Colors</h3>
2
+
3
+ <div class="row md-4 sm-2">
4
+ <div class="col">
5
+ <div class="color-item">
6
+ <h6>Accent</h6>
7
+ <figure class="bg-accent">
8
+ <p class="text-white">#2AAB7B</p>
9
+ </figure>
10
+ </div>
11
+ </div>
12
+ <div class="col">
13
+ <div class="color-item">
14
+ <h6>Dark</h6>
15
+ <figure class="bg-dark">
16
+ <p class="text-white">#17100F</p>
17
+ </figure>
18
+ </div>
19
+ </div>
20
+ <div class="col">
21
+ <div class="color-item">
22
+ <h6>Light</h6>
23
+ <figure class="bg-light">
24
+ <p>#F6F5F5</p>
25
+ </figure>
26
+ </div>
27
+ </div>
28
+ <div class="col">
29
+ <div class="color-item">
30
+ <h6>White</h6>
31
+ <figure class="bg-white" style="box-shadow: inset 0px 0px 0 1px rgba(0,0,0,0.15)">
32
+ <p>#FFFFFF</p>
33
+ </figure>
34
+ </div>
35
+ </div>
36
+ </div>
@@ -0,0 +1,10 @@
1
+ <h3>Columns</h3>
2
+
3
+ <div class="row md-6 sm-6 xs-3 row-columns">
4
+ <div class="col bg-light"></div>
5
+ <div class="col bg-light"></div>
6
+ <div class="col bg-light"></div>
7
+ <div class="col bg-light"></div>
8
+ <div class="col bg-light"></div>
9
+ <div class="col bg-light"></div>
10
+ </div>
@@ -0,0 +1,9 @@
1
+ <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
2
+ <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
3
+ <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
4
+ <link rel="manifest" href="/assets/img/favicons/site.webmanifest">
5
+ <link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
6
+ <link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
7
+ <meta name="msapplication-TileColor" content="#00aba9">
8
+ <meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
9
+ <meta name="theme-color" content="#ffffff">
@@ -0,0 +1,7 @@
1
+ <footer>
2
+ <div class="container">
3
+ <p class="mb-0">
4
+ <small>2022 © ErikTailor | Made with ❤️ using Jekyll</small>
5
+ </p>
6
+ </div>
7
+ </footer>
@@ -0,0 +1,10 @@
1
+ <header>
2
+ <div class="container">
3
+ <a class="site-logo" href="https://eriktailor.github.io" target="_blank">
4
+ <img src="assets/img/logo.png" alt="ErikTailor" width="168" height="71">
5
+ </a>
6
+ <h1>{{ site.title }}</h1>
7
+ <p class="text-white opacity-70">This is a customizable Jekyll based project that can be used as a starting point of building a custom static html website. Basically it"s a onepage styleguide including every component what a website UI should have.</p>
8
+ <a class="btn" href="https://github.com/eriktailor/jekyll-sharp-styleguide" target="_blank">Get started now</a>
9
+ </div>
10
+ </header>
@@ -0,0 +1,10 @@
1
+ <h3>Headings</h3>
2
+
3
+ <h6>H1 heading</h6>
4
+ <h1>Headline title 1</h1>
5
+ <h6>H2 heading</h6>
6
+ <h2>Headline title 2</h2>
7
+ <h6>H3 heading</h6>
8
+ <h3>Headline title 3</h3>
9
+ <h6>H4 heading</h6>
10
+ <h4>Headline title 4</h4>