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.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +382 -0
- data/_includes/blockquotes.html +4 -0
- data/_includes/buttons.html +16 -0
- data/_includes/codes.html +64 -0
- data/_includes/colors.html +36 -0
- data/_includes/columns.html +10 -0
- data/_includes/favicons.html +9 -0
- data/_includes/footer.html +7 -0
- data/_includes/header.html +10 -0
- data/_includes/headings.html +10 -0
- data/_includes/icons.html +1068 -0
- data/_includes/image.html +4 -0
- data/_includes/inputs.html +50 -0
- data/_includes/lightbox.html +8 -0
- data/_includes/lists.html +44 -0
- data/_includes/loader.html +5 -0
- data/_includes/paragraphs.html +7 -0
- data/_includes/scripts.html +5 -0
- data/_includes/tags.html +23 -0
- data/_layouts/default.html +1 -0
- data/_layouts/page.html +5 -0
- data/_layouts/post.html +5 -0
- data/_sass/_blockquotes.scss +15 -0
- data/_sass/_buttons.scss +37 -0
- data/_sass/_codes.scss +253 -0
- data/_sass/_colors.scss +24 -0
- data/_sass/_columns.scss +42 -0
- data/_sass/_content.scss +26 -0
- data/_sass/_footer.scss +7 -0
- data/_sass/_header.scss +37 -0
- data/_sass/_headings.scss +66 -0
- data/_sass/_helpers.scss +85 -0
- data/_sass/_icons.scss +865 -0
- data/_sass/_inputs.scss +116 -0
- data/_sass/_lightbox.scss +67 -0
- data/_sass/_lists.scss +94 -0
- data/_sass/_loader.scss +53 -0
- data/_sass/_paragraphs.scss +60 -0
- data/_sass/_reset.scss +50 -0
- data/_sass/_tags.scss +21 -0
- data/_sass/_tooltips.scss +56 -0
- data/_sass/_variables.scss +30 -0
- data/_sass/main.scss +21 -0
- data/assets/css/main.scss +4 -0
- data/assets/fonts/Feather.svg +276 -0
- data/assets/fonts/Feather.ttf +0 -0
- data/assets/fonts/Feather.woff +0 -0
- data/assets/img/favicons/android-chrome-192x192.png +0 -0
- data/assets/img/favicons/android-chrome-512x512.png +0 -0
- data/assets/img/favicons/apple-touch-icon.png +0 -0
- data/assets/img/favicons/browserconfig.xml +9 -0
- data/assets/img/favicons/favicon-16x16.png +0 -0
- data/assets/img/favicons/favicon-32x32.png +0 -0
- data/assets/img/favicons/favicon.ico +0 -0
- data/assets/img/favicons/mstile-150x150.png +0 -0
- data/assets/img/favicons/safari-pinned-tab.svg +25 -0
- data/assets/img/favicons/site.webmanifest +19 -0
- data/assets/img/header_bg.webp +0 -0
- data/assets/img/lightbox.jpg +0 -0
- data/assets/img/logo.png +0 -0
- data/assets/js/copycode.js +49 -0
- data/assets/js/loader.js +11 -0
- data/assets/js/main.js +60 -0
- data/assets/js/tooltip.js +492 -0
- 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
|
+

|
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
|
+

|
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,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,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>
|