1
- Checkout [ nkd .cc] ( http://nkd .cc " NKD ")
1
+ Checkout [ ht-ml .cc] ( http://ht-ml .cc " HTML - Common patterns for reuse ")
2
2
3
- # NKD
3
+ # HTML - Work in Progress
4
4
5
- #### Light-weight template for a responsive HTML5/SCSS Jekyll project
5
+ #### Common Markup Patterns
6
6
7
- NKD just works.
8
- Start developing your prototype in [ jekyll] ( http://jekyllrb.com " Jekyll - Simple, blog-aware, static sites ")
9
- without any of the boring setup.
7
+ Common markup patterns useful for developing prototypes or creating new themes.
10
8
11
9
# Features
12
10
13
- * Modular file structure, easy to extend or get rid of existing code.
14
- * Mobile friendly responsive type scale
15
- * A light-weight SCSS base that starts with Normalize.css - 1.2KB minified / 214B gzipped.
16
- * Thoroughly commented code (Easy to get going if it's your first jekyll project)
17
- * Two media queries for tablet and desktop size screens. Lends itself to mobile-first design.
11
+ * Modular file structure - add your own patterns, or delete the ones you don't like.
12
+ * Semantic markup examples for common design patterns.
13
+ * Thoroughly commented code (Useful comments and reference links for new HTML developers)
18
14
19
15
# Getting started
20
16
21
17
* Create a new repo for your project on Github
22
18
* In terminal run
23
19
``` bash
24
- git clone git@github.com:mrmrs/nkd .git [yourNewRepoName]
20
+ git clone git@github.com:mrmrs/html .git [yourNewRepoName]
25
21
cd [yourNewRepoName]
26
22
git remote rm origin
27
23
git remote add origin git@github.com:[yourUserName]/[yourNewRepoName].git
@@ -39,83 +35,7 @@ without any of the boring setup.
39
35
git push -u origin master
40
36
```
41
37
42
- # Batteries Not Included
43
-
44
- File structure is as follows:
45
-
46
- ```
47
- nkd [ Site root ]
48
- ├── README.md [ You are here ]
49
- ├── Rakefile [ Rake tasks! ]
50
- ├── _config.yml [ Site options ]
51
- ├── _includes
52
- │ ├── _footer.html
53
- │ ├── _head.html
54
- │ ├── _js_includes.html
55
- │ └── _navigation_main.html
56
- ├── _layouts
57
- │ ├── default.html
58
- │ └── post.html
59
- ├── _posts
60
- │ └── 2020-01-01-example.html
61
- ├── _resources
62
- │ └── favicons.ai
63
- ├── _sass
64
- │ ├── _grid.scss
65
- │ ├── _normalize.scss [http://necolas.github.io/normalize.css/]
66
- │ ├── _queries.scss [Configurable media queries]
67
- │ ├── _styles.scss
68
- │ ├── _type.scss
69
- │ ├── _variables.scss
70
- │ └── i.scss [Imports .scss files, compiles to css/i.css]
71
- ├── css
72
- │ └── i.css [1.8KB minified / 214B gzipped - includes normalize.css]
73
- ├── favicon.icns
74
- ├── favicon.ico
75
- ├── index.html [index file that's served up at root. The "homepage" if you will.]
76
- ├── touch-icon-ipad-precomposed.png
77
- ├── touch-icon-ipad-retina-precomposed.png
78
- ├── touch-icon-iphone-precomposed.png
79
- └── touch-icon-iphone-retina-precomposed.png
80
- ```
81
-
82
- # Rake Tasks
83
- ## WAIT I'M A DESIGNER WHAT IS RAKE
84
- Rake is super simple. Don't be afraid. In this instance it's used to map unix commands
85
- to "rake tasks". It's a lot easier to remember 'rake dev' then jekyll serve --watch, well
86
- it is for me anyways. If you don't like any of these commands, don't be scared. Rakefile
87
- is a super easy file to edit - even if it looks scary because it doesn't have an extension.
88
-
89
- Start the jekyll server on port 4000. Preview in your browser at http://localhost:4000
90
- ### rake dev
91
- ```
92
- jekyll serve --watch
93
- ```
94
-
95
- Run this to start sass development and preserve css comments. Helpful for debugging. Outputs to css/includes.css.
96
- ### rake sass
97
- ```
98
- sass --watch _sass:css
99
- ```
100
-
101
- Run this to start the sass autocompiler with minified outpu. Outputs to /nkd/css/i.css.
102
- ### rake minify
103
- ```
104
- sass --watch _sass:css --style compressed
105
- ```
106
-
107
- Run this to delete the _ site directory. Use if you don't want to keep generated site locally unless actively developing.
108
- ### rake clean
109
- ```
110
- rm -rf _site
111
- ```
112
-
113
-
114
- # Resources
115
-
116
- There is an included Adobe Illustrator file that has artboards for every favicon size you'll need.
117
- If you're into that sort of thing. There are premade favicons you will want to replace or remove
118
- reference to.
38
+ Now your set up to use this in a new project.
119
39
120
40
# Author
121
41
[ MRMRS] ( http://mrmrs.cc " Adam Morse - Designer Developer ")
0 commit comments