Skip to content

Commit 62f357c

Browse files
author
Nick Hess
committed
add style variables file add eslint files for react and vue
1 parent 8b1f625 commit 62f357c

File tree

4 files changed

+252
-41
lines changed

4 files changed

+252
-41
lines changed

‎README.md

+70-41
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,105 @@
11
# Big Spaceship Coding Standards
2+
23
Coding standards for the Big Spaceship Technology Team
34

45
## General Practice
5-
* Soft Tabs (2 spaces)
6+
7+
- Soft Tabs (2 spaces)
8+
- Comments
9+
10+
### HTML
11+
12+
- Alt tags on all images
13+
14+
### CSS/SCSS
15+
16+
- SCSS preferred
17+
- 3 level nesting limit
18+
- Custom SCSS variables file (media queries and color pallete)
19+
- Autoprefixer
20+
- Make use of mixins for repeated styles across components
21+
22+
### Javascript
23+
24+
- AirBnb EsLint
625

726
## Project Setup
8-
* Use BSS-CLI Tool
9-
* Create a GitHub Repo with Big Spaceship Team Admin Access
27+
28+
- Use BSS-CLI Tool
29+
- Create a GitHub Repo with Big Spaceship Team Admin Access
1030

1131
## Code Formatting
12-
* Prettier
13-
* Custom Media Queries
32+
33+
- Prettier
34+
- Custom Media Queries
1435

1536
## Git Workflow
16-
* Git Flow as a Reliable Version Control Model
37+
38+
- Git Flow as a Reliable Version Control Model
1739

1840
Please try to use the standard Git Flow control model in which we use a combination of the following branches:
1941

20-
| | |
21-
|----------------|-------------------------------|
22-
|Master |Only contains production ready code. Commits to this branch should only come from either a release or a hotfix branch.|
23-
|Develop |One source of truth from which all feature branches should be created and checked out from.|
24-
|Feature |Follows a standard naming convention of `feature/featureName`. All new development is built here.|
25-
|Release |Branch that gets deployed to a staging environment for QA, and where all QA fixes should be done. If the team is bigger, a feature branch can be spun off this to make all required QA changes.|
26-
|Hotfix |Only emergency fixes off the master branch. Follows a similar naming convention as a feature branch. After it is done please make sure to merge it both into master and develop.|
42+
| | |
43+
| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
44+
| Master | Only contains production ready code. Commits to this branch should only come from either a release or a hotfix branch. |
45+
| Develop | One source of truth from which all feature branches should be created and checked out from. |
46+
| Feature | Follows a standard naming convention of `feature/featureName`. All new development is built here. |
47+
| Release | Branch that gets deployed to a staging environment for QA, and where all QA fixes should be done. If the team is bigger, a feature branch can be spun off this to make all required QA changes. |
48+
| Hotfix | Only emergency fixes off the master branch. Follows a similar naming convention as a feature branch. After it is done please make sure to merge it both into master and develop. |
2749

2850
Bellow if a quick flow model:
2951

3052
![gitflow](https://user-images.githubusercontent.com/5499946/37505531-d1dd396c-28bb-11e8-921d-1124af180b3f.png)
3153

3254
Please remember to remove feature and hotfix branches either after a PR or after push to Prod.
3355

34-
* [Feature Branch Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows#feature-branch-workflow)
35-
* [Commit Message Guidelines](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53)
36-
* Pull Requests for each feature to be merged reviewed by other members of the team.
37-
* Git versioning:
38-
* We should attempt to follow the Semver versioning rules when tagging our projects for release.
39-
* When using the BSS CLI tool or starting a new NPM project please make sure to set the version in package.json to 3 digits (1.0.0).
40-
41-
| Status | Stage | Rule | Example |
42-
| -- | -- | -- | -- |
43-
| Init Release | New Project | Should begin with ver 1 | 1.0.0 |
44-
| Bug fixes, minor changes | Patch release | +1 to the third digit | 1.0.1 |
45-
| Major changes that are build on the existing framework/codebase | Minor release | +1 to the second digit | 1.1.1 |
46-
| Major changes that require rebuilding existing features, change or major updates to the underlaying frameworks | Major release | +1 to the first digit | 2.1.1 |
47-
48-
* Also please keep in mind to make sure that the release versions in github and package.json are in sync.
56+
- [Feature Branch Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows#feature-branch-workflow)
57+
- [Commit Message Guidelines](https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53)
58+
- Pull Requests for each feature to be merged reviewed by other members of the team.
59+
- Git versioning:
60+
61+
- We should attempt to follow the Semver versioning rules when tagging our projects for release.
62+
- When using the BSS CLI tool or starting a new NPM project please make sure to set the version in package.json to 3 digits (1.0.0).
63+
64+
| Status | Stage | Rule | Example |
65+
| -------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------- | ------- |
66+
| Init Release | New Project | Should begin with ver 1 | 1.0.0 |
67+
| Bug fixes, minor changes | Patch release | +1 to the third digit | 1.0.1 |
68+
| Major changes that are build on the existing framework/codebase | Minor release | +1 to the second digit | 1.1.1 |
69+
| Major changes that require rebuilding existing features, change or major updates to the underlaying frameworks | Major release | +1 to the first digit | 2.1.1 |
70+
71+
- Also please keep in mind to make sure that the release versions in github and package.json are in sync.
4972

5073
## Linting
51-
* [AirBnB EsLint](https://github.com/bigspaceship/javascript)
74+
75+
- [AirBnB EsLint](https://github.com/bigspaceship/javascript)
5276

5377
## Testing
54-
* [Jest](https://facebook.github.io/jest/)
78+
79+
- [Jest](https://facebook.github.io/jest/)
5580

5681
## Permissable Libraries
57-
* [Vue](https://vuejs.org/)
58-
* [React](https://reactjs.org/)
59-
* [Next.js](https://github.com/zeit/next.js/)
82+
83+
- [Vue](https://vuejs.org/)
84+
- [React](https://reactjs.org/)
85+
- [Next.js](https://github.com/zeit/next.js/)
6086

6187
## Recommended Tools
62-
* [Webpack](https://webpack.js.org/)
63-
* [Babel](https://babeljs.io/)
88+
89+
- [Webpack](https://webpack.js.org/)
90+
- [Babel](https://babeljs.io/)
6491

6592
## Files to Include in all projects
66-
* Custom Media Query file
67-
* .prettierrc
68-
* .babelrc
69-
* .eslintrc
93+
94+
- variables.scss
95+
- .babelrc
96+
- .eslintrc
7097

7198
## Deployment Practice
72-
* Use environment variables for api secrets and tokens
73-
* Minify and Uglify code and build process
99+
100+
- Use environment variables for api secrets and tokens
101+
- Minify and Uglify code and build process
74102

75103
## How to improve this document
104+
76105
Please Create an Issue relating to which section of this document you would like altered and what you would like altered within the section. We can discuss potential changes within the issue and once agreed upon a Pull Request can be made.

‎linting-formatting/react/eslintrc.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
module.exports = {
2+
parser: 'babel-eslint',
3+
parserOptions: {
4+
ecmaVersion: 2016,
5+
sourceType: 'module',
6+
ecmaFeatures: {
7+
jsx: true,
8+
},
9+
},
10+
extends: ['airbnb', 'prettier'],
11+
plugins: ['prettier'],
12+
rules: {
13+
'import/no-named-as-default': 0,
14+
'no-nested-ternary': 0,
15+
'jsx-a11y/anchor-is-valid': 0,
16+
'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
17+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
18+
'react/jsx-filename-extension': [
19+
1,
20+
{
21+
extensions: ['.js', '.jsx'],
22+
},
23+
],
24+
'react/react-in-jsx-scope': 0,
25+
'react/jsx-one-expression-per-line': 0,
26+
'prettier/prettier': [
27+
'error',
28+
{
29+
semi: true,
30+
trailingComma: 'es5',
31+
singleQuote: true,
32+
printWidth: 100,
33+
},
34+
],
35+
},
36+
env: {
37+
es6: true,
38+
browser: true,
39+
node: true,
40+
},
41+
settings: {
42+
'import/core-modules': ['styled-jsx', 'styled-jsx/css'],
43+
},
44+
};

‎linting-formatting/vue/eslintrc.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
module.exports = {
2+
root: true,
3+
parser: 'babel-eslint',
4+
parserOptions: {
5+
sourceType: 'module',
6+
},
7+
env: {
8+
browser: true,
9+
es6: true,
10+
},
11+
extends: ['airbnb-base', 'prettier'],
12+
// required to lint *.vue files
13+
plugins: ['html', 'prettier'],
14+
// add your custom rules here
15+
rules: {
16+
'import/no-unresolved': 0,
17+
'no-param-reassign': 0,
18+
'arrow-body-style': 0,
19+
'no-plusplus': 0,
20+
'no-lonely-if': 0,
21+
'no-prototype-builtins': 0,
22+
'prefer-default-export': 0,
23+
// allow debugger during development
24+
'no-debugger': process.env.NODE_ENV !== 'development' ? 2 : 0,
25+
'prettier/prettier': [
26+
'warn',
27+
{
28+
semi: true,
29+
trailingComma: 'es5',
30+
singleQuote: true,
31+
printWidth: 100,
32+
bracketSpacing: true,
33+
},
34+
],
35+
},
36+
globals: {
37+
Waypoint: true,
38+
twttr: true,
39+
instgrm: true,
40+
},
41+
};

‎styles/variables.scss

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// COLOR PALETTE: Example from Big Spaceship dot com repo
2+
// Primaries
3+
$scarlet: #ea4235;
4+
$slate: #393f42;
5+
$white: #ffffff;
6+
7+
// Secondaries
8+
$pizza: #f0792a;
9+
$blonde: #ead335;
10+
$pool: #35b9ea;
11+
$mega: #3582ea;
12+
13+
// Tertiaries
14+
$light-scarlet: #f5a19a;
15+
$dark-scarlet: #91403c;
16+
$light-pizza: #f7bc94;
17+
$dark-pizza: #945c36;
18+
$light-blonde: #f4e99a;
19+
$dark-blonde: #91893c;
20+
$light-pool: #91dcf4;
21+
$dark-pool: #377c96;
22+
$light-mega: #9ac0f4;
23+
$dark-mega: #376096;
24+
25+
// Neutrals
26+
$shadow: #9c9fa0;
27+
$smoke: #e6e7e7;
28+
29+
// MEDIA QUERY RELATED ISH
30+
// Here we define the breakpoints which will become the upper border for each media size.
31+
$small-breakpoint: 640px !default;
32+
$medium-breakpoint: 1024px !default;
33+
$large-breakpoint: 1440px !default;
34+
$xlarge-breakpoint: 1920px !default;
35+
36+
@function lower-bound($range) {
37+
@if length($range) <= 0 {
38+
@return 0;
39+
}
40+
@return nth($range, 1);
41+
}
42+
43+
@function upper-bound($range) {
44+
@if length($range) < 2 {
45+
@return 999999999999;
46+
}
47+
@return nth($range, 2);
48+
}
49+
50+
// Here we define the lower and upper bounds for each media size
51+
$small-range: (0, $small-breakpoint) !default; /* 0, 640px */
52+
$medium-range: ($small-breakpoint + 1px, $medium-breakpoint) !default; /* 641px, 1024px */
53+
$large-range: ($medium-breakpoint + 1px, $large-breakpoint) !default; /* 1025px, 1440px */
54+
$xlarge-range: ($large-breakpoint + 1px, $xlarge-breakpoint) !default; /* 1441px, 1920px */
55+
$xxlarge-range: ($xlarge-breakpoint + 1px, 9999999px) !default; /* 1921px, ... */
56+
57+
// Media Queries
58+
$screen: 'only screen' !default;
59+
60+
$landscape: '#{$screen} and (orientation: landscape)' !default;
61+
$portrait: '#{$screen} and (orientation: portrait)' !default;
62+
63+
$small-up: $screen !default;
64+
$small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})' !default;
65+
$small-up-height: $screen !default;
66+
$small-only-height: '#{$screen} and (max-height: #{upper-bound($small-range)})' !default;
67+
68+
$medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})' !default;
69+
$medium-down: '#{$screen} and (max-width:#{upper-bound($medium-range)})' !default;
70+
$medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})' !default;
71+
$medium-up-height: '#{$screen} and (min-height:#{lower-bound($medium-range)})' !default;
72+
$medium-down-height: '#{$screen} and (max-height:#{upper-bound($medium-range)})' !default;
73+
$medium-only-height: '#{$screen} and (min-height:#{lower-bound($medium-range)}) and (max-height:#{upper-bound($medium-range)})' !default;
74+
75+
$large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})' !default;
76+
$large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})' !default;
77+
$large-up-height: '#{$screen} and (min-height:#{lower-bound($large-range)})' !default;
78+
$large-only-height: '#{$screen} and (min-height:#{lower-bound($large-range)}) and (max-height:#{upper-bound($large-range)})' !default;
79+
80+
$xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})' !default;
81+
$xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})' !default;
82+
$xlarge-up-height: '#{$screen} and (min-height:#{lower-bound($xlarge-range)})' !default;
83+
$xlarge-only-height: '#{$screen} and (min-height:#{lower-bound($xlarge-range)}) and (max-height:#{upper-bound($xlarge-range)})' !default;
84+
85+
$xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})' !default;
86+
$xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})' !default;
87+
$xxlarge-up-height: '#{$screen} and (min-height:#{lower-bound($xxlarge-range)})' !default;
88+
$xxlarge-only-height: '#{$screen} and (min-height:#{lower-bound($xxlarge-range)}) and (max-height:#{upper-bound($xxlarge-range)})' !default;
89+
90+
$retina: (
91+
'#{$screen} and (-webkit-min-device-pixel-ratio: 2)',
92+
'#{$screen} and (min--moz-device-pixel-ratio: 2)',
93+
'#{$screen} and (-o-min-device-pixel-ratio: 2/1)',
94+
'#{$screen} and (min-device-pixel-ratio: 2)',
95+
'#{$screen} and (min-resolution: 192dpi)',
96+
'#{$screen} and (min-resolution: 2dppx)'
97+
);

0 commit comments

Comments
 (0)