From 517067cb0880be920f526530f2a66e2f1765d748 Mon Sep 17 00:00:00 2001 From: Callum Locke Date: Tue, 17 Nov 2015 14:02:39 +0000 Subject: [PATCH] project-starter-kit --- .babelrc | 3 + .bowerrc | 9 ++ .editorconfig | 11 ++ .eslintignore | 3 + .eslintrc | 11 ++ .gitattributes | 1 + .gitignore | 5 + .scss-lint.yml | 267 ++++++++++++++++++++++++++++++++++++++ .travis.yml | 6 + Gemfile | 3 + Gemfile.lock | 14 ++ bower.json | 11 ++ client/index.html | 115 ++++++++++++++++ client/scripts/main.js | 12 ++ client/scripts/top.js | 38 ++++++ client/styles/_fonts.scss | 49 +++++++ client/styles/main.scss | 29 +++++ client/styles/top.css | 4 + gulpfile.babel.js | 236 +++++++++++++++++++++++++++++++++ package.json | 51 ++++++++ 20 files changed, 878 insertions(+) create mode 100755 .babelrc create mode 100755 .bowerrc create mode 100755 .editorconfig create mode 100755 .eslintignore create mode 100755 .eslintrc create mode 100755 .gitattributes create mode 100755 .gitignore create mode 100755 .scss-lint.yml create mode 100755 .travis.yml create mode 100755 Gemfile create mode 100755 Gemfile.lock create mode 100755 bower.json create mode 100755 client/index.html create mode 100755 client/scripts/main.js create mode 100755 client/scripts/top.js create mode 100755 client/styles/_fonts.scss create mode 100755 client/styles/main.scss create mode 100755 client/styles/top.css create mode 100755 gulpfile.babel.js create mode 100755 package.json diff --git a/.babelrc b/.babelrc new file mode 100755 index 0000000..73b3169 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": "es2015" +} diff --git a/.bowerrc b/.bowerrc new file mode 100755 index 0000000..adc3e4b --- /dev/null +++ b/.bowerrc @@ -0,0 +1,9 @@ +{ + "directory": "bower_components", + "registry": { + "search": [ + "http://registry.origami.ft.com", + "https://bower.herokuapp.com" + ] + } +} diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..e95d07a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true +charset = utf-8 + +[**{.js,.scss,.html,.mustache,.md}] +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true diff --git a/.eslintignore b/.eslintignore new file mode 100755 index 0000000..a47e853 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +bower_components +dist +.tmp diff --git a/.eslintrc b/.eslintrc new file mode 100755 index 0000000..6b115be --- /dev/null +++ b/.eslintrc @@ -0,0 +1,11 @@ +extends: xo +env: + browser: true + node: true +ecmaFeatures: + modules: true +rules: + indent: [2, 2] + curly: 0 + comma-dangle: 0 + no-inline-comments: 0 diff --git a/.gitattributes b/.gitattributes new file mode 100755 index 0000000..176a458 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..656dd18 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +/node_modules/ +/bower_components/ +/dist/ +/.tmp/ +/.sass-cache/ diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100755 index 0000000..40d2283 --- /dev/null +++ b/.scss-lint.yml @@ -0,0 +1,267 @@ +linters: + + # Documentation: + # https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md + + # "value !important;" not "value!important ;" + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + severity: error + + # "border: 0" not "border: none" + BorderZero: + enabled: true + severity: error + convention: zero + + # Allow colors to be used outside of variables + ColorVariable: + enabled: false + + # "#00ff00" not "green" + # (AB: Causes problems with o-colors < 3, because o-colors uses + # color names that are also valid CSS color strings) + ColorKeyword: + enabled: false + + # // not /**/ + Comment: + enabled: false + + # Disallow "@debug" + DebugStatement: + enabled: true + severity: error + + # @extend must come first, then properties, then nested rulesets + DeclarationOrder: + enabled: true + + # Warn when the same property appears more than once in the same ruleset + # This is not a deal breaker, as authors may repeat properties + # in the case where both a value and its fallback are needed + DuplicateProperty: + enabled: true + + # "} else {" not "}\n else {" + ElsePlacement: + enabled: true + style: same_line # or 'new_line' + + # Require an empty line between rulesets + EmptyLineBetweenBlocks: + enabled: false + + # Disallow empty rulesets + EmptyRule: + enabled: false + + # Require a newline at the end of the file + FinalNewline: + enabled: true + present: true + + # #aabbcc good, #abc bad. Makes the codebase more searchable + HexLength: + enabled: true + style: long + severity: error + + # Require hex colors to be lowercase (if they include any of the letters a-f) + HexNotation: + enabled: true + style: lowercase + + # Hex colors must be actual colors (ie not #ab or #00mm00) + HexValidation: + enabled: true + + # Disallow using ID Selectors + IdSelector: + enabled: true + + # "@import 'path/to/partial'" not "@import 'path/to/_partial.scss'" + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + # Avoid using !important + ImportantRule: + enabled: true + + # Disable indentation liting since it's done via another task + Indentation: + enabled: false + allow_non_nested_indentation: false + + # 0.1 not .1 + # (differs from Guardian) + LeadingZero: + enabled: true + style: include_zero + severity: error + + # Disallow more than one ruleset with the same selector in the same file + MergeableSelector: + enabled: false + + # Allow camelcase but forbid non-alphanumeric characters + # in mixin, variable and function names. + NameFormat: + enabled: true + convention: '^[a-z_][a-zA-Z0-9_\-]+$' + severity: error + + # Thou shall nest 3 levels deep maximum. Not 4, nor 5. + # See SelectorDepth for control over the actually maximum authorized depth + NestingDepth: + enabled: true + max_depth: 3 + + # @extend %placeholders, don't @extend .a-class + PlaceholderInExtend: + enabled: true + severity: error + + # Allow any number of properties in a ruleset + PropertyCount: + enabled: false + + # Require properties to be in alphabetical order + # (also possible to specify a specific order) + # (AB: Alpha seems a bit weird. Rhys had a tool to do this, + # maybe we should set the order here and use this tool) + PropertySortOrder: + enabled: false + order: [] + separate_groups: false + + # Disallow unknown CSS property names + PropertySpelling: + enabled: true + extra_properties: + - text-size-adjust + + # ".class, [foo]" not "span.class, div[foo]" + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + severity: error + + # Limit selector depth + # We decided to deal with this via peer review in + # https://github.com/Financial-Times/ft-origami/issues/243 + SelectorDepth: + enabled: true + max_depth: 3 + + # Allow lowercase only, but forbid non-alphanumeric characters + # in selector names. + SelectorFormat: + enabled: true + convention: '^[a-z0-9_\-]+$' + severity: error + + # margin: 1px not margin: 1px 1px 1px 1px; + Shorthand: + enabled: true + severity: error + + # Disallow properties on the same line "margin: 0; padding: 0;" + SingleLinePerProperty: + enabled: true + # enable simple rules to be on a single line "el { margin: 0; }" + allow_single_line_rule_sets: true + severity: error + + # Rulesets with multiple (comma delimited) selectors + # must have each selector on a separate line + SingleLinePerSelector: + enabled: true + severity: error + + # rgb(0, 0, 0) not rgb(0,0,0) + SpaceAfterComma: + enabled: true + severity: error + + # margin: 0px not margin:0px + SpaceAfterPropertyColon: + enabled: true + style: one_space + severity: error + + # margin: 0px not margin : 0px + # (AB: clearly this should be called NoSpaceAfterPropertyName) + SpaceAfterPropertyName: + enabled: true + severity: error + + # .thing { not .thing{ + SpaceBeforeBrace: + enabled: true + style: space + allow_single_line_padding: false + severity: error + + # rgb(0, 0, 0) not rgb( 0, 0, 0 ) + SpaceBetweenParens: + enabled: true + spaces: 0 + severity: error + + # Use single quotes, not double quotes + # (AB: This really doesn't matter IMHO) + # Differs from guardian + StringQuotes: + enabled: false + + # Every property value must end with a semicolon + TrailingSemicolon: + enabled: true + severity: error + + # "margin: .5em;" not "margin: .500em;" + TrailingZero: + enabled: true + + # No unnecessary fractions: 1 not 1.0 + UnnecessaryMantissa: + enabled: true + severity: error + + # Disable this rule to allow parent references such as "& + * {}" + UnnecessaryParentReference: + enabled: false + + # URLs must not contain domain names + # (AB: We may want to use build service or responsive image proxy) + UrlFormat: + enabled: false + + # url("example.com") not url(example.com) + UrlQuotes: + enabled: false + + # Allow any property to have literal values + VariableForProperty: + enabled: false + + # Allow vendor prefixes + # (…by disabling the linter that forbids vendor prefixes) + # But: ideally products should use autoprefixer or equivalent, + # since we might eventually enable this linter. + VendorPrefixes: + enabled: true + severity: warning + + # No units on zero values: 0 not 0px + # (AB: it can be useful to express what unit you want + # something to be in if its value is ever adjusted away from zero) + ZeroUnit: + enabled: false diff --git a/.travis.yml b/.travis.yml new file mode 100755 index 0000000..ef18c2e --- /dev/null +++ b/.travis.yml @@ -0,0 +1,6 @@ +language: node_js +node_js: + - '4' + - 'stable' +before_install: 'bundle && npm install --global bower && bower install' +before_script: 'scss-lint client/**/*.scss' diff --git a/Gemfile b/Gemfile new file mode 100755 index 0000000..db13486 --- /dev/null +++ b/Gemfile @@ -0,0 +1,3 @@ +source 'https://rubygems.org' + +gem 'scss-lint' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100755 index 0000000..7faadfb --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,14 @@ +GEM + remote: https://rubygems.org/ + specs: + rainbow (2.0.0) + sass (3.4.15) + scss-lint (0.38.0) + rainbow (~> 2.0) + sass (~> 3.4.1) + +PLATFORMS + ruby + +DEPENDENCIES + scss-lint diff --git a/bower.json b/bower.json new file mode 100755 index 0000000..e88a80c --- /dev/null +++ b/bower.json @@ -0,0 +1,11 @@ +{ + "name": "origami-product-boilerplate", + "private": true, + "dependencies": { + "normalize.css": "~3.0.3", + "o-colors": ">=2.5.0 <4", + "o-hoverable": "~1.1.0", + "o-fonts": "~1.6.4", + "o-footer": "~4.0.0" + } +} diff --git a/client/index.html b/client/index.html new file mode 100755 index 0000000..40bfe57 --- /dev/null +++ b/client/index.html @@ -0,0 +1,115 @@ + + + + + + + + + + + + FT.com + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ +
+

Content goes here

+
+ + + + + + + + diff --git a/client/scripts/main.js b/client/scripts/main.js new file mode 100755 index 0000000..3e87f68 --- /dev/null +++ b/client/scripts/main.js @@ -0,0 +1,12 @@ +import oHoverable from 'o-hoverable'; +import attachFastClick from 'fastclick'; + +document.addEventListener('DOMContentLoaded', () => { + // make hover effects work on touch devices + oHoverable.init(); + + // remove the 300ms tap delay on mobile browsers + attachFastClick(document.body); + + // YOUR CODE HERE! +}); diff --git a/client/scripts/top.js b/client/scripts/top.js new file mode 100755 index 0000000..8bc7a01 --- /dev/null +++ b/client/scripts/top.js @@ -0,0 +1,38 @@ +/* eslint-disable */ + +// global addScript function +function addScript(src, async, defer) { + if (!async && !defer) { + document.write('