• Stars
    star
    230
  • Rank 174,030 (Top 4 %)
  • Language
    CSS
  • Created over 11 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Template for jekyll project with postcss and browser-sync

Checkout http://mrmrs.io/nkd

NKD

Light-weight template for a responsive HTML5/SCSS Jekyll project

NKD just works. Start developing your prototype in jekyll without any of the boring setup.

Features

  • Modular file structure, easy to extend or get rid of existing code.
  • Mobile friendly responsive type scale
  • A light-weight SCSS base that starts with Normalize.css - 1.2KB minified / 214B gzipped.
  • Thoroughly commented code (Easy to get going if it's your first jekyll project)
  • Two media queries for tablet and desktop size screens. Lends itself to mobile-first design.

Getting started

  • Create a new repo for your project on Github
  • In terminal run
    git clone [email protected]:mrmrs/nkd.git [yourNewRepoName]
    cd [yourNewRepoName]
    npm install && npm start

If you want to set this up as your own github project you'll want to do the following.

    rm -rf .git
    git init
    git remote add origin [email protected]:[yourUserName]/[yourNewRepoName].git
    git remote -v
    origin [email protected]:[yourUserName]/[yourNewRepoName].git (fetch)
    origin  [email protected]:[yourUserName]/[yourNewRepoName].git (push)
  • Once you add & commit files you are ready to publish run:
git push -u origin master

Batteries Not Included

File structure is as follows:

nkd                                 [ Site root ]
  ├── README.md                     [ You are here ]
  ├── package.json                  [ project info and npm dependencies ]
  ├── gulpfile.js                       [ Automated js tasks ]
  ├── _config.yml                   [ Site options ]
  ├── _development_config.yml                   [ Site options ]
  ├── _includes
  │   ├── _footer.html
  │   ├── _head.html
  │   ├── _js_includes.html
  │   └── _navigation_main.html
  ├── _layouts
  │   ├── default.html
  │   └── post.html
  ├── _posts
  │   └── 2020-01-01-example.html
  ├── _resources
  │   └── favicons.ai
  ├── _sass
  │   ├── _grid.scss
  │   ├── _normalize.scss           [http://necolas.github.io/normalize.css/]
  │   ├── _queries.scss             [Configurable media queries]
  │   ├── _styles.scss
  │   ├── _type.scss
  │   ├── _variables.scss
  │   └── nkd.scss                    [Imports .scss files, compiles to css/nkd.css]
  ├── css
  │   └── nkd.css                     [1.8KB minified / 214B gzipped - includes normalize.css]
  ├── favicon.icns
  ├── favicon.ico
  ├── index.html                    [index file that's served up at root. The "homepage" if you will.]
  ├── touch-icon-ipad-precomposed.png
  ├── touch-icon-ipad-retina-precomposed.png
  ├── touch-icon-iphone-precomposed.png
  └── touch-icon-iphone-retina-precomposed.png

Resources

There is an included Adobe Illustrator file that has artboards for every favicon size you'll need. If you're into that sort of thing. There are premade favicons you will want to replace or remove reference to.

Author

MRMRS

License

The MIT License (MIT)

Copyright (c) 2015 @mrmrs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

colors

Smarter defaults for colors on the web.
CSS
9,240
star
2

pesticide

Kill your css layout bugs
CSS
1,367
star
3

fluidity

The worlds smallest fully-responsive css framework
JavaScript
1,103
star
4

mnml

Start a responsive html5 site with postcss and browser-sync
CSS
706
star
5

btns

A set of css utilities for constructing beautiful responsive buttons
CSS
340
star
6

gradients

Gradients!
HTML
261
star
7

html

HTML blocks
HTML
248
star
8

awesome-system-fonts

An awesome list of websites that use system fonts
189
star
9

css-uncut

WIP: All of css as single purpose classes
CSS
119
star
10

vimgifs

http://vimgifs.com
HTML
117
star
11

type.css

A mobile-first responsive type scale
CSS
106
star
12

links

Better default styles for text links
HTML
85
star
13

css-system-fonts

A css module for utilizing system fonts across platforms
HTML
84
star
14

component-api-talk

First draft of a talk I gave recently that I'm trying to turn into a blog post
77
star
15

react-elements

Prototyping setup: React + Glamorous + Styled-system
JavaScript
62
star
16

trim

An easier workflow for faster better stronger websites
CSS
48
star
17

viminfo

Tool to audit your daily vim usage
JavaScript
41
star
18

diatonic-type

Diatonic print scale translated to be a responsive type scale for the web.
CSS
41
star
19

writing

Blog about vim, css, and design.
JavaScript
29
star
20

jkl

Boilerplate for a jekyll blog with a responsive type scale.
CSS
28
star
21

tachyons-lite

Tachyons is small. Tachyons-lite is smaller.
CSS
28
star
22

colors-saturated

A saturated color palette
CSS
27
star
23

screencasts

Screencasts on using vim, git, unix, and oocss as design tools
CSS
27
star
24

ios-dynamic-type

CSS module for using dynamic type in iOS on the web
CSS
26
star
25

profile

WIP responsive github profile viewer
CSS
25
star
26

x0-styled

Prototyping static sites with x0 + glamorous + styled-system
JavaScript
25
star
27

slides-cssconfoakland-2014

Slides from my talk at cssconf oakland
24
star
28

mrmrs

Personal Portfolio Site
HTML
23
star
29

representation

Data visualization project around representation in congress, executive branch, and supreme court
JavaScript
22
star
30

colors-sass

colors.css powered by sass
CSS
21
star
31

vimrc

Vim Script
19
star
32

elements

Design prototypes, and production ready apps with: React + Styled-System + Glamorous
JavaScript
17
star
33

marquee

HTML
15
star
34

mrsjxn

Source for mrsjxn.com. Built with angular.
CSS
15
star
35

css-unabridged

An experiment with css
CSS
15
star
36

ideas

HTML
14
star
37

tachyons-elements

Tachyons + styled-system
JavaScript
13
star
38

css-spacing

Responsive CSS module for setting margin and padding on elements
CSS
13
star
39

small

CSS for small devices
CSS
12
star
40

cssstats-starter-kit

CSS
11
star
41

paper

CSS
11
star
42

sans-serif

CSS module for utilizing system sans-serif fonts
HTML
10
star
43

css-cursors

CSS module for setting the cursor property
CSS
10
star
44

contrast

Visual example for readable and unreadable contrasts
HTML
9
star
45

waves

Visualizing Wave form data from music
JavaScript
9
star
46

colors-less

colors.css powered by less
CSS
8
star
47

beats

Beats by skullcat
CSS
8
star
48

ill

CSS
8
star
49

-

My favorite unicode
CSS
8
star
50

static

JavaScript
8
star
51

hsla

Demo site built in under 5 minutes
7
star
52

grids

7
star
53

qstns

Asking Better Questions
CSS
7
star
54

prnt

Portfolio of Print work
CSS
6
star
55

links.css

CSS
6
star
56

images

Black and white images I like for including as placeholders when prototyping.
6
star
57

css-grid

CSS module for CSS grid
CSS
6
star
58

scary

Prototyping environment with react, next, css-in-js, and styled-system
JavaScript
6
star
59

css-display

Responsive CSS module for setting display
CSS
6
star
60

css-colors

CSS color variables
CSS
6
star
61

floats

CSS
5
star
62

css-averages

CSS
5
star
63

up

A short photo project
HTML
5
star
64

mrmrs.github.io

CSS
5
star
65

notesfromthetribe

Artwork of Will Deutsch
CSS
5
star
66

colors-stylus

Colors.css powered by stylus
CSS
5
star
67

css-filter-blur

CSS module for using the blur function
CSS
5
star
68

gfffs

HIDEF GIFS
CSS
5
star
69

css-text-underline

Responsive CSS module for setting text-underline
CSS
5
star
70

css-type-scale

Simple, mobile-first responsive type-scale
CSS
5
star
71

css-paged-media

CSS module for setting page break
CSS
5
star
72

css-utilities

CSS module of simple utilities
CSS
5
star
73

css-text-overflow

Responsive CSS module for setting text-overflow
CSS
5
star
74

css-letter-spacing

Responsive CSS module for setting tracking (letter-spacing)
CSS
4
star
75

css-npm-template

Template for new css modules to be hosted on npm
CSS
4
star
76

css-transition-duration

Responsive CSS module for setting transition duration
CSS
4
star
77

css-hyphens

Resposive CSS module for setting hyphen property across breakpoints
CSS
4
star
78

css-clip

CSS module for setting clip property
CSS
4
star
79

css-squares

Utilities classes for creating squares with CSS
CSS
4
star
80

photos

CSS
4
star
81

talk-static-sites

4
star
82

css-z-index

Responsive CSS module for setting z-index
CSS
4
star
83

tops

Responsive photo grid built in less than 5 minutes
CSS
4
star
84

css-overflow

CSS module for setting overflow
CSS
4
star
85

talk

4
star
86

css-border-colors

Responsive CSS module for setting border colors
CSS
4
star
87

api

Personal application programming interface
4
star
88

css-word-wrap

Responsive CSS moule for setting word-wrap property
CSS
4
star
89

talk__better-tools-engine-yard

Slides from a talk I gave on the need for better css authoring tools. These slides are beyond uninformative.
4
star
90

mdx-x0

JavaScript
4
star
91

css-unicode-range

Responsive CSS module for setting unicode range
CSS
4
star
92

css-skins

CSS module with utility classes for skinning elements
CSS
4
star
93

css-filter-grayscale

CSS module for te grayscale function
CSS
4
star
94

measure

CSS
4
star
95

css-queries

CSS
4
star
96

css-background-clip

CSS module for setting background-clip
CSS
4
star
97

css-floats

Responsive CSS Module for setting floats
CSS
4
star
98

css-word-spacing

Responsive CSS module for setting word-spacing
CSS
4
star
99

css-min-width-scale

Responsive CSS module for setting min-widths
CSS
4
star
100

scale

The scale of things
CSS
4
star