Skip to content

Commit 29f0e87

Browse files
author
mrmrs
committed
Reorganizing stuff.
1 parent b94dc68 commit 29f0e87

File tree

14 files changed

+276
-46
lines changed

14 files changed

+276
-46
lines changed

‎README.md

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,51 @@
1-
Checkout [nkd.cc](http://nkd.cc)
1+
Checkout [nkd.cc](http://nkd.cc "NKD")
22

33
# NKD
44

5-
### Barebones scaffolding for a new Responsive HTML5 Jekyll project *
5+
## Light-weight template for a responsive HTML5/SCSS Jekyll project
66

77
NKD just works.
8-
Start developing your jekyll prototype without any of the boring setup fuss.
8+
Start developing your prototype in [jekyll](http://jekyllrb.com "Jekyll - Simple, blog-aware, static sites")
9+
without any of the boring setup.
910

10-
Site structure is as follows:
11+
# Features
12+
* Modular file structure, easy to extend or get rid of existing code.
13+
* Mobile friendly responsive type scale
14+
* Thoroughly commented code (Easy to get going if it's your first jekyll project)
15+
* Two media queries for tablet and desktop size screens. Lends itself to mobile-first design.
16+
17+
# Getting started
18+
19+
* Create a new repo for your project on Github
20+
* In terminal run
21+
```bash
22+
git clone git@github.com:mrmrs/nkd.git [yourNewRepoName]
23+
cd [yourNewRepoName]
24+
git remote rm origin
25+
git remote add origin git@github.com:[yourUserName]/[yourNewRepoName].git
26+
git remote -v
27+
```
28+
29+
* git remote -v will allow you to check that you have changed the remote origin correctly. The output should look like:
30+
```bash
31+
origin git@github.com:[yourUserName]/[yourNewRepoName].git (fetch)
32+
origin git@github.com:[yourUserName]/[yourNewRepoName].git (push)
33+
```
34+
35+
* Once you add & commit files you are ready to publish run:
36+
```bash
37+
git push -u origin master
38+
```
39+
40+
41+
42+
File structure is as follows:
1143

1244
<pre>
13-
./nkd [Site root]
45+
nkd [ Site root]
1446
├── README.md [What you're reading now]
1547
├── Rakefile [Rake sass, rake dev]
16-
├── _config.yml [Config for site. Site will run without config in defulat mode]
48+
├── _config.yml [Config for site. You can run jekyll without a _config.yml file if you want]
1749
├── _includes [Common includes I need for sites / pages]
1850
│ ├── _footer.html [_BLANK_]
1951
│ ├── _head.html [Common header elements]
@@ -32,33 +64,48 @@ Site structure is as follows:
3264
└── index.html [index file that's served up at root. The "homepage" if you will.]
3365
</pre>
3466

35-
## Rake Tasks
67+
# Rake Tasks
68+
## WAIT I'M A DESIGNER WHAT IS RAKE
69+
Rake is super simple. Don't be afraid. In this instance it's used to map unix commands
70+
to "rake tasks". It's a lot easier to remember 'rake dev' then jekyll serve --watch, well
71+
it is for me anyways. If you don't like any of these commands, don't be scared. Rakefile
72+
is a super easy file to edit.
3673

74+
Start the jekyll server on port 4000. Preview in your browser at http://localhost:4000
3775
### rake dev
3876
```
3977
jekyll serve --watch
4078
```
41-
Use this to start the jekyll server. It will auto generate a new site at _site every time you save a file.
4279

80+
Run this to start sass development and preserve css comments. Helpful for debugging. Outputs to css/includes.css.
4381
### rake sass
4482
```
4583
sass --watch _sass:css
4684
```
4785

48-
Run this to start the sass autocompiler. Outputs to /nkd/css/i.css.
49-
86+
Run this to start the sass autocompiler with minified outpu. Outputs to /nkd/css/i.css.
5087
### rake minify
5188
```
5289
sass --watch _sass:css --style compressed
5390
```
5491

92+
Run this to delete the _site directory. Use if you don't want to keep generated site locally unless actively developing.
5593
### rake clean
5694
```
5795
rm -rf _site
5896
```
5997

60-
Run this to delete the _site directory. Use if you don't want to keep generated site locally unless actively developing.
6198

99+
# Resources
100+
101+
There is an included Adobe Illustrator file that has artboards for every favicon size you'll need.
102+
If you're into that sort of thing. There are premade favicons you will want to replace or remove
103+
reference to.
104+
105+
# Author
106+
[MRMRS](http://mrmrs.cc "Adam Morse - Designer Developer")
62107

63-
Notes:
64-
* So many buzzwords.
108+
# License
109+
This work is licensed under a [Creative Commons Attribution 3.0 Unported
110+
License](http://creativecommons.org/licenses/by/3.0/ "Creative Commons
111+
License").

‎_config.yml

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
# This will be the first part of the title tag for your site <title> site.name </title>
1+
# This will be the first part of the title tag for your site
2+
# <title> {{site.name}}</title>
23
# ===============
34
name: "NKD"
45

56
# Populates the meta description for the site. Should be under 150 characters for best SEO purposes.
67
# ===============
7-
description: "NKD - A boilerplate for jekyll"
8+
description: "NKD - Boilerplate for a responsive html5"
89

910
# Owner (organization or individual) of site content
1011
# ===============
@@ -13,22 +14,18 @@ author: "mrmrs"
1314
#url: "[http:// ]"
1415
# Chance this when you generate your site for production to your production URL i.e http://mrsjxn.com
1516
# ===============
17+
#url: "http://productionurl.com
1618
url: "http://localhost:4000"
1719

1820
# Publish future posts or not option.
1921
# ===============
20-
# future: true
21-
22-
# List files and directories to include. Dot files are excluded by default - so those are good to include here.
23-
# Most things are added by default but sometimes being clear is good stuffs.
24-
# ===============
25-
#include:
22+
future: true
2623

2724
# "A list of directories (including trailing slash) and files to exclude from the conversion"
2825
# I normally exclude _sass, README*, and .gitignore
2926
# Directories that start with an underscore _ are not copied over by default. Still like to include _sass anyways.
3027
# ===============
31-
exclude: _sass, .gitignore, README.md
28+
exclude: [README.md, Rakefile]
3229

3330
# Pagination variable for how many posts to show in a list
3431
# ===============
@@ -44,5 +41,6 @@ permalink: pretty
4441
# /:month-month:day-:year/:title.html/ => 04-29-2009/slap-chop.html
4542
# /blog/:yearr/:month/:day/:title => /blog/2009/04/29/slap-chop/index.html
4643

47-
# UnComment once you have pygments installed. Used for code syntax highlighting.
44+
# Uncomment if you have pygments installed. Used for code syntax highlighting.
45+
# If you're not doing syntax highlighting you can delete this.
4846
#pygments: true

‎_includes/_facebook_open_graph.html

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎_includes/_head.html

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
31
<head>
42
<meta charset="utf-8">
53
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<title>
7-
{{site.name}}
8-
</title>
4+
5+
<title> {{site.name}} </title>
96
<meta name="author" content="{{site.author}}">
107
<meta name="description" content="{{site.description}}">
8+
119
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
1211
<link rel="stylesheet" href="css/i.css">
1312

1413
<!-- Favicons and Touch Device Icons -->
1514
<link rel="shortcut icon" href="favicon.ico">
16-
<!-- 57 -->
1715
<link rel="apple-touch-icon" href="touch-icon-iphone-precomposed.png">
1816
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-precomposed.png">
1917
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina-precomposed.png">
2018
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina-precomposed.png">
21-
22-
{% include _facebook_open_graph.html %}
2319
</head>

‎_layouts/default.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
{% include _head.html %}
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
{% include _head.html %}
24
<body>
35
{{ content }}
46
</body>

‎_layouts/post.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
{% include _head.html %}
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
{% include _head.html %}
24
<body>
35
{{ content }}
46
</body>

‎_posts/2020-01-01-example.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
# SAMPLE FRONT MATTER
3+
# Every post needs front matter. You
4+
# can add anything you want - and then access it via liquid tags.
5+
6+
7+
# Title is not required by default
8+
title: "Sample title"
9+
subtitle: "Subtitle placeholder"
10+
11+
# You are required to specify a layout
12+
layout: text
13+
---
14+
15+
{{post.title}}
16+
{{post.subtitle}}
17+
18+
Yo

‎_sass/_grid.scss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
// Add media queries for various widths if you'd like
2-
@media (min-width: ) and (max-width: ) {
1+
/* ==========================================================================
2+
GRID
3+
========================================================================== */
34

4-
}
5+
/*
6+
I use different grid systems depending on my needs, so nkd doesn't assume
7+
anything here.
8+
*/
9+
510

6-
@media (min-width: ) and (max-width: ) {
7-
8-
}

‎_sass/_queries.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* ==========================================================================
2+
QUERIES
3+
4+
- Tablets
5+
- Desktop
6+
========================================================================== */
7+
8+
/**
9+
* You can use this query inside or outside of a class like so
10+
* @include breakpoint(tablet) {
11+
* .someclass {color:red;}
12+
* }
13+
*
14+
* or
15+
*
16+
* .someclass {
17+
* @include breakpoint(desktop) {
18+
* color:blue;
19+
* }
20+
* }
21+
*
22+
* It's rather lovely.
23+
*
24+
*/
25+
26+
@mixin breakpoint($viewport-width) {
27+
@if $viewport-width == tablet {
28+
@media screen
29+
and (min-width:$tablet-min-width)
30+
and (max-width:$tablet-max-width) { @content; }
31+
}
32+
@else if $viewport-width == desktop {
33+
@media screen
34+
and (min-width:$desktop-min-width ) { @content; }
35+
}
36+
}

‎_sass/_styles.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
// Your styles here.
1+
/* ==========================================================================
2+
SITE STYLES
3+
========================================================================== */
4+
5+
/**
6+
* Add your site styles here. Break things out to additional partials if you'd like
7+
* and add them in import.scss
8+
*/

‎_sass/_type.scss

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* ==========================================================================
2+
TYPE
3+
4+
- Fonts
5+
- Headers
6+
- Copy
7+
8+
========================================================================== */
9+
10+
.serif { }
11+
.sans-serif { }
12+
13+
/* Headers
14+
========================================================================== */
15+
16+
h1,.h1 { font-size: $font-size-1; }
17+
h2,.h2 { font-size: $font-size-2; }
18+
h3,.h3 { font-size: $font-size-3; }
19+
h4,.h4 { font-size: $font-size-4; }
20+
h5,.h5 { font-size: $font-size-5; }
21+
h6,.h6 { font-size: $font-size-6; }
22+
23+
24+
/* Copy
25+
========================================================================== */
26+
27+
.intro { font-size: $font-size-3;}
28+
p { font-size: $font-size-4;}
29+
30+
31+
32+
/* Casing
33+
========================================================================== */
34+
35+
.caps-lock { text-transform:uppercase; }
36+
.title-casing { text-transform:capitalize; }
37+
38+
39+
40+
/* Tracking
41+
========================================================================== */
42+
43+
.title { letter-spacing:0.1em; text-transform:uppercase;}
44+
45+
46+
47+
/* Alignment
48+
========================================================================== */
49+
50+
.ar { text-align: right; }
51+
.al { text-align: left; }
52+
.ac,
53+
.ct { text-align: center; }
54+
55+
56+
57+
/* Wrapping
58+
========================================================================== */
59+
60+
.nw { white-space:nowrap; }
61+
62+
63+
64+
/* Leading
65+
========================================================================== */
66+
67+
.lh-1 { line-height:1; }
68+
.lh-2 { line-height:2; }
69+
.lh-title { line-height:1.3; }
70+
.lh-copy { line-height:1.5; }
71+
72+
73+
74+

0 commit comments

Comments
 (0)