react/

CodeMarkup

Addons: Knobs

Grid item classNames

Grid item sizing

Animating

Elevent

Legend

body:
    header: # @classname header
        # @children
    # Top level for each section
    section: # @classname section-name
        # @children
        container: # @classname container-name
            # Base selection of rules
            block:
            # @children
            grid:
                grid-item:
                # @children
            table:
                # @children
                table-header:
                    # @children
                table-data:
                    # @chidlren
            list:
                # react native only
                list-item:
                    # @children
            # ... more, maybe article etc
            nav:
                nav-item:
                    # @children
    component: # @classname component-name
        # Specific component based styling
        # @children
        # Base selection of rules
        block:
        # @children
        grid:
            grid-item:
            # @children
        table:
            # @children
            table-header:
                # @children
            table-data:
                # @chidlren
        list:
            # react native only
            list-item:
                # @children
        # ... more, maybe article etc
        nav:
            nav-item:
                # @children
    footer: # @classname footer - but maybe should be more specific
        # @children
copy

React Markup

import React, { Component } from 'react';

/* user imports */

class CodeMarkup extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [
                { title: 'One' },
                { title: 'Two' },
                { title: 'Three' },
                { title: 'Four' },
                { title: 'Five' },
                { title: 'Six' }
            ]
        };
    }

    /**
     * In real world use, the returned markup
     * should be seperated into a
     * <ComponentOffer {...this.props} /> component
     */
    renderComponentOffer = items => {
        return items.map((d, i) => {
            return (
                <div className="grid-offer -four">
                    <div className="component-offer">
                        <div className="block-image">
                            <span className="offer-image" />
                        </div>
                        <div className="block-title">
                            <h3 className="offer-title">{d.title}</h3>
                        </div>
                    </div>
                </div>
            );
        });
    };

    render() {
        const { items } = this.state;
        return (
            <section className="section-offers">
                <div className="container-content">
                    <div className="block-header">
                        <h3 className="heading-header">Header</h3>
                        <button className="button-view-all">View all</button>
                    </div>
                    <div className="grid-offers">
                        {this.renderComponentOffer(items)}
                    </div>
                </div>
            </section>
        );
    }
}

export default CodeMarkup;
copy

styles/sections/_offers.scss

.section-offers {
    padding: 100px 0;

    background-color: $c-white;

    border: 2px solid transparent;

    @include grid-media($mobile-grid) {
        padding: 2px 0;
    }

    &:hover {
        border: 2px solid $c-green;
    }

    .container-content {
        padding: 20px;
        margin: 0 auto;

        max-width: 600px;

        background-color: $c-light-grey;

        border: 2px solid transparent;

        &:hover {
            border: 2px solid $c-red;
        }
    }

    .block-header {
        display: flex;
        justify-content: space-between;

        margin-bottom: 10px;

        border: 2px solid transparent;

        &:hover {
            border: 2px solid $c-blue;
        }
    }

    .heading-header {
        border: 2px solid transparent;
        &:hover {
            border: 2px solid $c-orange;
        }
    }

    .button-view-all {
        border: 2px solid transparent;
        &:hover {
            border: 2px solid $c-orange;
        }
    }

    // another pre-determined type
    .grid-offers {
        @extend .grid;
        border: 2px solid transparent;

        &:hover {
            border: 2px solid $c-blue;
        }
    }

    // note that this is still level two
    // and doesn't fall in component scss
    .grid-offer {
        @extend .grid-item;

        background-color: $c-white;
    }
}
copy

components/ComponentOffer/ComponentOffer.scss

.component-offer {
    padding: 10px;

    border: 2px solid transparent;

    &:hover {
        border: 2px solid $c-red;
    }

    .block-image {
        margin-bottom: 10px;
        padding: 5px;

        border: 2px solid transparent;
        background-color: $c-light-grey;

        &:hover {
            border: 2px solid $c-blue;
        }
    }

    .offer-image {
        display: block;

        width: 100%;
        min-height: 60px;

        border: 2px solid transparent;

        &:hover {
            border: 2px solid $c-orange;
        }
    }

    .block-title {
        margin-bottom: 10px;

        border: 2px solid transparent;

        &:hover {
            border: 2px solid $c-blue;
        }
    }

    .offer-title {
        border: 2px solid transparent;
        &:hover {
            border: 2px solid $c-orange;
        }
    }
}
copy