Feature/add styles const (#2143)

* Added link for LICENSE.md (#2138) * Docs: Add "Setting up your editor" (#2130) Follow up on #2073 Adds a new docs page about setting up your editor. This page specifically documents creating a `jsconfig.json` to improve the editing experinace with VS Code * Nest global styles in styles directory * Scaffold styles constant * Referenced styles constant in components
react-boilerplate · Feb 27, 2018 · 5902767 · 5902767
1 parent d24dec7
commit 5902767
Show file tree

Hide file tree

Showing 21 changed files with 140 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -151,4 +151,4 @@ This project would not be possible without the support by these amazing folks. [
 ## License
 
 This project is licensed under the MIT license, Copyright (c) 2017 Maximilian
-Stoiber. For more information see `LICENSE.md`.
+Stoiber. For more information see [LICENSE.md](./LICENSE.md).
diff --git a/app/app.js b/app/app.js
@@ -41,13 +41,14 @@ import '!file-loader?name=[name].[ext]!./manifest.json';
 import 'file-loader?name=[name].[ext]!./.htaccess'; // eslint-disable-line import/extensions
 /* eslint-enable import/no-webpack-loader-syntax */
 
+// Import CSS reset and Global Styles
+import 'styles/global';
+
 import configureStore from './configureStore';
 
 // Import i18n messages
 import { translationMessages } from './i18n';
 
-// Import CSS reset and Global Styles
-import './global-styles';
 
 // Observe loading of Open Sans (to remove open sans, remove the <link> tag in
 // the index.html file and this observer)

diff --git a/app/components/A/index.js b/app/components/A/index.js
@@ -3,12 +3,13 @@
  */
 
 import styled from 'styled-components';
+import { color } from 'styles';
 
 const A = styled.a`
-  color: #41addd;
+  color: ${color.primary};
 
   &:hover {
-    color: #6cc0e5;
+    color: ${color.primary_light};
   }
 `;
 

diff --git a/app/components/Button/buttonStyles.js b/app/components/Button/buttonStyles.js
@@ -1,24 +1,25 @@
 import { css } from 'styled-components';
+import { color, size, font } from 'styles';
 
 const buttonStyles = css`
   display: inline-block;
   box-sizing: border-box;
   padding: 0.25em 2em;
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: ${size.border_radius};
   -webkit-font-smoothing: antialiased;
   -webkit-touch-callout: none;
   user-select: none;
   cursor: pointer;
   outline: 0;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: ${font.sans};
   font-weight: bold;
   font-size: 16px;
-  border: 2px solid #41addd;
-  color: #41addd;
+  border: 2px solid ${color.primary};
+  color: ${color.primary};
 
   &:active {
-    background: #41addd;
+    background: ${color.primary};
     color: #fff;
   }
 `;

diff --git a/app/components/Footer/Wrapper.js b/app/components/Footer/Wrapper.js
@@ -1,10 +1,11 @@
 import styled from 'styled-components';
+import { color } from 'styles';
 
 const Wrapper = styled.footer`
   display: flex;
   justify-content: space-between;
   padding: 3em 0;
-  border-top: 1px solid #666;
+  border-top: 1px solid ${color.gray_2};
 `;
 
 export default Wrapper;
diff --git a/app/components/Header/HeaderLink.js b/app/components/Header/HeaderLink.js
@@ -1,25 +1,26 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { color, font, size } from 'styles';
 
 export default styled(Link)`
   display: inline-flex;
   padding: 0.25em 2em;
   margin: 1em;
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: ${size.border_radius};
   -webkit-font-smoothing: antialiased;
   -webkit-touch-callout: none;
   user-select: none;
   cursor: pointer;
   outline: 0;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: ${font.sans};
   font-weight: bold;
   font-size: 16px;
-  border: 2px solid #41addd;
-  color: #41addd;
+  border: 2px solid ${color.primary};
+  color: ${color.primary};
 
   &:active {
-    background: #41addd;
+    background: ${color.primary};
     color: #fff;
   }
 `;
diff --git a/app/components/List/Wrapper.js b/app/components/List/Wrapper.js
@@ -1,11 +1,12 @@
 import styled from 'styled-components';
+import { color } from 'styles';
 
 const Wrapper = styled.div`
   padding: 0;
   margin: 0;
   width: 100%;
   background-color: white;
-  border: 1px solid #ccc;
+  border: 1px solid ${color.gray_1};
   border-radius: 3px;
   overflow: hidden;
 `;

diff --git a/app/components/ListItem/Wrapper.js b/app/components/ListItem/Wrapper.js
@@ -1,12 +1,13 @@
 import styled from 'styled-components';
+import { color } from 'styles';
 
 const Wrapper = styled.li`
   width: 100%;
   height: 3em;
   display: flex;
   align-items: center;
   position: relative;
-  border-top: 1px solid #eee;
+  border-top: 1px solid ${color.off_white};
 
   &:first-child {
     border-top: none;

diff --git a/app/components/LoadingIndicator/Circle.js b/app/components/LoadingIndicator/Circle.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { keyframes } from 'styled-components';
+import { color } from 'styles';
 
 const circleFadeDelay = keyframes`
   0%,
@@ -33,7 +34,7 @@ const Circle = (props) => {
       margin: 0 auto;
       width: 15%;
       height: 15%;
-      background-color: #999;
+      background-color: ${color.gray_1};
       border-radius: 100%;
       animation: ${circleFadeDelay} 1.2s infinite ease-in-out both;
       ${props.delay && `

diff --git a/app/containers/FeaturePage/List.js b/app/containers/FeaturePage/List.js
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import { font } from 'styles';
 
 const List = styled.ul`
-  font-family: Georgia, Times, 'Times New Roman', serif;
+  font-family: ${font.serif};
   padding-left: 1.75em;
 `;
 

diff --git a/app/containers/HomePage/Input.js b/app/containers/HomePage/Input.js
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
+import { color } from 'styles';
 
 const Input = styled.input`
   outline: none;
-  border-bottom: 1px dotted #999;
+  border-bottom: 1px dotted ${color.gray_1};
 `;
 
 export default Input;
diff --git a/app/global-styles.js → app/styles/global.js b/app/global-styles.js → app/styles/global.js
@@ -1,4 +1,5 @@
 import { injectGlobal } from 'styled-components';
+import { color, font } from 'styles';
 
 /* eslint no-unused-expressions: 0 */
 injectGlobal`
@@ -9,22 +10,22 @@ injectGlobal`
   }
 
   body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: ${font.sans_preload};
   }
 
   body.fontLoaded {
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: ${font.sans};
   }
 
   #app {
-    background-color: #fafafa;
+    background-color: ${color.white};
     min-height: 100%;
     min-width: 100%;
   }
 
   p,
   label {
-    font-family: Georgia, Times, 'Times New Roman', serif;
+    font-family: ${font.serif};
     line-height: 1.5em;
   }
 `;
diff --git a/app/styles/index.js b/app/styles/index.js
@@ -0,0 +1,33 @@
+export const breakpoint = {
+  small: '40em',
+  medium: '64em',
+  large: '75em',
+};
+
+export const color = {
+  primary: '#41addd',
+  primary_light: '#6cc0e5',
+  black: '#101010',
+  white: '#fafafa',
+  off_white: '#eee',
+  gray_1: '#999',
+  gray_2: '#666',
+
+};
+
+export const font = {
+  serif: "Georgia, Times, 'Times New Roman', serif",
+  sans: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  sans_preload: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+};
+
+export const size = {
+  border_radius: '4px',
+};
+
+export default {
+  breakpoint,
+  color,
+  font,
+  size,
+};
diff --git a/docs/general/README.md b/docs/general/README.md
@@ -10,6 +10,7 @@ ideas on what represents optimal developer experience, best practice, most
 efficient tooling and cleanest project structure.
 
 - [**CLI Commands**](commands.md)
+- [Setting up your editor](editor.md)
 - [Tool Configuration](files.md)
 - [Server Configurations](server-configs.md)
 - [Deployment](deployment.md) *(currently Heroku specific)*

diff --git a/docs/general/editor.md b/docs/general/editor.md
@@ -0,0 +1,23 @@
+# Setting Up Your Editor
+
+You can edit React Boilerplate using any editor or IDE, but there are a few extra steps that you can take to make sure your coding experience is as good as it can be.
+
+## VS Code 
+To get the best editing experience with [VS Code](https://code.visualstudio.com), create a [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) file at the root of your project:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": "app",
+    "module": "commonjs",
+    "target": "es2016",
+    "jsx": "react"
+  },
+  "exclude": [
+    "node_modules",
+    "**/node_modules/*"
+  ]
+}
+```
+
+This `jsconfig.json` file tells VS Code to treat all JS file as part of the same project, improving IntelliSense, code navigation, and refactoring. You can configure project wide settings in using the `jsconfig.json`, such as only allowing functions from the ES5 standard library, or even enable [more advanced type checking for JS files](https://code.visualstudio.com/docs/languages/javascript#_type-checking-and-quick-fixes-for-javascript-files)
diff --git a/docs/general/faq.md b/docs/general/faq.md
@@ -244,13 +244,13 @@ const MyStyledComponent = styled.div`
 
 **2) Import the CSS in the `<head>` of your `index.html` manually**
 
-This is a good choice if you are having issues with third-party styles and `global-styles.js`
+This is a good choice if you are having issues with third-party styles and `styles/global.js`
 ```javascript
 // Import bootstrap style (e.g. move this into the <head> of index.html)
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 // Import CSS reset and Global Styles
-import './global-styles';
+import 'styles/global';
 ```
 
 More information is available in the [official documents](https://github.com/styled-components/styled-components/blob/master/docs/existing-css.md).

diff --git a/internals/scripts/clean.js b/internals/scripts/clean.js
@@ -35,9 +35,11 @@ shell.mv('internals/templates/translations', 'app');
 shell.rm('-rf', 'app/utils');
 shell.mv('internals/templates/utils', 'app');
 
+// Handle styles/
+shell.cp('internals/templates/styles', 'app/styles');
+
 // Replace the files in the root app/ folder
 shell.cp('internals/templates/app.js', 'app/app.js');
-shell.cp('internals/templates/global-styles.js', 'app/global-styles.js');
 shell.cp('internals/templates/i18n.js', 'app/i18n.js');
 shell.cp('internals/templates/index.html', 'app/index.html');
 shell.cp('internals/templates/reducers.js', 'app/reducers.js');

diff --git a/internals/templates/app.js b/internals/templates/app.js
@@ -37,13 +37,14 @@ import '!file-loader?name=[name].[ext]!./manifest.json';
 import 'file-loader?name=[name].[ext]!./.htaccess';
 /* eslint-enable import/no-unresolved, import/extensions */
 
+// Import CSS reset and Global Styles
+import 'styles/global';
+
 import configureStore from './configureStore';
 
 // Import i18n messages
 import { translationMessages } from './i18n';
 
-// Import CSS reset and Global Styles
-import './global-styles';
 
 // Create redux store with history
 const initialState = {};

diff --git a/internals/templates/global-styles.js → internals/templates/styles/global.js b/internals/templates/global-styles.js → internals/templates/styles/global.js
@@ -1,4 +1,5 @@
 import { injectGlobal } from 'styled-components';
+import { color, font } from 'styles';
 
 /* eslint no-unused-expressions: 0 */
 injectGlobal`
@@ -9,22 +10,22 @@ injectGlobal`
   }
 
   body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: ${font.sans_preload};
   }
 
   body.fontLoaded {
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: ${font.sans};
   }
 
   #app {
-    background-color: #fafafa;
+    background-color: ${color.white};
     min-height: 100%;
     min-width: 100%;
   }
 
   p,
   label {
-    font-family: Georgia, Times, 'Times New Roman', serif;
+    font-family: ${font.serif};
     line-height: 1.5em;
   }
 `;
diff --git a/internals/templates/styles/index.js b/internals/templates/styles/index.js
@@ -0,0 +1,33 @@
+export const breakpoint = {
+  small: '40em',
+  medium: '64em',
+  large: '75em',
+};
+
+export const color = {
+  primary: '#41addd',
+  primary_light: '#6cc0e5',
+  black: '#101010',
+  white: '#fafafa',
+  off_white: '#eee',
+  gray_1: '#999',
+  gray_2: '#666',
+
+};
+
+export const font = {
+  serif: "Georgia, Times, 'Times New Roman', serif",
+  sans: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  sans_preload: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+};
+
+export const size = {
+  border_radius: '4px',
+};
+
+export default {
+  breakpoint,
+  color,
+  font,
+  size,
+};