├── .storybook ├── preview-head.html ├── addons.js └── config.js ├── public ├── favicon.ico ├── manifest.json └── index.html ├── src ├── index.css ├── images │ ├── fpo-120x60.png │ ├── fpo-500x300.png │ └── fpo-1200x650.png ├── css │ ├── scss │ │ ├── abstracts │ │ │ ├── _mixins.scss │ │ │ └── _variables.scss │ │ ├── base │ │ │ ├── _main.scss │ │ │ ├── _buttons.scss │ │ │ ├── _media.scss │ │ │ ├── _lists.scss │ │ │ ├── _table.scss │ │ │ ├── _body.scss │ │ │ ├── _links.scss │ │ │ ├── _reset.scss │ │ │ ├── _headings.scss │ │ │ ├── _text.scss │ │ │ └── _forms.scss │ │ ├── components │ │ │ ├── _icon.scss │ │ │ ├── _card.scss │ │ │ ├── _logo.scss │ │ │ ├── _card-list.scss │ │ │ ├── _footer.scss │ │ │ ├── _header.scss │ │ │ ├── _page-header.scss │ │ │ ├── _inline-form.scss │ │ │ ├── _buttons.scss │ │ │ ├── _field.scss │ │ │ ├── _primary-nav.scss │ │ │ ├── _section.scss │ │ │ ├── _hero.scss │ │ │ └── _text-passage.scss │ │ ├── utilities │ │ │ └── _visibility.scss │ │ └── layout │ │ │ └── _layout.scss │ ├── style.scss │ ├── style.css.map │ └── style.css ├── data │ └── globals.json ├── index.js ├── App.test.js ├── components │ ├── TextPassage │ │ ├── TextPassage.js │ │ └── TextPassage.stories.js │ ├── Header │ │ ├── Header.stories.js │ │ └── Header.js │ ├── Footer │ │ ├── Footer.stories.js │ │ └── Footer.js │ ├── Logo │ │ ├── Logo.js │ │ └── Logo.stories.js │ ├── Button │ │ ├── Button.stories.js │ │ └── Button.js │ ├── InlineForm │ │ ├── InlineForm.stories.js │ │ └── InlineForm.js │ ├── Hero │ │ ├── Hero.stories.js │ │ └── Hero.js │ ├── Section │ │ ├── Section.stories.js │ │ └── Section.js │ ├── Card │ │ ├── Card.stories.js │ │ └── Card.js │ ├── PrimaryNav │ │ ├── PrimaryNav.js │ │ └── PrimaryNav.stories.js │ └── CardList │ │ ├── CardList.js │ │ └── CardLIst.stories.js └── App.js ├── .gitignore ├── package.json └── README.md /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradfrost/dumb-react-sass/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/images/fpo-120x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradfrost/dumb-react-sass/HEAD/src/images/fpo-120x60.png -------------------------------------------------------------------------------- /src/images/fpo-500x300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradfrost/dumb-react-sass/HEAD/src/images/fpo-500x300.png -------------------------------------------------------------------------------- /src/images/fpo-1200x650.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradfrost/dumb-react-sass/HEAD/src/images/fpo-1200x650.png -------------------------------------------------------------------------------- /src/css/scss/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #MIXINS 3 | \*------------------------------------*/ 4 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | import '@storybook/addon-knobs/register'; 4 | -------------------------------------------------------------------------------- /src/data/globals.json: -------------------------------------------------------------------------------- 1 | { 2 | "company" : { 3 | "name" : "Company Name", 4 | "url" : "http://companyname.com", 5 | "phone" : "555-555-5555" 6 | } 7 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /src/css/scss/base/_main.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #MAIN ELEMENT 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Main element 7 | */ 8 | [role=main] { 9 | display: block; 10 | padding: 1rem; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/scss/components/_icon.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #ICON 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) Small image that represents functionality 7 | */ 8 | .c-icon { 9 | height: 16px; 10 | width: 16px; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/scss/base/_buttons.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #BUTTONS 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Button and submit inputs reset 7 | * 1) These should be styled using c-btn 8 | */ 9 | button { 10 | cursor: pointer; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 |     #CARD 3 | \*------------------------------------*/ 4 | 5 | .c-card { 6 | border: 1px solid #808080; 7 | padding: 1rem; 8 | } 9 | 10 | .c-card--dark { 11 | background: #000; 12 | color: #fff; 13 | } -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | import '../src/css/style.css'; 3 | 4 | const req = require.context("../src/components", true, /.stories.js$/); 5 | function loadStories() { 6 | req.keys().forEach(filename => req(filename)); 7 | } 8 | 9 | configure(loadStories, module); -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/css/scss/base/_media.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #MEDIA 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Responsive image styling 7 | * 1) Allows for images to flex with varying screen size 8 | */ 9 | img { 10 | max-width: 100%; 11 | height: auto; 12 | } 13 | -------------------------------------------------------------------------------- /src/css/scss/base/_lists.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #LISTS 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) List base styles 7 | */ 8 | 9 | /** 10 | * Remove list styles from unordered and ordered lists 11 | */ 12 | ol, ul { 13 | list-style: none; 14 | } 15 | -------------------------------------------------------------------------------- /src/css/scss/components/_logo.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #LOGO 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Branding image or text of the site 7 | */ 8 | .c-logo { 9 | display: inline; 10 | } 11 | 12 | /** 13 | * Logo image 14 | */ 15 | .c-logo__img { 16 | display: block; 17 | } 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/components/TextPassage/TextPassage.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export class TextPassage extends Component { 5 | render() { 6 | return ( 7 |
8 | { this.props.children } 9 |
10 | ); 11 | } 12 | } 13 | 14 | TextPassage.propTypes = { 15 | children: PropTypes.node 16 | } -------------------------------------------------------------------------------- /src/css/scss/components/_card-list.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 |     #CARD LIST 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) A collection of cards displayed as a list or grid 7 | */ 8 | .c-card-list { 9 | margin: 0; 10 | padding: 0; 11 | display: grid; 12 | grid-gap: 2rem; 13 | grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | *.scssc 24 | 25 | .sass-cache -------------------------------------------------------------------------------- /src/css/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $FOOTER 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) Global footer at the bottom of each page that contains a navigation and other information. 7 | */ 8 | .c-footer { 9 | background: #333; 10 | color: #fff; 11 | padding: 2rem; 12 | } 13 | 14 | .c-footer__copyright { 15 | margin-top: 2rem; 16 | text-align: center; 17 | } -------------------------------------------------------------------------------- /src/css/scss/base/_table.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #TABLES 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Table 7 | */ 8 | table { 9 | border-collapse: collapse; 10 | border-spacing: 0; 11 | width: 100%; 12 | } 13 | 14 | /** 15 | * Table header cell 16 | */ 17 | th { 18 | text-align: left; 19 | } 20 | 21 | /** 22 | * Table row 23 | */ 24 | tr { 25 | vertical-align: top; 26 | } 27 | -------------------------------------------------------------------------------- /src/css/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #HEADER 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Global block at the top of each page containing the navigation, logo, and other potential utility nav 7 | */ 8 | .c-header { 9 | background: #ddd; 10 | padding: 1rem 2rem; 11 | display: grid; 12 | grid-template-columns: 1fr; 13 | grid-auto-flow: column; 14 | gap: 10px; 15 | } -------------------------------------------------------------------------------- /src/css/scss/components/_page-header.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #PAGE HEADER 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) Container that consists of of a page header title and description 7 | */ 8 | 9 | /** 10 | * Page header title 11 | */ 12 | .c-page-header__title { 13 | margin-bottom: 1rem; 14 | } 15 | 16 | /** 17 | * Page description 18 | */ 19 | .c-page-header__desc { 20 | margin-bottom: 2rem; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Header/Header.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withKnobs } from '@storybook/addon-knobs/react'; 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs'; 5 | import { Header } from './Header'; 6 | 7 | let stories = storiesOf('Global/Header', module); 8 | 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs); 10 | 11 | stories.add('Default', () => 12 |
13 | ); 14 | -------------------------------------------------------------------------------- /src/css/scss/components/_inline-form.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 |     #INLINE FORM 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) An inline form displays an input and a button side-by-side. 7 | * 2) Can be used for search, email newsletter signup, and other one-field forms 8 | */ 9 | .c-inline-form { 10 | display: flex; 11 | padding: 0.5rem 0; 12 | } 13 | 14 | .c-inline-form__input { 15 | flex: 1; 16 | padding: 0.5rem; 17 | } -------------------------------------------------------------------------------- /src/css/scss/base/_body.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #BODY 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Body base styles 7 | * 1) Set the body element's height to at least 100vh of the viewport. 8 | * This is used to achieve a sticky footer 9 | * 2) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/ 10 | */ 11 | body { 12 | font-family: sans-serif; 13 | background: #fff; 14 | } 15 | -------------------------------------------------------------------------------- /src/css/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #BUTTONS 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) Button or link that has functionality to it 7 | */ 8 | .c-btn { 9 | background: #333; 10 | color: #fff; 11 | border: 0; 12 | } 13 | 14 | /** 15 | * Secondary button 16 | * 1) Different button style 17 | */ 18 | .c-btn--secondary { 19 | background: #eee; 20 | color: #222; 21 | border: 1px solid #eee; 22 | } -------------------------------------------------------------------------------- /src/css/scss/base/_links.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #LINKS 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Link base styles 7 | */ 8 | a { 9 | color: $color-gray-73; 10 | text-decoration: none; 11 | outline: 0; 12 | transition: color $anim-fade-quick $anim-ease; 13 | 14 | &:hover, &:focus { 15 | color: $color-gray-50; 16 | } 17 | 18 | &:active { 19 | color: $color-gray-93; 20 | } 21 | 22 | &:visited { 23 | color: $color-gray-93; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withKnobs } from '@storybook/addon-knobs/react'; 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs'; 5 | import { Footer } from './Footer'; 6 | 7 | let stories = storiesOf('Global/Footer', module); 8 | 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs); 10 | 11 | stories.add('Default', () => 12 |
13 | Hello Footer 14 |
15 | ); 16 | -------------------------------------------------------------------------------- /src/components/Logo/Logo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export class Logo extends Component { 5 | 6 | render() { 7 | return ( 8 | 9 | { 10 | 11 | ); 12 | } 13 | } 14 | 15 | Logo.propTypes = { 16 | href: PropTypes.string, 17 | src: PropTypes.string.isRequired, 18 | alt: PropTypes.string.isRequired 19 | } 20 | -------------------------------------------------------------------------------- /src/components/Logo/Logo.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withKnobs } from '@storybook/addon-knobs/react'; 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs'; 5 | import { Logo } from './Logo'; 6 | 7 | import logoimg from '../../images/fpo-120x60.png'; 8 | 9 | let stories = storiesOf('Global/Logo', module); 10 | 11 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs); 12 | 13 | stories.add('Default', () => 14 | 15 | ); -------------------------------------------------------------------------------- /src/components/Button/Button.stories.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withKnobs } from '@storybook/addon-knobs/react'; 4 | import { withSmartKnobs } from 'storybook-addon-smart-knobs'; 5 | import { Button } from './Button'; 6 | 7 | let stories = storiesOf('Buttons/Button', module); 8 | 9 | stories.addDecorator(withSmartKnobs).addDecorator(withKnobs); 10 | 11 | stories.add('Default', () => 12 | 20 | ); 21 | } 22 | } 23 | 24 | Button.propTypes = { 25 | btnClass: PropTypes.string, 26 | issecondary: PropTypes.bool, 27 | disabled: PropTypes.bool, 28 | text: PropTypes.string 29 | } 30 | 31 | Button.defaultProps = { 32 | disabled: false, 33 | text: 'Button' 34 | } 35 | -------------------------------------------------------------------------------- /src/components/Hero/Hero.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export class Hero extends Component { 5 | render() { 6 | return ( 7 |
8 | { 9 |
10 |

{ this.props.title }

11 |

{ this.props.description }

12 |
13 |
14 | ); 15 | } 16 | } 17 | 18 | Hero.propTypes = { 19 | heroimgsrc: PropTypes.string.isRequired, 20 | heroimgalt: PropTypes.string.isRequired, 21 | title: PropTypes.string.isRequired, 22 | description: PropTypes.string 23 | } 24 | 25 | Hero.defaultProps = { 26 | heroimgsrc: "../../images/fpo-1200x650.png", 27 | title: "Hero Title", 28 | description: "This is the hero description" 29 | }; 30 | 31 | -------------------------------------------------------------------------------- /src/css/scss/components/_hero.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 |     #HERO 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * 1) A hero is a pronounced block typically situated at the top of a page layout 7 | */ 8 | .c-hero { 9 | background: #eee; 10 | position: relative; 11 | } 12 | 13 | /** 14 | * Hero image 15 | */ 16 | .c-hero__img { 17 | display: block; 18 | width: 100%; 19 | height: auto; 20 | max-height: 80vh; 21 | object-fit: cover; 22 | } 23 | 24 | /** 25 | * Hero body 26 | * 1) Contains the hero text, call to action, and other things 27 | */ 28 | .c-hero__body { 29 | position: absolute; 30 | bottom: 0; 31 | left: 0; 32 | padding: 3rem 2rem; 33 | z-index: 1; 34 | } 35 | 36 | /** 37 | * Hero title 38 | */ 39 | .c-hero__title { 40 | font-size: 3rem; 41 | margin: 0; 42 | } 43 | 44 | /** 45 | * Hero description 46 | */ 47 | .c-hero__description { 48 | font-size: 1.4rem; 49 | margin: 0; 50 | } -------------------------------------------------------------------------------- /src/css/scss/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #LAYOUT 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * Layout Container 7 | * 1) Caps the width of the content to the maximum width 8 | * and centers the container 9 | */ 10 | .l-container { 11 | max-width: $l-max-width; 12 | margin: 0 auto; 13 | } 14 | 15 | /** 16 | * 17 | * 1) This narrow layout container is for lists, forms, 18 | * and other singular objects that aren't dashboard-y 19 | * kinds of displays 20 | */ 21 | .l-linelength-container { 22 | margin: 0 auto; 23 | max-width: $l-linelength-width; 24 | } 25 | 26 | 27 | 28 | 29 | 30 | /*------------------------------------*\ 31 | #GRID 32 | \*------------------------------------*/ 33 | 34 | /** 35 | * Grid Container 36 | */ 37 | .l-grid { 38 | display: flex; 39 | flex-wrap: wrap; 40 | 41 | @supports (display: grid) { 42 | display: grid; 43 | grid-gap: 16px; 44 | grid-template-columns: repeat(auto-fill, minmax(285px, 1fr) ); 45 | margin: 0; 46 | } 47 | } 48 | 49 | /** 50 | * Grid Item 51 | */ 52 | .l-grid__item { 53 | 54 | } -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import classnames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | 5 | export class Card extends Component { 6 | render() { 7 | let cardClass = classnames({ 8 | "c-card": true, 9 | "c-card--dark": this.props.theme === "dark" 10 | }); 11 | 12 | return ( 13 |
14 |
15 |

{this.props.title}

16 |

17 | {this.props.description} 18 |

19 |
20 |
{this.props.children}
21 |
22 | ); 23 | } 24 | } 25 | 26 | Card.propTypes = { 27 | cardClass: PropTypes.string, 28 | title: PropTypes.string, 29 | description: PropTypes.string, 30 | children: PropTypes.node 31 | } 32 | 33 | Card.defaultProps = { 34 | title: "Card Title", 35 | description: "This is the card description" 36 | }; -------------------------------------------------------------------------------- /src/components/InlineForm/InlineForm.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import PropTypes from 'prop-types'; 3 | import { Button } from "../Button/Button"; 4 | 5 | export class InlineForm extends Component { 6 | render() { 7 | return ( 8 |
13 | 14 | 19 |
38 | ); 39 | } 40 | } 41 | ``` 42 | 43 | __Button.stories.js__ will be: 44 | 45 | ```js 46 | import React from 'react'; 47 | import { storiesOf } from '@storybook/react'; 48 | import { Button } from './Button'; 49 | 50 | let stories = storiesOf('Button', module); 51 | 52 | stories.add('Default', () => 53 | 56 | ); 57 | 58 | ``` 59 | 60 | __Button.css__ is plain CSS, but will automatically be loaded when the component is used. 61 | 62 | ### Run Storybook 63 | 64 | ```bash 65 | npm run storybook 66 | ``` 67 | 68 | ## Add Button to App.js 69 | 70 | ```jsx 71 | import React, { Component } from 'react'; 72 | import { Button } from './components/Button/Button'; 73 | 74 | class App extends Component { 75 | render() { 76 | return ( 77 |
78 | 79 |
80 | ); 81 | } 82 | } 83 | 84 | export default App; 85 | ``` 86 | 87 | ### Run the application 88 | 89 | ```bash 90 | npm start 91 | ``` 92 | 93 | ## Adding Sass 94 | 95 | Adding Sass involves "ejecting" out of create react app. This process is out of the scope of this demo, but I'll include some links below. 96 | 97 | - [Adding Sass support to Create React App](https://medium.com/front-end-hacking/how-to-add-sass-or-scss-to-create-react-app-c303dae4b5bc) 98 | - [Adding Sass support to Storybook](https://storybook.js.org/configurations/custom-webpack-config/) -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './css/style.css'; 3 | import { Header } from './components/Header/Header'; 4 | import { Hero } from './components/Hero/Hero'; 5 | import { Section } from './components/Section/Section'; 6 | import { CardList } from './components/CardList/CardList'; 7 | import { TextPassage } from './components/TextPassage/TextPassage'; 8 | import { Footer } from './components/Footer/Footer'; 9 | 10 | import heroImg from './images/fpo-1200x650.png'; 11 | 12 | class App extends Component { 13 | render() { 14 | return ( 15 |
16 |
17 | 18 | 19 |
20 | 40 | 41 |
42 | 43 |
44 |
45 | 46 |

A text passage contains arbitrary text that might come from a CMS. It should live within a container that caps the line length of the text to avoid a straining reading experience.

47 | 48 |

Heading 2

49 | 50 |

This is another paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

51 | 52 |
    53 |
  • Here is a unordered list item
    • 54 |
  • Here is a unordered list item
    • 55 |
  • Here is a unordered list item
    • 56 |
  • Here is a unordered list item
    • 57 |
58 | 59 |

Heading 3

60 | 61 |
    62 |
  1. Here is a unordered list item
    2. 63 |
  2. Here is a unordered list item
    3. 64 |
  3. Here is a unordered list item
    4. 65 |
  4. Here is a unordered list item
    5. 66 |
67 | 68 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

69 | 70 |
71 |

This is a quotation from something.

72 | Cite source 73 |
74 | 75 |

That is all.

76 | 77 |
{/* end l-linelength-container */} 78 |
79 |
80 |
81 | ); 82 | } 83 | } 84 | 85 | export default App; 86 | -------------------------------------------------------------------------------- /src/css/scss/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | #VARIABLES 3 | \*------------------------------------*/ 4 | 5 | /** 6 | * CONTENTS 7 | * 8 | * COLORS 9 | * Brand Colors...............Globally-available variables and config 10 | * Neutral Colors.............Grayscale colors, including white and black 11 | * Utility Colors.............Info, Warning, Error, Success 12 | * 13 | * TYPOGRAPHY 14 | * Font Families..............The fonts used in the design system 15 | * Sizing.....................Font sizing 16 | * 17 | * LAYOUT 18 | * Max-widths.................Maximum layout container width 19 | * 20 | 21 | * SPACING 22 | * Spacing defaults...........Spacing between elements 23 | * 24 | * BORDERS 25 | * Border Width...............Border thicknesses 26 | * Border Radius..............Border radius definitions 27 | * 28 | * ANIMATION 29 | * Animation Speed............Transition/animation speed variables 30 | * Animation easing...........Easing variables 31 | * 32 | * BREAKPOINTS 33 | * Breakpoints................Global breakpoint definitions 34 | */ 35 | 36 | /*------------------------------------*\ 37 | #COLORS 38 | \*------------------------------------*/ 39 | 40 | /** 41 | * Brand Colors 42 | * 1) Brand=specific colors 43 | */ 44 | $color-brand-blue: #0000ff; 45 | 46 | /** 47 | * Neutral Colors 48 | * 1) Neutral colors are grayscale values used throughout the UI 49 | */ 50 | $color-white: #fff; 51 | $color-gray-02: #f9f9f9; 52 | $color-gray-07: #eee; 53 | $color-gray-13: #ddd; 54 | $color-gray-27: #bbb; 55 | $color-gray-50: #808080; 56 | $color-gray-60: #666; 57 | $color-gray-73: #444; 58 | $color-gray-93: #131313; 59 | $color-black: #000; 60 | 61 | /** 62 | * Utility Colors 63 | * 1) Utility colors are colors used to provide feedback, such as alert messages, 64 | * form validation, etc. 65 | */ 66 | $color-utility-info: #0192d0; 67 | $color-utility-info-light: #d3f2ff; 68 | $color-utility-error: #b12a0b; 69 | $color-utility-error-light: #fdded8; 70 | $color-utility-success: #03804d; 71 | $color-utility-success-light: #d4f3e6; 72 | $color-utility-warning: #a59b15; 73 | $color-utility-warning-light: #fffecf; 74 | 75 | 76 | 77 | 78 | 79 | /*------------------------------------*\ 80 | #TYPOGRAPHY 81 | \*------------------------------------*/ 82 | 83 | /** 84 | * Font Family 85 | */ 86 | $font-primary: "HelveticaNeue", "Helvetica", "Arial", sans-serif; 87 | $font-secondary: serif; 88 | 89 | 90 | /** 91 | * Font Sizing 92 | */ 93 | $font-size-sm: 0.75rem; 94 | $font-size-sm-2: 0.85rem; 95 | $font-size-med: 1rem; 96 | $font-size-med-2: 1.2rem; 97 | $font-size-large: 2rem; 98 | $font-size-xl: 3rem; 99 | 100 | /** 101 | * Line Height 102 | */ 103 | $line-height: 1.5; 104 | 105 | $font-size-h1: 48px !default; 106 | $font-size-h2: 36px !default; 107 | $font-size-h3: 27px !default; 108 | $font-size-h4: 19px !default; 109 | 110 | 111 | 112 | 113 | 114 | /*------------------------------------*\ 115 | #LAYOUT 116 | \*------------------------------------*/ 117 | 118 | /** 119 | * Max Width 120 | */ 121 | $l-max-width: 60rem !default; 122 | $l-linelength-width: 36rem !default; 123 | 124 | 125 | 126 | 127 | 128 | /*------------------------------------*\ 129 | #SPACING 130 | \*------------------------------------*/ 131 | 132 | /** 133 | * Spacing and offsets 134 | * 1) Used to space grids and body padding 135 | */ 136 | 137 | $spacing: 1rem; 138 | $spacing-small: round(0.5 * $spacing); 139 | $spacing-large: round(2 * $spacing); 140 | 141 | 142 | 143 | 144 | 145 | /*------------------------------------*\ 146 | #BORDERS 147 | \*------------------------------------*/ 148 | 149 | /** 150 | * Border 151 | */ 152 | $border-thickness: 1px; 153 | 154 | /** 155 | * Border radius 156 | */ 157 | $border-radius: 4px; 158 | 159 | 160 | 161 | 162 | 163 | /*------------------------------------*\ 164 | #ANIMATION 165 | \*------------------------------------*/ 166 | 167 | /** 168 | * Transition Speed 169 | */ 170 | $anim-fade-quick: 0.15s; 171 | $anim-fade-long: 0.4s; 172 | 173 | /** 174 | * Transition Ease 175 | */ 176 | $anim-ease: ease-out; 177 | 178 | 179 | 180 | 181 | 182 | /*------------------------------------*\ 183 | #BREAKPOINTS 184 | \*------------------------------------*/ 185 | 186 | /** 187 | * Breakpoints used in media queries 188 | * 1) These are not the only breakpoints used, but they provide a few defaults 189 | */ 190 | $bp-small: 28em; 191 | $bp-med: 47em; 192 | $bp-large: 60em; 193 | $bp-xl: 70em; -------------------------------------------------------------------------------- /src/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["style.scss","scss/abstracts/_variables.scss","scss/abstracts/_mixins.scss","scss/base/_reset.scss","scss/base/_body.scss","scss/base/_links.scss","scss/base/_lists.scss","scss/base/_headings.scss","scss/base/_forms.scss","scss/base/_buttons.scss","scss/base/_main.scss","scss/base/_media.scss","scss/base/_text.scss","scss/base/_table.scss","scss/layout/_layout.scss","scss/components/_footer.scss","scss/components/_header.scss","scss/components/_logo.scss","scss/components/_section.scss","scss/components/_page-header.scss","scss/components/_primary-nav.scss","scss/components/_field.scss","scss/components/_buttons.scss","scss/components/_inline-form.scss","scss/components/_card.scss","scss/components/_hero.scss","scss/components/_icon.scss","scss/components/_text-passage.scss","scss/components/_card-list.scss","scss/utilities/_visibility.scss"], 5 | "names": [], 6 | "file": "style.css" 7 | } -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*------------------------------------*\ 3 | #TABLE OF CONTENTS 4 | \*------------------------------------*/ 5 | /** 6 | * ABSTRACTS..............................Declarations of Sass variables & mixins 7 | * BASE...................................Default element styles 8 | * LAYOUT.................................Layout-specific styles 9 | * COMPONENTS.............................Component styles 10 | * UTILITIES..............................Utility classes 11 | */ 12 | /*------------------------------------*\ 13 | #ABSTRACTS 14 | \*------------------------------------*/ 15 | /*------------------------------------*\ 16 | #VARIABLES 17 | \*------------------------------------*/ 18 | /** 19 | * CONTENTS 20 | * 21 | * COLORS 22 | * Brand Colors...............Globally-available variables and config 23 | * Neutral Colors.............Grayscale colors, including white and black 24 | * Utility Colors.............Info, Warning, Error, Success 25 | * 26 | * TYPOGRAPHY 27 | * Font Families..............The fonts used in the design system 28 | * Sizing.....................Font sizing 29 | * 30 | * LAYOUT 31 | * Max-widths.................Maximum layout container width 32 | * 33 | 34 | * SPACING 35 | * Spacing defaults...........Spacing between elements 36 | * 37 | * BORDERS 38 | * Border Width...............Border thicknesses 39 | * Border Radius..............Border radius definitions 40 | * 41 | * ANIMATION 42 | * Animation Speed............Transition/animation speed variables 43 | * Animation easing...........Easing variables 44 | * 45 | * BREAKPOINTS 46 | * Breakpoints................Global breakpoint definitions 47 | */ 48 | /*------------------------------------*\ 49 | #COLORS 50 | \*------------------------------------*/ 51 | /** 52 | * Brand Colors 53 | * 1) Brand=specific colors 54 | */ 55 | /** 56 | * Neutral Colors 57 | * 1) Neutral colors are grayscale values used throughout the UI 58 | */ 59 | /** 60 | * Utility Colors 61 | * 1) Utility colors are colors used to provide feedback, such as alert messages, 62 | * form validation, etc. 63 | */ 64 | /*------------------------------------*\ 65 | #TYPOGRAPHY 66 | \*------------------------------------*/ 67 | /** 68 | * Font Family 69 | */ 70 | /** 71 | * Font Sizing 72 | */ 73 | /** 74 | * Line Height 75 | */ 76 | /*------------------------------------*\ 77 | #LAYOUT 78 | \*------------------------------------*/ 79 | /** 80 | * Max Width 81 | */ 82 | /*------------------------------------*\ 83 | #SPACING 84 | \*------------------------------------*/ 85 | /** 86 | * Spacing and offsets 87 | * 1) Used to space grids and body padding 88 | */ 89 | /*------------------------------------*\ 90 | #BORDERS 91 | \*------------------------------------*/ 92 | /** 93 | * Border 94 | */ 95 | /** 96 | * Border radius 97 | */ 98 | /*------------------------------------*\ 99 | #ANIMATION 100 | \*------------------------------------*/ 101 | /** 102 | * Transition Speed 103 | */ 104 | /** 105 | * Transition Ease 106 | */ 107 | /*------------------------------------*\ 108 | #BREAKPOINTS 109 | \*------------------------------------*/ 110 | /** 111 | * Breakpoints used in media queries 112 | * 1) These are not the only breakpoints used, but they provide a few defaults 113 | */ 114 | /*------------------------------------*\ 115 | #MIXINS 116 | \*------------------------------------*/ 117 | /*------------------------------------*\ 118 | #BASE 119 | \*------------------------------------*/ 120 | /*------------------------------------*\ 121 | #RESET 122 | \*------------------------------------*/ 123 | /** 124 | * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ 125 | */ 126 | * { 127 | box-sizing: border-box; } 128 | 129 | /** 130 | * 1) Zero out margins and padding for elements 131 | */ 132 | html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { 133 | margin: 0; 134 | padding: 0; } 135 | 136 | /** 137 | * 1) Set HTML5 elements to display: block 138 | */ 139 | header, footer, nav, section, article, figure { 140 | display: block; } 141 | 142 | /*------------------------------------*\ 143 | #BODY 144 | \*------------------------------------*/ 145 | /** 146 | * Body base styles 147 | * 1) Set the body element's height to at least 100vh of the viewport. 148 | * This is used to achieve a sticky footer 149 | * 2) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/ 150 | */ 151 | body { 152 | font-family: sans-serif; 153 | background: #fff; } 154 | 155 | /*------------------------------------*\ 156 | #LINKS 157 | \*------------------------------------*/ 158 | /** 159 | * Link base styles 160 | */ 161 | a { 162 | color: #444; 163 | text-decoration: none; 164 | outline: 0; 165 | transition: color 0.15s ease-out; } 166 | a:hover, a:focus { 167 | color: #808080; } 168 | a:active { 169 | color: #131313; } 170 | a:visited { 171 | color: #131313; } 172 | 173 | /*------------------------------------*\ 174 | #LISTS 175 | \*------------------------------------*/ 176 | /** 177 | * 1) List base styles 178 | */ 179 | /** 180 | * Remove list styles from unordered and ordered lists 181 | */ 182 | ol, ul { 183 | list-style: none; } 184 | 185 | /*------------------------------------*\ 186 | #HEADINGS 187 | \*------------------------------------*/ 188 | /** 189 | * Heading 1 base styles 190 | */ 191 | h1 { 192 | font-size: 2.25rem; 193 | line-height: 1; } 194 | 195 | /** 196 | * Heading 2 base styles 197 | */ 198 | h2 { 199 | font-size: 1.6rem; 200 | line-height: 1.2; 201 | letter-spacing: -0.02rem; 202 | font-weight: normal; 203 | margin-bottom: 0.5rem; } 204 | 205 | /** 206 | * Heading 3 base styles 207 | */ 208 | h3 { 209 | font-size: 1.2rem; 210 | line-height: 1.2; 211 | margin-bottom: 0.3rem; } 212 | 213 | /** 214 | * Heading 4 base styles 215 | */ 216 | h4 { 217 | font-size: 1rem; 218 | line-height: 1.2; 219 | margin-bottom: 0.3rem; } 220 | 221 | /*------------------------------------*\ 222 | #FORMS 223 | \*------------------------------------*/ 224 | /** 225 | * 1) Form element base styles 226 | */ 227 | /** 228 | * Input placeholder text base styles 229 | */ 230 | ::-webkit-input-placeholder { 231 | color: #808080; } 232 | 233 | ::-moz-placeholder { 234 | color: #808080; } 235 | 236 | :-ms-input-placeholder { 237 | color: #808080; } 238 | 239 | /** 240 | * Fieldset base styles 241 | */ 242 | fieldset { 243 | border: 0; 244 | padding: 0; 245 | margin: 0; } 246 | 247 | /** 248 | * Legend base styles 249 | */ 250 | legend { 251 | margin-bottom: 0.25rem; } 252 | 253 | /** 254 | * Label base styles 255 | */ 256 | label { 257 | display: block; 258 | padding-bottom: 0.25rem; 259 | color: #131313; } 260 | 261 | /** 262 | * Add font size 100% of form element and margin 0 to these elements 263 | */ 264 | button, input, select, textarea { 265 | font-family: inherit; 266 | font-size: 1rem; 267 | margin: 0; } 268 | 269 | /** 270 | * Text area base styles 271 | */ 272 | textarea { 273 | resize: none; } 274 | 275 | /** 276 | * Input and text area base styles 277 | */ 278 | input, textarea { 279 | width: 100%; 280 | padding: 0.5rem; 281 | border: 1px solid #444; 282 | background: #fff; } 283 | input:focus, textarea:focus { 284 | border-color: #131313; } 285 | 286 | /** 287 | * Remove webkit appearance styles from these elements 288 | */ 289 | input[type=text], input[type=search], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=url], input[type=number], textarea { 290 | -webkit-appearance: none; } 291 | 292 | /** 293 | * Checkbox and radio button base styles 294 | */ 295 | input[type="checkbox"], 296 | input[type="radio"] { 297 | width: auto; 298 | margin-right: 0.3rem; 299 | border-color: #444; } 300 | 301 | /** 302 | * Search input base styles 303 | */ 304 | input[type="search"] { 305 | -webkit-appearance: none; 306 | border-radius: 0; } 307 | 308 | /** 309 | * Select 310 | * 1) Remove default styling 311 | */ 312 | select { 313 | display: block; 314 | font-size: 1rem; 315 | width: 100%; 316 | border: 1px solid #444; 317 | padding: 0.5rem; 318 | background: #fff; 319 | color: #131313; } 320 | select:focus { 321 | border-color: #131313; } 322 | 323 | /*------------------------------------*\ 324 | #BUTTONS 325 | \*------------------------------------*/ 326 | /** 327 | * Button and submit inputs reset 328 | * 1) These should be styled using c-btn 329 | */ 330 | button { 331 | cursor: pointer; } 332 | 333 | /*------------------------------------*\ 334 | #MAIN ELEMENT 335 | \*------------------------------------*/ 336 | /** 337 | * Main element 338 | */ 339 | [role=main] { 340 | display: block; 341 | padding: 1rem; } 342 | 343 | /*------------------------------------*\ 344 | #MEDIA 345 | \*------------------------------------*/ 346 | /** 347 | * Responsive image styling 348 | * 1) Allows for images to flex with varying screen size 349 | */ 350 | img { 351 | max-width: 100%; 352 | height: auto; } 353 | 354 | /*------------------------------------*\ 355 | #TEXT 356 | \*------------------------------------*/ 357 | /** 358 | * Paragraph base styles 359 | */ 360 | p { 361 | margin-bottom: 1rem; } 362 | 363 | /** 364 | * Blockquote base styles 365 | */ 366 | blockquote { 367 | font-style: italic; 368 | border-left: 1px solid #808080; 369 | color: #808080; 370 | padding-left: 1rem; 371 | margin-bottom: 1rem; } 372 | 373 | /** 374 | * Horizontal rule base styles 375 | */ 376 | hr { 377 | border: 0; 378 | height: 1px; 379 | background: #ddd; 380 | margin: 1rem 0; } 381 | 382 | /** 383 | * Selection styles 384 | */ 385 | ::-moz-selection { 386 | color: #131313; 387 | background: #dddddd; 388 | /* Gecko Browsers */ } 389 | 390 | ::selection { 391 | color: #131313; 392 | background: #dddddd; 393 | /* WebKit/Blink Browsers */ } 394 | 395 | /** 396 | * Code base styles 397 | */ 398 | code { 399 | display: inline-block; 400 | background: #f9f9f9; 401 | border: 1px solid #ddd; 402 | padding: .2rem .5rem; 403 | line-height: 1.2; 404 | font-size: .85rem; } 405 | 406 | /** 407 | * Preformatted text base styles 408 | */ 409 | pre { 410 | background: #f9f9f9; 411 | border: 1px solid #ddd; 412 | font-size: 1rem; 413 | padding: 1rem; 414 | overflow-x: auto; 415 | /** 416 | * Remove border from code within preformatted text block 417 | */ } 418 | pre code { 419 | border: 0; } 420 | 421 | /** 422 | * Code with languages associated with them 423 | * 1) Override Prism sysles for code blocks with language 424 | */ 425 | code[class*="language-"], 426 | pre[class*="language-"] { 427 | font-family: monospace !important; } 428 | 429 | /*------------------------------------*\ 430 | #TABLES 431 | \*------------------------------------*/ 432 | /** 433 | * Table 434 | */ 435 | table { 436 | border-collapse: collapse; 437 | border-spacing: 0; 438 | width: 100%; } 439 | 440 | /** 441 | * Table header cell 442 | */ 443 | th { 444 | text-align: left; } 445 | 446 | /** 447 | * Table row 448 | */ 449 | tr { 450 | vertical-align: top; } 451 | 452 | /*------------------------------------*\ 453 | #LAYOUT 454 | \*------------------------------------*/ 455 | /*------------------------------------*\ 456 | #LAYOUT 457 | \*------------------------------------*/ 458 | /** 459 | * Layout Container 460 | * 1) Caps the width of the content to the maximum width 461 | * and centers the container 462 | */ 463 | .l-container { 464 | max-width: 60rem; 465 | margin: 0 auto; } 466 | 467 | /** 468 | * 469 | * 1) This narrow layout container is for lists, forms, 470 | * and other singular objects that aren't dashboard-y 471 | * kinds of displays 472 | */ 473 | .l-linelength-container { 474 | margin: 0 auto; 475 | max-width: 36rem; } 476 | 477 | /*------------------------------------*\ 478 | #GRID 479 | \*------------------------------------*/ 480 | /** 481 | * Grid Container 482 | */ 483 | .l-grid { 484 | display: flex; 485 | flex-wrap: wrap; } 486 | @supports (display: grid) { 487 | .l-grid { 488 | display: grid; 489 | grid-gap: 16px; 490 | grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); 491 | margin: 0; } } 492 | 493 | /** 494 | * Grid Item 495 | */ 496 | /*------------------------------------*\ 497 | #COMPONENTS 498 | \*------------------------------------*/ 499 | /** 500 | * Global 501 | */ 502 | /*------------------------------------*\ 503 | $FOOTER 504 | \*------------------------------------*/ 505 | /** 506 | * 1) Global footer at the bottom of each page that contains a navigation and other information. 507 | */ 508 | .c-footer { 509 | background: #333; 510 | color: #fff; 511 | padding: 2rem; } 512 | 513 | .c-footer__copyright { 514 | margin-top: 2rem; 515 | text-align: center; } 516 | 517 | /*------------------------------------*\ 518 | #HEADER 519 | \*------------------------------------*/ 520 | /** 521 | * Global block at the top of each page containing the navigation, logo, and other potential utility nav 522 | */ 523 | .c-header { 524 | background: #ddd; 525 | padding: 1rem 2rem; 526 | display: grid; 527 | grid-template-columns: 1fr; 528 | grid-auto-flow: column; 529 | gap: 10px; } 530 | 531 | /*------------------------------------*\ 532 | #LOGO 533 | \*------------------------------------*/ 534 | /** 535 | * Branding image or text of the site 536 | */ 537 | .c-logo { 538 | display: inline; } 539 | 540 | /** 541 | * Logo image 542 | */ 543 | .c-logo__img { 544 | display: block; } 545 | 546 | /** 547 | * Page 548 | */ 549 | /*------------------------------------*\ 550 |     #SECTION 551 | \*------------------------------------*/ 552 | /** 553 | * Section 554 | * 1) A section is a discrete section of a web page 555 | */ 556 | .c-section { 557 | padding: 2rem; } 558 | 559 | /** 560 | * Section header 561 | * 1) contains the section title, description and other header content 562 | */ 563 | .c-section__header { 564 | display: flex; 565 | flex-direction: column; 566 | align-items: center; 567 | margin-bottom: 2rem; } 568 | 569 | /** 570 | * Section title 571 | */ 572 | .c-section__title { 573 | font-size: 2rem; 574 | margin: 0; } 575 | 576 | /** 577 | * Section description 578 | */ 579 | .c-section__description { 580 | margin: 0; } 581 | 582 | /*------------------------------------*\ 583 | #PAGE HEADER 584 | \*------------------------------------*/ 585 | /** 586 | * 1) Container that consists of of a page header title and description 587 | */ 588 | /** 589 | * Page header title 590 | */ 591 | .c-page-header__title { 592 | margin-bottom: 1rem; } 593 | 594 | /** 595 | * Page description 596 | */ 597 | .c-page-header__desc { 598 | margin-bottom: 2rem; } 599 | 600 | /** 601 | * Navigation 602 | */ 603 | /*------------------------------------*\ 604 | #PRIMARY NAVIGATION 605 | \*------------------------------------*/ 606 | /** 607 | * Primary navigation existing in the header and maybe the footer 608 | * 1) The outer