finalized starting point

- use Jekyll for now
- build process through gulp
- dependencies through npm & bundle
- scss: variables, grid, fonts, first components
- js setup
This commit is contained in:
Matthias Kretschmann 2015-12-20 05:22:45 +01:00
parent 93d3bf97bd
commit 7cad1ec40a
24 changed files with 1355 additions and 11 deletions

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# EditorConfig is awesome: http://EditorConfig.org
[*]
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
charset = utf-8
trim_trailing_whitespace = true
[*.json]
indent_size = 2

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
node_modules
Gemfile.lock
.jekyll-metadata
_dist

9
Gemfile Normal file
View File

@ -0,0 +1,9 @@
source "https://rubygems.org"
group :jekyll do
gem 'jekyll'
end
group :development do
gem 'redcarpet'
end

View File

@ -4,4 +4,34 @@
## Development
You need to have the following tools installed on your development machine before moving on:
- [node.js](http://nodejs.org/) & [npm](https://npmjs.org/)
- [Ruby](https://www.ruby-lang.org) (for sanity, install with [rvm](https://rvm.io/))
- [Bundler](http://bundler.io/)
### Install dependencies
Run the following command from the repository's root folder to install all dependencies.
```bash
npm i && bundle install
```
### Development build
Spin up local dev server and livereloading watch task, reachable under [https://localhost:1337](https://localhost:1337):
```bash
gulp
```
## Deployment
### Production build
The following builds the site and runs a bunch of optimizations over everything, like assets optimizations, revisioning, CDN url injection etc.
```bash
gulp build --production
```

37
_config.yml Normal file
View File

@ -0,0 +1,37 @@
# The Basics
# --------------------
name: Bigchain
description:
url: http://www.bigchain.io
email:
contact: contact@bigchain.io
twitter: bigchain
facebook: bigchain
# Track all the things
# --------------------
analyticsID:
# Urls
# --------------------
permalink: /:title/
# Content Parsing
# --------------------
markdown: redcarpet
redcarpet:
extensions: ['autolink', 'smart', 'hard_wrap', 'with_toc_data']
# Generator
# --------------------
source: ./_src
destination: ./_dist

3
_src/404.md Normal file
View File

@ -0,0 +1,3 @@
---
layout: base
---

View File

@ -0,0 +1,12 @@
//=include ../../../node_modules/svg4everybody/dist/svg4everybody.js
//=include ../../../node_modules/jquery/dist/jquery.js
jQuery(function($) {
//
// init modules
//
});

View File

@ -5,7 +5,7 @@
//
// Normalize all the things
@import '../../../node_modules/normalize-css/normalize.css';
@import '../../../node_modules/normalize-css/normalize';
@import '../../../node_modules/normalize-opentype.css/normalize-opentype.scss';
// Variables & Mixins
@ -13,9 +13,13 @@
@import 'bigchain/_mixins';
// Components
@import 'bigchain/_fonts';
@import 'bigchain/_typography';
@import 'bigchain/_grid';
@import 'bigchain/_sections';
// Content types
@import 'bigchain/content-page';
//@import 'bigchain/content-page';
// specific page styles
@import 'page-front';

View File

@ -0,0 +1,9 @@
@font-face{
font-family: 'Fira Sans';
src: local('Fira Sans Light'),
url('/assets/fonts/FiraSans-Light.woff2') format('woff2'),
url('/assets/fonts/FiraSans-Light.woff') format('woff'),
url('/assets/fonts/FiraSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

View File

@ -0,0 +1,245 @@
//
// Grid
// --------------
// bigchain.io
//
// adapted from github.com/kremalicious/kremalicious3/blob/master/_src/_assets/styl/grid.styl
//
//
// More sane box model
//
*,
*:before,
*:after {
box-sizing: border-box;
}
//
// Base
//
.grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.grid__col {
flex: 1;
// Firefox grid fix for whatever reason
min-height: 0;
min-width: 0;
}
.row {
max-width: 50em;
margin: auto;
padding-left: $gutter-space;
padding-right: $gutter-space;
}
//
// Alignment per row
//
.grid--top {
align-items: flex-start
}
.grid--bottom {
align-items: flex-end
}
.grid--center {
align-items: center
}
.grid--justifycenter {
justify-content: center
}
//
// Alignment per cell
//
.grid__col--top {
align-self: flex-start
}
.grid__col--bottom {
align-self: flex-end
}
.grid__col--center {
align-self: center
}
//
// Gutters
//
.grid--gutters{
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;;
}
}
@media ($screen-sm) {
.grid-small--gutters {
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;
}
}
}
@media ($screen-md) {
.grid-medium--gutters {
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;
}
}
}
@media ($screen-lg) {
.grid-large--gutters {
margin: -($gutter-space) 0 $gutter-space (-($gutter-space));
> .grid__col {
padding: $gutter-space 0 0 $gutter-space;
}
}
}
//
// Columns
//
.grid--fit {
> .grid__col { flex: 1; }
}
.grid--full {
> .grid__col { flex: 0 0 100%; }
}
.grid--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid--2of6,
.grid--third {
> .grid__col { flex: 0 0 33%; }
}
.grid--3of6,
.grid--half {
> .grid__col { flex: 0 0 50%; }
}
.grid--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
@media ($screen-sm) {
.grid-small--fit {
> .grid__col { flex: 1; }
}
.grid-small--full{
> .grid__col { flex: 0 0 100%; }
}
.grid-small--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-small--2of6,
.grid-small--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-small--3of6,
.grid-small--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-small--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-small--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}
@media ($screen-md) {
.grid-medium--fit {
> .grid__col { flex: 1 }
}
.grid-medium--full {
> .grid__col { flex: 0 0 100%; }
}
.grid-medium--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-medium--2of6,
.grid-medium--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-medium--3of6,
.grid-medium--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-medium--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-medium--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}
@media ($screen-lg) {
.grid-large--fit {
> .grid__col { flex: 1; }
}
.grid-large--full {
> .grid__col { flex: 0 0 100%; }
}
.grid-large--1of6 {
> .grid__col { flex: 0 0 16.5%; }
}
.grid-large--2of6,
.grid-large--third {
> .grid__col { flex: 0 0 33%; }
}
.grid-large--3of6,
.grid-large--half {
> .grid__col { flex: 0 0 50%; }
}
.grid-large--4of6 {
> .grid__col { flex: 0 0 66%; }
}
.grid-large--5of6 {
> .grid__col { flex: 0 0 82.5%; }
}
}

View File

@ -0,0 +1,74 @@
.section {
padding-top: ($line-height-computed * 2);
padding-bottom: ($line-height-computed * 2);
// use this so animated elements coming in from outside of screen
// don't affect layout
overflow: hidden;
@media ($screen-sm) {
padding-top: ($line-height-computed * 3);
padding-bottom: ($line-height-computed * 3);
}
}
.section-title,
.section-description {
@media ($screen-sm) {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.section-title {
font-size: $font-size-h3;
margin-top: 0;
margin-bottom: $line-height-computed;
@media ($screen-sm) {
font-size: $font-size-h2;
}
}
.section-description {
color: $text-color;
margin-bottom: 0;
+ .section-description {
margin-top: $line-height-computed;
}
}
.section-actions {
margin-top: $line-height-computed;
.btn {
margin-left: 5px;
margin-right: 5px;
min-width: 200px;
}
}
//
// Section backgrounds
//
.background--blue {
background: $brand-main-blue;
* { color: #fff }
}
.background--black {
background: $brand-main-black;
* { color: #fff }
}
.background--gray-dark {
background: $gray-dark;
* { color: #fff }
}

View File

@ -0,0 +1,246 @@
//
// Typography
// ---
// bigchain.io
//
// Body reset
html {
font-size: $font-size-root;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $text-color;
background-color: $body-bg;
text-rendering: optimizeLegibility;
// Controversial! But prevents text flickering in
// Safari/Firefox when animations are running
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: 'liga', 'kern';
// remove old style numerals
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
//
// Links
//
a {
color: $link-color;
text-decoration: none;
&:hover,
&:focus {
color: $link-hover-color;
text-decoration: underline;
}
&:active {}
}
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
// remove old style numerals
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: ($line-height-computed * 2);
margin-bottom: $line-height-computed;
}
h4, .h4,
h5, .h5,
h6, .h6 {
color: $gray;
margin-top: $line-height-computed;
margin-bottom: ($line-height-computed / 2);
}
h1, .h1 { font-size: $font-size-h1; }
h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; }
h5, .h5 { font-size: $font-size-h5; }
h6, .h6 { font-size: $font-size-h6; }
//
// Body text
//
p {
margin: 0 0 ($line-height-computed / 2);
}
//
// Emphasis & misc
//
small,
.small {
font-size: floor((100% * $font-size-small / $font-size-base));
font-weight: $font-weight-normal;
}
.mini {
font-size: floor((100% * $font-size-mini / $font-size-base));
font-weight: $font-weight-normal;
}
.large {
font-size: floor((100% * $font-size-large / $font-size-base));
}
strong,
.strong,
.bold {
font-weight: $font-weight-normal;
}
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
// Transformation
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
//
// Lists
//
// Unordered and Ordered lists
ul,
ol {
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
padding-left: ($line-height-computed * 2);
li {
margin-bottom: ($line-height-computed / 2);
padding-left: ($line-height-computed / 2);
}
ul,
ol {
margin-bottom: 0;
}
}
ul {
li { list-style-type: circle; }
}
// List options
@mixin list-unstyled {
padding-left: 0;
margin: 0;
li {
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
}
.list-unstyled {
@include list-unstyled;
}
// Inline turns list items into inline-block
.list-inline {
@include list-unstyled;
margin-left: -5px;
> li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
}
//
// Blockquotes
//
blockquote {
border-left: 3px solid $gray-lighter;
margin-left: 0;
margin-top: $line-height-computed;
margin-bottom: $line-height-computed;
padding: ($line-height-computed/2) $line-height-computed;
color: $gray;
font-style: italic;
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
}
cite {
@extend .bold, .small;
font-style: italic;
}
// Addresses
address {
margin-bottom: $line-height-computed;
font-style: normal;
line-height: $line-height-base;
}
//
// Trademark symbol
//
.trademark {
top: -.45em;
left: -.15em;
margin-right: -.2em; // reduce kerning
opacity: .6;
font-family: inherit;
font-size: 60%;
}
//
// Text selection
//
::-moz-selection { color: #fff; background: $brand-main-blue; }
::selection { color: #fff; background: $brand-main-blue; }

View File

@ -11,23 +11,38 @@ $brand-main-blue: #003C69;
$brand-main-black: #000000;
$brand-main-white: #FFFFFF;
$gray-dark: #373a3c !default;
$gray: #55595c !default;
$gray-light: #818a91 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$brand-primary: $brand-main-blue !default;
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
//
// Typography
//
$font-family-fira: 'fira-sans-light', sans-serif !default;
$font-family-fira: 'Fira Sans', sans-serif !default;
$font-family-avenir: 'Avenir', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-avenir !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-weight-base: $font-weight-light !default;
$font-family-base: $font-family-avenir !default;
$font-size-base: 16px !default;
$font-size-large: ceil(($font-size-base * 1.15)) !default;
$font-size-small: ceil(($font-size-base * 0.85)) !default;
$font-size-mini: ceil(($font-size-base * 0.65)) !default;
$font-size-root: 16px !default;
$font-size-base: 1rem !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default;
$font-size-small: ceil(($font-size-base * 0.875)) !default;
$font-size-mini: ceil(($font-size-base * 0.75)) !default;
$font-size-h1: floor(($font-size-base * 2.6)) !default;
$font-size-h2: floor(($font-size-base * 2.25)) !default;
@ -40,7 +55,7 @@ $line-height-base: 1.4 !default;
$line-height-computed: floor(($font-size-base * $line-height-base)) !default;
$headings-font-family: $font-family-fira !default;
$headings-font-weight: $font-weight-normal !default;
$headings-font-weight: $font-weight-light !default;
$headings-line-height: 1.2 !default;
$headings-color: $brand-main-blue !default;
@ -53,3 +68,21 @@ $text-color: $brand-main-black !default;
$link-color: $brand-main-blue !default;
$link-hover-color: darken($link-color, 15%) !default;
//
// Grid
//
$gutter-space: 4% !default;
//
// Responsive breakpoints
//
$screen-sm-min: 30em !default;
$screen-md-min: 40.625em !default;
$screen-lg-min: 87.500em !default;
$screen-sm: 'min-width: #{$screen-sm-min}';
$screen-md: 'min-width: #{$screen-md-min}';
$screen-lg: 'min-width: #{$screen-lg-min}';

View File

67
_src/_includes/head.html Normal file
View File

@ -0,0 +1,67 @@
<head>
<meta charset="utf-8">
<!-- Dynamic meta title -->
<title>
{% if paginator.previous_page %}
Page {{ paginator.page }} &#124; {{ site.name }}
{% elsif page.title %}
{{ page.title }} &#124; {{ site.name }}
{% else %}
{{ site.name }} &#124; {{ site.description }}
{% endif %}
</title>
<!-- Dynamic meta description -->
{% if page.description %}
<meta name="description" content="{{ page.description }}">
{% elsif page.front_page %}
<meta name="description" content="{{ site.description }}">
{% else %}
<meta name="description" content="{{ page.excerpt | strip_html | strip_newlines }}" />
{% endif %}
<!-- Mobile meta stuff -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- CSS -->
<link rel="stylesheet" href="/assets/css/bigchain.min.css">
<!-- Canonical URL -->
<link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html','' }}">
<!-- Apple -->
<meta name="apple-mobile-web-app-title" content="{{ site.name }}">
<!-- Touch Icons -->
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed-120x120.png" sizes="120x120">
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed-152x152.png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed-180x180.png" sizes="180x180">
<link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
<link rel="mask-icon" href="/assets/img/favicon-mask.svg" color="#003C69">
<!-- Win 8/8.1 -->
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/TileImage-144x144.png"/>
<meta name="msapplication-TileColor" content="#003C69"/>
<!-- Android Lollipop theme color -->
<meta name="theme-color" content="#003C69">
<!-- OpenGraph -->
{% include opengraph.html %}
<!-- Twitter Cards -->
{% include twittercards.html %}
<!-- Prevent search indexing for some pages -->
{% if page.sitemap == false %}
<meta name="robots" content="noindex">
{% endif %}
</head>

View File

@ -0,0 +1,36 @@
<meta content="website" property="og:type">
<meta content="{{ site.name }}" property="og:site_name">
{% if page.title %}
<meta content="{{ page.title }} &#124; {{ site.name }}" property="og:title">
{% else %}
<meta content="{{ site.name }} &#124; {{ site.description }}" property="og:title">
{% endif %}
{% if page.description %}
<meta content="{{ page.description }}" property="og:description">
{% elsif page.front_page %}
<meta content="{{ site.description }}" property="og:description">
{% else %}
<meta content="{{ page.excerpt | strip_html | strip_newlines }}" property="og:description">
{% endif %}
{% if page.url %}
<meta content="{{ site.url}}{{ page.url | replace:'index.html','' }}" property="og:url">
{% endif %}
{% if page.date %}
<meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time">
{% endif %}
{% if page.image %}
<meta content="{{ site.url }}/assets/img/{{ page.image }}" property="og:image">
{% else %}
<meta content="{{ site.url }}/assets/img/share-image.png" property="og:image">
{% endif %}
{% if page.categories %}
{% for category in page.categories limit:1 %}
<meta content="{{ category }}" property="article:section">
{% endfor %}
{% endif %}

View File

@ -0,0 +1,68 @@
<!--
//
// Site scripts
//
-->
<script src="/assets/js/bigchain.min.js"></script>
{% if page.js %}
<script src="/assets/js/{{ page.js }}"></script>
{% endif %}
<!--
svg4everybody.js
-->
<script>svg4everybody();</script>
<!--
//
// Google Analytics
//
-->
<script>
(function(window) {
// Google Analytics async snippet
// http://goo.gl/3FPNDx
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date;
// Create the GA tracker
ga('create', '{{ site.analyticsID }}', 'auto', {siteSpeedSampleRate: 10});
{% if jekyll.environment != 'production' %}
// In non-production mode, simply log GA hits to the console.
// Note, tasks must be set before sending the first hit
ga(function(tracker) {
tracker.set('sendHitTask', function() {
// Throw to stop subsequent tasks.
throw 'Abort tracking in non-production environments.'
});
});
{% endif %}
// Send initial pageview
ga('send', 'pageview');
// Track uncaught errors
window.onerror = function(message, url, line, col) {
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
+ col + ')';
ga('send', 'exception', {
exDescription: 'window.onerror: ' + desc,
exFatal: false
});
};
}(window));
</script>
{% if jekyll.environment == "production" %}
<script async src="//www.google-analytics.com/analytics.js"></script>
{% else %}
<script async src="//www.google-analytics.com/analytics_debug.js"></script>
{% endif%}

View File

@ -0,0 +1,25 @@
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ site.twitter }}">
<meta name="twitter:creator" content="@{{ site.twitter }}">
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }} &#124; {{ site.name }}">
{% else %}
<meta name="twitter:title" content="{{ site.name }} &#124; {{ site.description }}">
{% endif %}
{% if page.url %}
<meta name="twitter:url" content="{{ site.url}}{{ page.url | replace:'index.html','' }}">
{% endif %}
{% if page.description %}
<meta name="twitter:description" content="{{ page.description }}">
{% else %}
<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">
{% endif %}
{% if page.image %}
<meta name="twitter:image:src" content="{{ site.url }}/assets/img/{{ page.image }}">
{% else %}
<meta name="twitter:image:src" content="{{ site.url }}/assets/img/share-image.png">
{% endif %}

28
_src/_layouts/base.html Normal file
View File

@ -0,0 +1,28 @@
<!doctype html>
<html lang="en">
{% include head.html %}
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
<body class="page-{{ id | remove:'-' }}" role="document">
<!--[if lt IE 9]>
<div class="browsehappy alert alert-warning">
<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true" target="_blank">activate Google Chrome Frame</a> to improve your experience.</p>
</div>
<![endif]-->
<section role="main" class="main">
{{ content }}
</section>
{% include footer.html %}
{% include scripts.html %}
</body>
</html>

32
_src/index.html Normal file
View File

@ -0,0 +1,32 @@
---
layout: base
front_page: true
---
<section class="section">
<div class="row">
<h1 class="section-title">Bigchain is coming</h1>
<div class="section-description">
<div class="grid grid--gutters">
<p class="grid__col">100,000 transactions per second and climbing</p>
<p class="grid__col">Petabyte Capacity</p>
<p class="grid__col">Open Source</p>
</div>
</div>
</div>
</section>
<section class="section background--black">
<div class="row">
<h1 class="section-title">Whitepaper</h1>
<p class="section-description">Coming soon</p>
</div>
</section>
<section class="section background--blue">
<div class="row">
<h1 class="section-title">Early Access</h1>
<p class="section-description">For early access and inquiries, enter your contact information below</p>
</div>
</section>

2
docs/README.md Normal file
View File

@ -0,0 +1,2 @@
- [CSS](css.md)

21
docs/css.md Normal file
View File

@ -0,0 +1,21 @@
CSS
------------------
### Vendor Prefixes
Just write the official, unprefixed syntax for all CSS 3 features, no need to write the vendor prefixed versions.
[Autoprefixer](https://github.com/postcss/autoprefixer) handles that for you automatically based on the browser versions defined in the task and data from [Can I Use](http://caniuse.com/).
SVG sprite
------------------
All icons and most assets are SVGs. A gulp task grabs all svg files from the `img/` folder and puts them as `<symbol>` into one SVG sprite file. Reference those icons with the SVG `<use>` element and their ID in the HTML where you want them to be:
```html
<svg class="logo" aria-labelledby="title">
<title>Logo</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
```

316
gulpfile.js Normal file
View File

@ -0,0 +1,316 @@
'use strict';
// load plugins
var $ = require('gulp-load-plugins')();
// manually require modules that won"t get picked up by gulp-load-plugins
var gulp = require('gulp'),
del = require('del'),
pkg = require('./package.json'),
browser = require('browser-sync');
// Temporary solution until gulp 4
// https://github.com/gulpjs/gulp/issues/355
var runSequence = require('run-sequence');
// handle errors
var onError = function(error) {
$.util.log('');
$.util.log($.util.colors.red('You fucked up:', error.message, 'on line' , error.lineNumber));
$.util.log('');
this.emit('end');
}
// 'development' is just default, production overrides are triggered
// by adding the production flag to the gulp command e.g. `gulp build --production`
var isProduction = ($.util.env.production === true ? true : false);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Terminal Banner
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
console.log("");
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"));
console.log($.util.colors.cyan(" ┌─┐┌─┐┌─┐┬─┐┬┌┐ ┌─┐"));
console.log($.util.colors.cyan(" ├─┤└─┐│ ├┬┘│├┴┐├┤ "));
console.log($.util.colors.cyan(" ┴ ┴└─┘└─┘┴└─┴└─┘└─┘"));
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"));
console.log("");
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Config
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Port to use for the development server
var PORT = 1337;
// Browsers to target when prefixing CSS
var COMPATIBILITY = ['Chrome >= 30', 'Safari >= 6.1', 'Firefox >= 35', 'Opera >= 32', 'iOS >= 8', 'Android >= 4', 'ie >= 10'];
// paths
var SRC = '_src/',
DIST = '_dist/';
// SVG sprite
var SPRITECONFIG = {
dest: DIST + 'assets/img/',
mode: {
symbol: {
dest: './',
sprite: 'sprite.svg'
}
}
}
// code banner
var BANNER = [
'/**',
' ** <%= pkg.name %> v<%= pkg.version %>',
' ** <%= pkg.description %>',
' ** <%= pkg.homepage %>',
' **',
' ** <%= pkg.author.name %> <<%= pkg.author.email %>>',
' **',
' ** ',
' ** <%= pkg.repository.url %> ',
' **/',
''
].join('\n');
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Tasks
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//
// Delete build artifacts
//
gulp.task('clean', function(done) {
return del([
DIST + '**/*',
DIST + '.*' // delete all hidden files
], done);
});
//
// Jekyll
//
gulp.task('jekyll', function(cb) {
browser.notify('Compiling Jekyll');
var spawn = require('child_process').spawn;
if (isProduction) {
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' });
} else {
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--incremental', '--drafts', '--future'], { stdio: 'inherit' });
}
jekyll.on('exit', function(code) {
cb(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code);
});
});
//
// HTML
//
gulp.task('html', function() {
return gulp.src(DIST + '/**/*.html')
.pipe($.if(isProduction, $.htmlmin({
collapseWhitespace: true,
conservativeCollapse: true,
removeComments: true,
useShortDoctype: true,
collapseBooleanAttributes: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
minifyJS: true,
minifyCSS: true
})))
.pipe(gulp.dest(DIST));
});
//
// Styles
//
gulp.task('css', function() {
return gulp.src(SRC + '_assets/styles/bigchain.scss')
.pipe($.sourcemaps.init())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.autoprefixer({ browsers: COMPATIBILITY }))
.pipe($.if(isProduction, $.cssmin()))
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(DIST + 'assets/css/'))
.pipe(browser.stream());
});
//
// JavaScript
//
gulp.task('js', function() {
return gulp.src([
SRC + '_assets/javascripts/bigchain.js',
SRC + '_assets/javascripts/page-*.js'
])
.pipe($.sourcemaps.init())
.pipe($.include())
.pipe($.if(isProduction, $.uglify())).on('error', onError)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest(DIST + 'assets/js/'));
});
//
// SVG sprite
//
gulp.task('svg', function() {
return gulp.src(SRC + '_assets/images/**/*.svg')
.pipe($.if(isProduction, $.imagemin({
svgoPlugins: [{
removeRasterImages: true
}]
})))
.pipe($.svgSprite(SPRITECONFIG))
.pipe(gulp.dest(DIST + 'assets/img/'));
});
//
// Copy Images
//
gulp.task('images', function() {
return gulp.src(SRC + '_assets/images/**/*')
.pipe($.if(isProduction, $.imagemin({
optimizationLevel: 5, // png
progressive: true, // jpg
interlaced: true, // gif
multipass: true, // svg
svgoPlugins: [{ removeViewBox: false }]
})))
.pipe(gulp.dest(DIST + 'assets/img/'));
});
//
// Copy Fonts
//
gulp.task('fonts', function() {
return gulp.src([
'./node_modules/fira/**/FiraSans-Light.*'
])
.pipe($.rename({dirname: ''}))
.pipe(gulp.dest(DIST + 'assets/fonts/'));
});
//
// Revision static assets
//
gulp.task('rev', function() {
// globbing is slow so do everything conditionally for faster dev build
if (isProduction) {
return gulp.src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
.pipe($.rev())
.pipe(gulp.dest(DIST + '/assets/'))
// output rev manifest for next replace task
.pipe($.rev.manifest())
.pipe(gulp.dest(DIST + '/assets/'));
}
});
//
// Replace all links to assets in files
// from a manifest file
//
gulp.task('rev:replace', function() {
// globbing is slow so do everything conditionally for faster dev build
if (isProduction) {
var manifest = gulp.src(DIST + '/assets/rev-manifest.json');
return gulp.src(DIST + '/**/*.{html,xml,txt,json,css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
.pipe($.revReplace({ manifest: manifest }))
.pipe(gulp.dest(DIST));
}
});
//
// CDN url injection
//
gulp.task('cdn', function() {
return gulp.src([DIST + '/**/*.html', DIST + '/assets/css/*.css'], { base: DIST })
.pipe($.replace('/assets/css/', CDN + '/assets/css/'))
.pipe($.replace('/assets/js/', CDN + '/assets/js/'))
.pipe($.replace('/assets/img/', CDN + '/assets/img/'))
.pipe($.replace('../', CDN + '/assets/'))
.pipe(gulp.dest(DIST));
});
//
// Dev Server
//
gulp.task('server', ['build'], function() {
browser.init({
server: DIST,
port: PORT,
reloadDebounce: 2000
});
});
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Task sequences
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//
// Build site, run server, and watch for file changes
//
gulp.task('default', ['build', 'server'], function() {
gulp.watch([SRC + '_assets/styles/**/*.scss'], ['css']);
gulp.watch([SRC + '_assets/javascripts/**/*.js'], ['js', browser.reload]);
gulp.watch([SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}'], ['images', browser.reload]);
gulp.watch([SRC + '_assets/images/**/*.{svg}'], ['svg', browser.reload]);
gulp.watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './_config.yml', SRC + '_includes/svg/*'], ['build', browser.reload]);
});
//
// Full build
//
// `gulp build` is the development build
// `gulp build --production` is the production build
//
gulp.task('build', function(done) {
$.util.log($.util.colors.gray(" ------------------------------------------"));
$.util.log($.util.colors.green(' Building ' + ($.util.env.production ? 'production' : 'dev') + ' version...'));
$.util.log($.util.colors.gray(" ------------------------------------------"));
runSequence(
'clean',
'jekyll',
['html', 'css', 'js', 'images', 'fonts', 'svg'],
'rev',
'rev:replace',
done
);
});
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Deployment
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

View File

@ -9,11 +9,41 @@
"homepage": "http://www.bigchain.io",
"license": "(c) 2015 ascribe - All Rights Reserved",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"dependencies": {
"normalize-opentype.css": "^0.2.4",
"normalize-css": ">=2.3.1",
"normalize-opentype.css": ">=0.2.4",
"jquery": "^2.1.4",
"parsleyjs": "^2.0.7",
"svg4everybody": "^2.0.0",
"fira": "mozilla/Fira"
},
"devDependencies": {
"browser-sync": ">=2.10.0",
"del": "^2.0.2",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.1",
"gulp-concat": "^2.6.0",
"gulp-cssmin": "^0.1.7",
"gulp-header": "^1.7.1",
"gulp-htmlmin": "^1.1.4",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.3.0",
"gulp-include": "^2.0.2",
"gulp-load-plugins": "^0.10.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-rev": "^6.0.1",
"gulp-rev-replace": "^0.4.2",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.6.0",
"gulp-svg-sprite": "^1.2.9",
"gulp-uglify": "^1.4.1",
"gulp-util": "^3.0.6",
"run-sequence": "^1.1.2"
},
"engines": {
"node": ">=0.10.29"