Commit efd59553 authored by Camille Bissuel's avatar Camille Bissuel

initial setup

parent 0fe280b1
The MIT License (MIT)
Copyright (c) 2014 Camille Bissuel
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.
Your website's license should go here
\ No newline at end of file
# [HTML5 Boilerplate](http://html5boilerplate.com/) skeleton for [DocPad](https://github.com/bevry/docpad)
Bare essentials for building a modern website with best practices
## Why the fork?
This fork adds [Grunt](http://gruntjs.com/) to show an example of taking the HTMLBP and minifying and concatenating all the JS and CSS assets into single files and including those in the layout.
## What is different?
### `grunt-config.json`
- This file is contains the object passed to `grunt.initConfig` in `grunt.js`. It has been put into its own file since it is used in `docpad.coffee` to build file lists for inclusion in the layout and deleting unused files.
### `grunt.js`
- This is the Grunt file. It runs `initConfig` with the `grunt-config.json` object. It also registers a `default` task with all the keys from the config file.
### `docpad.coffee`
- I added the helper functions [`getGruntedStyles`]() and [`getGruntedScripts`](). These functions will return all the compiled assets that contain `.min.(css|js)` with the correct base path.
- A [`writeAfter`]() DocPad event. It is based on [this gist](https://gist.github.com/3898915), with some additional functionality. It will run the `default` grunt command. Then it will use your `grunt-config.json` to delete the `src` files since they are no longer needed. It will also delete any empty directories in the 'out/' directory.
### `layouts/default.html.eco`
- The script and style blocks have been replaced with calls to the helper functions described above.
## Getting Started
1. [Install DocPad](https://github.com/bevry/docpad)
1. Clone the project and run the server
``` bash
git clone git://github.com/lukekarrys/html5-boilerplate.docpad.git
cd html5-boilerplate.docpad
npm install
docpad run
```
1. [Open http://localhost:9778/](http://localhost:9778/)
1. Start hacking away by modifying the `src` directory
Nylnook website
===============
Code for the website at nylnook.com, based on [DocPad](https://github.com/bevry/docpad) and the [HTML5 Boilerplate with grunt skeleton](https://github.com/lukekarrys/html5-boilerplate.docpad).
## License
The code is licensed under [MIT License](http://creativecommons.org/licenses/MIT/)
Images are licensed under various [Creative Commons License](http://creativecommons.org/), see each image for details
This skeleton is made ["public domain"](http://en.wikipedia.org/wiki/Public_domain) using the [Creative Commons Zero](http://creativecommons.org/publicdomain/zero/1.0/), as such before you publish your website you should place your desired license here and within the `LICENSE.md` file.
If you are wanting to open-source your website, we suggest using the [Creative Commons Attribution License](http://creativecommons.org/licenses/by/3.0/) for content and the [MIT License](http://creativecommons.org/licenses/MIT/) for code. In which case you'd probably want to use the following as your license:
Unless stated otherwise, all content is licensed under the [Creative Commons Attribution License](http://creativecommons.org/licenses/by/3.0/) and code licensed under the [MIT License](http://creativecommons.org/licenses/MIT/), © [Your Name](http://your.website)
If you are wanting to close-source your website, we'd suggest using the following:
Copyright [Your Name](http://your.website). All rights reserved.
## To do
this code is really young, website is under construction !
Other included things such as themes and libraries are likely already licensed by their own invidual licenses, so be sure to respect their licenses too.
- Multilingual with Transifex
- RSS
- search engine
- Creative common metas
- camanjs integration
- ...
Thanks, the DocPad team loves you.
\ No newline at end of file
# The DocPad Configuration File
# http://docpad.org/docs/config
# It is simply a CoffeeScript Object which is parsed by CSON
docpadConfig = {
......@@ -12,27 +13,27 @@ docpadConfig = {
# Specify some site properties
site:
# The production url of our website
url: "http://website.com"
url: "http://nylnook.com"
# Here are some old site urls that you would like to redirect from
oldUrls: [
'www.website.com',
'website.herokuapp.com'
'www.nylnook.com'
]
# The default title of our website
title: "Your Website"
title: "nylnook"
# The website description (for SEO)
description: """
When your website appears in search results in say Google, the text here will be shown underneath your website's title.
Free illustration and creative wallpapers to share, adapt and reuse freely in the best quality.
"""
# The website keywords (for SEO) separated by commas
keywords: """
place, your, website, keywoards, here, keep, them, related, to, the, content, of, your, website
wallpaper, wallpapers, HD, FHD, 4K, 8K, illustration, free, open source, creative commons, source, creative, share, adapt, reuse, quality
"""
# The website author
author: "Camille Bissuel"
# -----------------------------
# Helper Functions
......@@ -79,6 +80,12 @@ docpadConfig = {
return value.indexOf('.min.js') > -1
_.map scripts, (value) ->
return value.replace 'out', ''
# =================================
# Collections
collections:
pages: ->
@getCollection("html").findAllLive({isPage:true}, [{filename:1}])
# =================================
......@@ -137,4 +144,4 @@ docpadConfig = {
}
# Export our DocPad Configuration
module.exports = docpadConfig
\ No newline at end of file
module.exports = docpadConfig
{
"min": {
"js": {
"src": ["out/vendor/jquery.js", "out/vendor/log.js", "out/vendor/modernizr.js", "out/scripts/script.js"],
"src": ["out/vendor/log.js", "out/vendor/modernizr.js", "out/scripts/scripts.js"],
"dest": "out/scripts/all.min.js"
}
},
"concat": {
"css": {
"src": ["out/vendor/normalize.css","out/styles/style.css"],
"src": ["out/vendor/normalize.css","out/styles/styles.css"],
"dest": "out/styles/all.css"
}
},
......@@ -17,4 +17,4 @@
"dest": "out/styles/all.min.css"
}
}
}
\ No newline at end of file
}
{
"name": "html5-boilerplate-frontend.docpad",
"name": "nylnook-website",
"version": "0.1.0",
"private": true,
"description": "HTML5 Boilerplate skeleton for DocPad. Bare essentials for building a modern website with best practices. Adds frontend plugins asset compilation.",
"homepage": "https://github.com/lukekarrys/html5-boilerplate.docpad",
"description": "DocPad project for nylnook.com",
"homepage": "http://www.nylnook.com",
"keywords": [
"docpad-skeleton",
"nylnook",
"docpad",
"website",
"skeleton",
"html5 boilerplate",
"h5bp",
"grunt"
],
"author": "Bevry Pty Ltd <us@bevry.me> (http://bevry.me)",
"maintainers": [
"Luke Karrys (http://lukekarrys.com)"
],
"contributors": [
"Benjamin Lupton <b@lupton.cc> (http://balupton.com)",
"Luke Karrys (http://lukekarrys.com)"
],
"author": "Camille Bissuel <welcome@nylnook.com> (http://www.nylnook.com)",
"bugs": {
"url": "https://github.com/lukekarrys/html5-boilerplate.docpad/issues"
"url": "https://github.com/nylnook/nylnook-website/issues"
},
"repository" : {
"type" : "git",
"url" : "http://github.com/lukekarrys/html5-boilerplate.docpad.git"
"url" : "https://github.com/nylnook/nylnook-website"
},
"engines" : {
"node": "0.8.x",
"npm": "1.1.x"
"node": "0.10.x",
"npm": "1.3.x"
},
"dependencies": {
"docpad": "6.x",
......@@ -43,10 +32,11 @@
"grunt": "~0.3.17",
"grunt-css": "~0.3.2",
"bal-util": "~1.15.3",
"underscore": "~1.4.3"
"underscore": "~1.4.3",
"nib": "~1.0.2"
},
"devDependencies": {
"docpad-plugin-livereload": "2.x"
},
"main": "node_modules/docpad/bin/docpad-server"
}
\ No newline at end of file
}
---
layout: 'default'
title: 'What now?'
title: 'Welcome'
---
## Not sure what to do now? Here's some useful links:
## Website under construction
Thanks for your patience
![Under construction](/website-img/courtcircuit.gif)
- [DocPad Wiki](https://github.com/bevry/docpad/wiki)
- [Getting Started Guide](https://github.com/bevry/docpad/wiki/Getting-Started)
- [Beginner Guide](https://github.com/bevry/docpad/wiki/Beginner-Guide)
- [IRC Chat Room](irc://irc.freenode.net/docpad)
\ No newline at end of file
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*! Nylnok Stylus styles based on HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
// ====================================
// Imports nib (CSS3 features for Stylus)
// Nib
@import 'nib'
// ====================================
// Base styles: opinionated defaults
html, button, input, select, textarea
color: #222
html
font-size: 1em
line-height: 1.4
// Remove text-shadow in selection highlight: h5bp.com/i
// These selection rule sets have to be separate.
// Customize the background color to match your design.
::-moz-selection
background: #80999e
text-shadow: none
::selection
background: #80999e
text-shadow: none
// A better looking default horizontal rule
hr
display: block
height: 1px
border: 0
border-top: 1px solid #ccc
margin: 1em 0
padding: 0
// Remove the gap between images, videos, audio and canvas and the bottom of
// their containers: h5bp.com/i/440
audio, canvas, img, video
vertical-align: middle
// Remove default fieldset styles.
fieldset
border: 0
margin: 0
padding: 0
// Allow only vertical resizing of textareas.
textarea
resize: vertical;
// ====================================
// Browse Happy prompt
.browsehappy
margin: 0.2em 0
background: #ccc
color: #000
padding: 0.2em 0
// ====================================
// Styles for Nylnook.com
// ====================================
// Include paddings inside our width for everything
*
box-sizing border-box
// Variables
site-width = 70%
site-margin = ((100% - site-width) / 2)
body
margin-top: 1%
margin-left: site-margin
margin-right: site-margin
text-align: center
transition: margin 0.3s ease-out
// ====================================
// Helper classes
// ====================================
// Image replacement
.ir
background-color: transparent
border: 0
overflow: hidden
.ir:before
content: ""
display: block
width: 0
height: 150%
// ====================================
// Hide from both screenreaders and browsers: h5bp.com/u
.hidden
display: none !important
visibility: hidden
// ====================================
// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
padding: 0
position: absolute
width: 1px
// ====================================
// Extends the .visuallyhidden class to allow the element to be focusable
// when navigated to via the keyboard: h5bp.com/p
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus
clip: auto
height: auto
margin: 0
overflow: visible
position: static
width: auto
// ====================================
// Hide visually and from screenreaders, but maintain layout
.invisible
visibility: hidden
// ====================================
// Style adjustments for high resolution devices
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
// ====================================
// Print styles.
// Inlined to avoid required HTTP connection: h5bp.com/r
@media print
*
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
a
a:visited
text-decoration: underline;
a[href]:after
content: " (" attr(href) ")";
abbr[title]:after