├── .gitignore
├── .babelrc
├── dev
├── scss
│ ├── themes
│ │ └── default
│ │ │ ├── _headings.scss
│ │ │ ├── _blockquote.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _panels.scss
│ │ │ ├── _tables.scss
│ │ │ ├── _text.scss
│ │ │ ├── _notifications.scss
│ │ │ ├── _breadcrumbs.scss
│ │ │ ├── _pagination.scss
│ │ │ ├── _media_objects.scss
│ │ │ ├── _buttons.scss
│ │ │ ├── _progress_bars.scss
│ │ │ ├── _master.scss
│ │ │ ├── _accordion.scss
│ │ │ ├── _tabs.scss
│ │ │ ├── charts
│ │ │ └── _bar.scss
│ │ │ ├── _pricing_tables.scss
│ │ │ ├── _modal.scss
│ │ │ ├── _variables.scss
│ │ │ └── _navigation.scss
│ ├── style.scss
│ ├── _grid.scss
│ └── _normalize.scss
└── js
│ ├── components
│ ├── Homepage.js
│ ├── Videos.js
│ ├── Forum.js
│ ├── Footer.js
│ ├── Layout.js
│ ├── Header.js
│ └── Blog.js
│ └── main.js
├── src
└── index.html
├── webpack.config.js
├── README.md
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_headings.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | h1, h2, h3, h4, h5, h6{
4 | font-weight: 500;
5 | margin-bottom: 6px;
6 | }
7 |
--------------------------------------------------------------------------------
/dev/js/components/Homepage.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default class Homepage extends React.Component {
4 | render() {
5 | return (Homepage
);
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/dev/js/components/Videos.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default class Videos extends React.Component {
4 |
5 | render() {
6 | return (Videos
);
7 | }
8 |
9 | }
--------------------------------------------------------------------------------
/dev/js/components/Forum.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default class Forum extends React.Component {
4 |
5 | render() {
6 | return (Forum
);
7 | }
8 |
9 | }
--------------------------------------------------------------------------------
/dev/js/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default class Footer extends React.Component {
4 |
5 | render() {
6 | return (- footer here -
);
7 | }
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Webpack
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_blockquote.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | blockquote{
4 | border-left: 3px solid #eeeeee;
5 | margin: 0;
6 | padding-left: 15px;
7 |
8 | cite{
9 | color: $default;
10 | display: block;
11 | font-size: 0.9em;
12 | font-style: normal;
13 | margin-top: 8px;
14 | }
15 |
16 | }
--------------------------------------------------------------------------------
/dev/scss/themes/default/_forms.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | form{
4 | display: flex;
5 | flex-direction: column;
6 |
7 | .form-row{
8 | display: flex;
9 |
10 | & > * {
11 | align-self: flex-start;
12 | margin-bottom: 1.2em;
13 | }
14 |
15 | label{
16 | padding-right: 2em;
17 | width: 18%;
18 | }
19 |
20 | }
21 |
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_panels.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | $panel-border: #bbbbbb;
4 | $panel-padding: 8px;
5 |
6 | .panel{
7 | background-color: #f4f4f4;
8 | border: 1px solid $panel-border;
9 | margin-bottom: 15px;
10 |
11 | &-heading{
12 | border-bottom: 1px solid $panel-border;
13 | font-weight: 700;
14 | padding: $panel-padding;
15 | }
16 |
17 | &-body{
18 | padding: $panel-padding;
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_tables.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | table {
4 | border-collapse: collapse;
5 | width: 100%;
6 |
7 | tr{
8 |
9 | .table-cell{
10 | border: 1px solid #ccc;
11 | padding: 4px 8px;
12 | text-align: left;
13 | }
14 |
15 | th {
16 | @extend .table-cell;
17 | background-color: #eee;
18 | font-weight: 500;
19 | }
20 |
21 | td {
22 | @extend .table-cell;
23 | }
24 |
25 | }
26 |
27 | }
--------------------------------------------------------------------------------
/dev/scss/themes/default/_text.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .text {
4 | font: $font-default;
5 |
6 | @each $name, $value in $theme-colors {
7 | &-#{$name} {
8 | color: $value;
9 | }
10 | }
11 |
12 | @each $name, $value in $theme-colors-light {
13 | &-#{$name} {
14 | color: $value;
15 | }
16 | }
17 |
18 | }
19 |
20 | .text {
21 | @each $name, $value in $font-weights {
22 | &-#{$name} {
23 | font-weight: $value;
24 | }
25 | }
26 | }
--------------------------------------------------------------------------------
/dev/js/components/Layout.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Footer from "./Footer";
3 | import Header from "./Header";
4 | require('../../scss/style.scss');
5 |
6 | export default class Layout extends React.Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 | {this.props.children}
13 |
14 |
15 | );
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_notifications.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .notification{
4 | color: #FFFFFF;
5 | margin: 4px 0;
6 | padding: 8px 12px;
7 | }
8 |
9 | @each $name, $value in $theme-colors {
10 | .notification-#{$name} {
11 | @extend .notification;
12 | background-color: $value;
13 | }
14 | }
15 |
16 | @each $name, $value in $theme-colors-light {
17 | .notification-#{$name} {
18 | @extend .notification;
19 | background-color: $value;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_breadcrumbs.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .breadcrumbs{
4 | color: $default-light * 1.1;
5 | font-family: 'Open Sans', sans-serif;
6 | font-size: 0.9em;
7 |
8 | a{
9 | color: $default;
10 | margin: 0 1px;
11 |
12 | &:first-child{
13 | margin-left: 0;
14 | }
15 |
16 | &:last-child{
17 | color: $secondary;
18 | font-weight: 600;
19 | }
20 |
21 | &:hover {
22 | color: $default-light;
23 | text-decoration: underline;
24 | }
25 |
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_pagination.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | $pagination-border: #bbbbbb;
4 |
5 | .pagination {
6 | border: 1px solid $pagination-border;
7 | border-right: none;
8 | display: inline-flex;
9 | margin: 0;
10 | list-style-type: none;
11 | padding: 0;
12 |
13 | li {
14 | display: inline-block;
15 |
16 | a {
17 | border-right: 1px solid $pagination-border;
18 | display: inline-block;
19 | padding: 8px 12px;
20 |
21 | &:hover, &.selected {
22 | background-color: #e6e6e6;
23 | }
24 |
25 | }
26 |
27 | }
28 |
29 | }
30 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_media_objects.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .media {
4 | align-items: flex-start;
5 | display: flex;
6 |
7 | .media-figure {
8 | margin-right: 0.8em;
9 | max-width: 30%;
10 | }
11 |
12 | .media-body {
13 | flex: 1;
14 |
15 | .title{
16 | font-size: 1.1em;
17 | font-weight: 500;
18 | margin-bottom: 0.2em;
19 | }
20 |
21 | // Embedded media object
22 | .media{
23 | padding-left: 0;
24 |
25 | .media-figure{
26 | max-width: 20%;
27 | }
28 |
29 | .media-body > .title{
30 | font-size: 1em;
31 | }
32 | }
33 |
34 | }
35 |
36 | }
37 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_buttons.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | @mixin button($bgColor) {
4 | background-color: $bgColor;
5 | border: none;
6 | color: #FFFFFF;
7 | font: $font-default;
8 | padding: 8px 12px;
9 | text-decoration: none;
10 |
11 | &:hover{
12 | background-color: $bgColor * 0.8;
13 | cursor:pointer;
14 | }
15 |
16 | }
17 |
18 | .button {
19 |
20 | @each $name, $value in $theme-colors {
21 | &-#{$name} {
22 | @include button($value);
23 | }
24 | }
25 |
26 | @each $name, $value in $theme-colors-light {
27 | &-#{$name} {
28 | @include button($value);
29 | }
30 | }
31 |
32 | }
33 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_progress_bars.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .progress-container {
4 | background-color: #DDDDDD;
5 | overflow: hidden;
6 | height: 1.2em;
7 | margin: 4px 0;
8 |
9 | .progress{
10 | color: #FFF;
11 | font-size: 0.9em;
12 | height: 100%;
13 | line-height: 1.2em;
14 | padding: 0.1em 0;
15 | text-align: center;
16 | }
17 |
18 | @each $name, $value in $theme-colors {
19 | .progress-#{$name} {
20 | @extend .progress;
21 | background-color: $value;
22 | }
23 | }
24 |
25 | @each $name, $value in $theme-colors-light {
26 | .progress-#{$name} {
27 | @extend .progress;
28 | background-color: $value;
29 | }
30 | }
31 |
32 | }
33 |
34 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_master.scss:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);
2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
3 | @import "charts/bar";
4 | @import "accordion";
5 | @import "blockquote";
6 | @import "breadcrumbs";
7 | @import "buttons";
8 | @import "headings";
9 | @import "forms";
10 | @import "media_objects";
11 | @import "modal";
12 | @import "navigation";
13 | @import "notifications";
14 | @import "pagination";
15 | @import "panels";
16 | @import "pricing_tables";
17 | @import "progress_bars";
18 | @import "tables";
19 | @import "tabs";
20 | @import "text";
21 |
22 | body {
23 | font: $font-default;
24 | }
25 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_accordion.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | $accordion-border: #bbbbbb;
4 | $accordion-padding: 8px;
5 |
6 | .accordion {
7 | border: 1px solid $accordion-border;
8 | border-top: none;
9 |
10 | .item{
11 | border-top: 1px solid $accordion-border;
12 |
13 | .title{
14 | background-color: #f4f4f4;
15 | padding: $accordion-padding;
16 |
17 | &:hover{
18 | background-color: #f4f4f4 * 0.9;
19 | cursor: pointer;
20 | }
21 |
22 | }
23 |
24 | .content{
25 | padding: $accordion-padding;
26 | display: none;
27 | }
28 |
29 | .visible{
30 | border-top: 1px solid $accordion-border;
31 | display: block;
32 | }
33 |
34 | &:last-child{
35 | border-bottom: none;
36 | }
37 |
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/dev/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import "normalize";
2 | @import "grid";
3 | @import "themes/default/master";
4 |
5 | a, a:visited {
6 | color: $secondary;
7 | text-decoration: none;
8 |
9 | &:hover{
10 | color: $secondary-light;
11 | }
12 |
13 | &.active{
14 | background-color: $danger;
15 | }
16 |
17 | }
18 |
19 | .nav {
20 |
21 | a, a:visited {
22 | color: #ffffff;
23 | }
24 |
25 | }
26 |
27 | img {
28 | max-width: 100%;
29 | }
30 |
31 | hr {
32 | border-style: none;
33 | border-top: 1px solid ($default-light * 1.2);
34 | }
35 |
36 | p{
37 | margin: 0 0 0.75em;
38 | }
39 |
40 | pre{
41 | border: 1px solid ($default-light * 1.1) !important;
42 | padding: 6px 8px !important;
43 | }
44 |
45 | ul{
46 | li{
47 | list-style-type: disc;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/dev/js/components/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {Link, IndexLink } from 'react-router';
3 |
4 | export default class Header extends React.Component {
5 |
6 | render() {
7 | return (
8 |
9 | - Home
10 | -
11 | Blog
12 |
13 | - Forum
14 | - Videos
15 |
16 | );
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/dev/js/main.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {Router, Route, browserHistory, IndexRoute} from 'react-router';
4 | import Layout from "./components/Layout";
5 | import Blog from "./components/Blog";
6 | import Forum from "./components/Forum";
7 | import Homepage from "./components/Homepage";
8 | import Videos from "./components/Videos";
9 |
10 | ReactDOM.render((
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | ), document.getElementById('app'));
20 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_tabs.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .tab-nav{
4 | background-color: $primary;
5 | display: flex;
6 | padding: 0;
7 | margin: 0;
8 |
9 | li {
10 | display: inline-block;
11 | list-style-type: none;
12 |
13 | a {
14 | border-right: 1px solid rgba(255, 255, 255, 0.05);
15 | color: #FFFFFF;
16 | display: inline-block;
17 | text-decoration: none;
18 | padding: 12px 20px;
19 |
20 | &:hover, &.active {
21 | background-color: $primary * 0.75;
22 | color: #FFFFFF;
23 | font-weight: normal;
24 | }
25 | }
26 | }
27 |
28 | }
29 |
30 | .tab-content{
31 | border: 1px solid $default-light;
32 | border-top: none;
33 |
34 | padding: 12px 20px;
35 |
36 | & > div {
37 | display: none;
38 |
39 | &.visible{
40 | display: block;
41 | }
42 | }
43 |
44 | }
45 |
46 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | module.exports = {
4 |
5 | entry: './dev/js/main.js',
6 | devServer: {
7 | inline: true,
8 | contentBase: './src',
9 | port: 3000
10 | },
11 | module: {
12 | loaders : [
13 | {
14 | test: /\.js$/,
15 | exclude: /(node_modules)/,
16 | loader: 'babel',
17 | query: {
18 | presets: ['react', 'es2015']
19 | }
20 | },
21 | {
22 | test: /\.scss/,
23 | loader: 'style-loader!css-loader!sass-loader'
24 | }
25 | ]
26 | },
27 | devtool: 'cheap-module-eval-source-map',
28 | output: {
29 | path: 'src',
30 | filename: 'js/bundle.min.js'
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Overview
4 |
5 | Source code and project files from thenewboston React-Router tutorial.
6 |
7 | ## Getting Started
8 |
9 | To get started, first install all the necessary dependencies.
10 | ```
11 | > npm install
12 | ```
13 |
14 | Run an initial webpack build
15 | ```
16 | > webpack
17 | ```
18 |
19 | Start the development server (changes will now update live in browser)
20 | ```
21 | > npm run start
22 | ```
23 |
24 | To view your project, go to: [http://localhost:3000/](http://localhost:3000/)
25 |
26 | ## Links
27 |
28 | - [Donate](https://www.patreon.com/thenewboston)
29 | - [thenewboston.com](https://thenewboston.com/)
30 | - [Facebook](https://www.facebook.com/TheNewBoston-464114846956315/)
31 | - [Twitter](https://twitter.com/bucky_roberts)
32 | - [Google+](https://plus.google.com/+BuckyRoberts)
33 | - [reddit](https://www.reddit.com/r/thenewboston/)
34 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/charts/_bar.scss:
--------------------------------------------------------------------------------
1 | @import "../variables";
2 |
3 | $width: 130px;
4 | $row-height: 34px;
5 | $line-color: #e2e2e2;
6 |
7 | dl {
8 | display: flex;
9 | flex-direction: column;
10 | position: relative;
11 |
12 | .chart-row {
13 | background: repeating-linear-gradient(to right, $line-color, $line-color 1px, transparent 1px, transparent 5%);
14 | border-right: 1px solid $line-color;
15 | margin-left: $width + 20;
16 | padding: 2px 0;
17 |
18 | .label {
19 | align-items: center;
20 | display: flex;
21 | height: $row-height;
22 | justify-content: flex-end;
23 | left: 0;
24 | position: absolute;
25 | width: $width;
26 | }
27 |
28 | .bar{
29 | background-color: $success;
30 | display: block;
31 | height: $row-height - 4;
32 | position: relative;
33 |
34 | &:hover, &:focus {
35 | background-color: $success * 0.8;
36 | cursor: pointer;
37 | }
38 | }
39 |
40 | }
41 |
42 | }
43 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_pricing_tables.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | $pricing-border: #bbb;
4 |
5 | .pricing-table {
6 | background-color: #f6f6f6;
7 | margin: 0 10px;
8 |
9 | & > * {
10 | padding: 10px;
11 | text-align: center;
12 | }
13 |
14 | .header{
15 | background-color: $primary-light;
16 |
17 | .title{
18 | color: white;
19 | display: block;
20 | font-size: 1.75em;
21 | font-weight: 300;
22 | }
23 |
24 | .sub-title {
25 | color: #ddd;
26 | display: block;
27 | font-weight: 300;
28 | }
29 | }
30 |
31 | .content, .footer {
32 | border-left: 1px solid $pricing-border;
33 | border-right: 1px solid $pricing-border;
34 | }
35 |
36 | .content {
37 |
38 | ul{
39 | color: #444;
40 | line-height: 1.6em;
41 | margin: 0;
42 | padding: 0;
43 |
44 | li{
45 | list-style-type: none;
46 | }
47 | }
48 | }
49 |
50 | .footer {
51 | border-bottom: 1px solid $pricing-border;
52 | border-top: 1px solid $pricing-border;
53 | }
54 |
55 | }
56 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_modal.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | $modal-border: #cccccc;
4 |
5 | .modal {
6 | display: none;
7 | position: fixed;
8 | z-index: 1;
9 | left: 0;
10 | top: 0;
11 | width: 100%;
12 | height: 100%;
13 | overflow: auto;
14 | background-color: rgba(0, 0, 0, 0.4);
15 |
16 | .content {
17 | background-color: #fefefe;
18 | margin: 15% auto;
19 | border: 1px solid $modal-border;
20 | width: 80%;
21 |
22 | &-heading{
23 | border-bottom: 1px solid $modal-border;
24 | display: flex;
25 | padding: 6px 10px 10px;
26 |
27 | .title{
28 | font-weight: 700;
29 | padding-top: 10px;
30 | }
31 |
32 | .close {
33 | align-self: flex-end;
34 | border: 1px solid #dddddd;
35 | color: #bbbbbb;
36 | margin-left: auto;
37 | padding: 0 8px 2px 8px;
38 |
39 | &:hover, &:focus {
40 | background-color: #eee;
41 | text-decoration: none;
42 | cursor: pointer;
43 | }
44 |
45 | }
46 | }
47 |
48 | &-body{
49 | padding: 10px;
50 | }
51 |
52 | }
53 |
54 | }
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-lessons",
3 | "version": "1.0.1",
4 | "description": "Boilerplate for React webpack build.",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "webpack",
8 | "start": "webpack-dev-server"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/buckyroberts/React-Webpack.git"
13 | },
14 | "author": "",
15 | "license": "ISC",
16 | "bugs": {
17 | "url": "https://github.com/buckyroberts/React-Webpack/issues"
18 | },
19 | "homepage": "https://github.com/buckyroberts/React-Webpack#readme",
20 | "dependencies": {
21 | "babel-core": "^6.10.4",
22 | "babel-loader": "^6.2.4",
23 | "babel-preset-es2015": "^6.9.0",
24 | "babel-preset-react": "^6.5.0",
25 | "css-loader": "^0.23.1",
26 | "node-sass": "^3.8.0",
27 | "react": "^15.1.0",
28 | "react-dom": "^15.1.0",
29 | "react-router": "^2.5.2",
30 | "sass-loader": "^3.2.2",
31 | "style-loader": "^0.13.1",
32 | "webpack": "^1.13.1",
33 | "webpack-dev-server": "^1.14.1"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/dev/scss/themes/default/_variables.scss:
--------------------------------------------------------------------------------
1 | $default: #7f8c8d;
2 | $danger: #c0392b;
3 | $info: #8e44ad;
4 | $primary: #2c3e50;
5 | $secondary: #2980b9;
6 | $success: #27ae60;
7 | $warning: #d35400;
8 |
9 | $default-light: #95a5a6;
10 | $danger-light: #e74c3c;
11 | $info-light: #9b59b6;
12 | $primary-light: #34495e;
13 | $secondary-light: #3498db;
14 | $success-light: #2ecc71;
15 | $warning-light: #e67e22;
16 |
17 | $theme-colors:
18 | (default, $default),
19 | (danger, $danger),
20 | (info, $info),
21 | (primary, $primary),
22 | (secondary, $secondary),
23 | (success, $success),
24 | (warning, $warning);
25 |
26 | $theme-colors-light:
27 | (default-light, $default-light),
28 | (danger-light, $danger-light),
29 | (info-light, $info-light),
30 | (primary-light, $primary-light),
31 | (secondary-light, $secondary-light),
32 | (success-light, $success-light),
33 | (warning-light, $warning-light);
34 |
35 | $font-default: 13px/1.4 'Roboto', sans-serif;
36 |
37 | $font-weights:
38 | (thin, 100),
39 | (light, 300),
40 | (normal, 400),
41 | (medium, 500),
42 | (bold, 700),
43 | (black, 900);
--------------------------------------------------------------------------------
/dev/scss/_grid.scss:
--------------------------------------------------------------------------------
1 | .demo-container{
2 | background-color: #eee;
3 | border: 2px solid lightcoral;
4 | margin: 15px;
5 | }
6 |
7 | .demo-item{
8 | background: deepskyblue;
9 | color: white;
10 | line-height: 50px;
11 | font-weight: 600;
12 | text-align: center;
13 | }
14 |
15 | // Default styling
16 | .container {
17 | display: flex;
18 | flex-wrap: wrap;
19 |
20 | .col-sm{
21 | @for $i from 1 through 12 {
22 | &-#{$i} {
23 | width: 100%;
24 | }
25 | }
26 | }
27 |
28 | .col-md{
29 | @for $i from 1 through 12 {
30 | &-#{$i} {
31 | width: 100%;
32 | }
33 | }
34 | }
35 |
36 | .col-lg{
37 | @for $i from 1 through 12 {
38 | &-#{$i} {
39 | width: 100%;
40 | }
41 | }
42 | }
43 |
44 | }
45 |
46 | // Phones (small)
47 | @media (min-width: 0px) {
48 | .container{
49 | .col-sm{
50 | @for $i from 1 through 12 {
51 | &-#{$i} {
52 | width: $i / 12 * 100%;
53 | }
54 | }
55 | }
56 | }
57 | }
58 |
59 | // Tablets (medium)
60 | @media (min-width: 768px) {
61 | .container{
62 | .col-md{
63 | @for $i from 1 through 12 {
64 | &-#{$i} {
65 | width: $i / 12 * 100%;
66 | }
67 | }
68 | }
69 | }
70 | }
71 |
72 | // Desktops (large)
73 | @media (min-width: 1024px) {
74 | .container{
75 | .col-lg{
76 | @for $i from 1 through 12 {
77 | &-#{$i} {
78 | width: $i / 12 * 100%;
79 | }
80 | }
81 | }
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/dev/js/components/Blog.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {browserHistory} from 'react-router'
3 |
4 | export default class Blog extends React.Component {
5 |
6 | handleSubmit(e) {
7 | e.preventDefault();
8 | const category = e.target.elements[0].value;
9 | const title = e.target.elements[1].value;
10 | const url = `/blog/${category}/${title}`;
11 | console.log(url);
12 | browserHistory.push(url);
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
Category: {this.props.params.category}
19 |
Title: {this.props.params.title}
20 |
21 |
39 |
40 |