NKD

NKD is a lightweight Jekyll starter template for responsive HTML5/SCSS prototypes, created by Adam Morse (mrmrs) and released under the MIT license.

What is NKD?

NKD is a minimal Jekyll boilerplate that gives you a commented SCSS base, a mobile-friendly type scale, and two media queries for tablet and desktop, so you can start prototyping without setting up a Jekyll project from scratch. It takes the standard Jekyll structure — layouts, includes, Sass partials, and one example post — and produces a static site whose compiled CSS comes in at 1.8KB minified and 214B gzipped, including Normalize.css. The project is authored by designer/developer Adam Morse (mrmrs) and is distributed under the MIT License.

Key Features

• Modular SCSS structure — Six partials under _sass (_variables.scss, _normalize.scss, _grid.scss, _queries.scss, _type.scss, _styles.scss) are imported by nkd.scss and compiled to css/nkd.css.
• Tiny CSS output — The compiled stylesheet is 1.8KB minified and 214B gzipped, and it already includes Normalize.css so you don't need a separate reset.
• Responsive type scale — Includes a mobile-friendly type scale and two configurable media queries (tablet and desktop) that lend themselves to mobile-first design.
• Commented codebase — The files are thoroughly commented, making it easier for first-time Jekyll users to understand what each piece does.
• Batteries-not-included file structure — Ships with default.html and post.html layouts, includes for footer/head/navigation/JS, a favicon.ico, touch icons, and an example post, but deliberately avoids extra plugins or frameworks.
• Automated setup with Gulp — Running npm install && npm start after cloning triggers Gulp tasks; repository metadata lists PostCSS and Browsersync as part of the project toolchain.
• Favicon resources — Includes an Adobe Illustrator file with artboards for every favicon size, plus premade PNG/ICNS icons you are expected to replace.

Who is it for?

• Front-end developers starting a Jekyll prototype — clone the repository and run npm install && npm start to get a local static site without manual setup.
• First-time Jekyll users — read the heavily commented files and the included example post to learn Jekyll's layout, include, and Sass conventions.
• Designers who want a minimal CSS foundation — use the built-in type scale and tablet/desktop media queries as a starting point and extend the SCSS partials with their own variables.

What can you do with NKD?

• Prototype a responsive static site — clone the template, run the two setup commands, and edit the index.html plus SCSS partials to see changes in the browser.
• Publish a Jekyll blog or portfolio — use the included _layouts/post.html and the example post in _posts as a model for adding new posts.
• Generate a full set of favicons — open the supplied Illustrator file, export each artboard, and replace the premade icons in the project root.

How does NKD work?

To start, create a new GitHub repository, then clone the template into it with git clone [email protected]:mrmrs/nkd.git yourNewRepoName. Run npm install && npm start to install dependencies and fire up Gulp. If you want to make it your own project, remove the .git folder, run git init, add your remote, then commit and push with git push -u origin master.

Pricing

NKD is free and open source under the MIT License, so you can use, modify, and redistribute it without licensing fees.

FAQ

Is NKD free?

Yes. NKD is released under the MIT License, which permits commercial use, modification, distribution, and private use. The only requirement is that the original copyright notice is included in substantial portions of the software.

Does NKD use a CSS framework like Bootstrap?

No. NKD starts with Normalize.css and a set of custom SCSS partials. It does not depend on Bootstrap, Tailwind, or any other CSS framework, which keeps the compiled CSS at 1.8KB minified.

What does NKD include out of the box?

The template includes two layouts (default and post), four includes, six Sass partials, a Gulpfile, package.json, an example post, and a set of favicon and touch-icon files. It also includes an Adobe Illustrator file with artboards for every favicon size.

How do I replace the premade favicons?

The page says the included premade favicons "you will want to replace or remove reference to." Use the included Adobe Illustrator file, which has artboards for every favicon size you'll need, then export and overwrite the PNG, ICO, and ICNS files in the project root.