ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive design with Bootstrap

Browse Source
This commit is contained in:
Federico Kereki
2018-07-18 11:53:53 -03:00
parent 82eca78b69
commit 0d197ac095
12 changed files with 102 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter07/package-lock.json
Generated
+6
View File
@@ -3161,6 +3161,12 @@
"hoek": "2.x.x"
}
},
"bootstrap": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.2.tgz",
"integrity": "sha512-3bP609EdMc/8EwgGp8KgpN8HwnR4V4lZ9CTi5pImMrXNxpkw7dK1B05aMwQWpG1ZWmTLlBSN/uzkuz5GsmQNFA==",
"dev": true
},
"bowser": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.3.tgz",
chapter07/package.json
+1
View File
@@ -25,6 +25,7 @@
"react-app-rewired": "^1.5.2"
},
"dependencies": {
"bootstrap": "^4.1.2",
"color": "^3.0.0",
"i18next": "^11.3.6",
"i18next-browser-languagedetector": "^2.2.0",
chapter07/src/App.1.js
+28
View File
@@ -0,0 +1,28 @@
/* @flow */
import React, { Component } from "react";
class App extends Component<{}> {
render() {
const cl = "border border-dark p-2 bg-warning ";
return (
<div className="container mw-100">
<div className="row border">
<div className={cl + "col-sm-2 col-md-6"}>2/6</div>
<div className={cl + "col-sm-4"}>4</div>
<div className={cl + "col-sm-1"}>1</div>
<div className={cl + "col-sm-1"}>1</div>
<div className={cl + "col-sm-1"}>1</div>
<div className={cl + "col-sm-1 col-md-5"}>1/5</div>
<div className={cl + "col-sm-2 "}>2</div>
<div className={cl + "col-sm-7 col-md-3"}>7/3</div>
<div className={cl + "col-sm-4 "}>4</div>
<div className={cl + "col-sm-1 col-md-3"}>1/3</div>
</div>
</div>
);
}
}
export default App;
chapter07/src/App.2.js
+31
View File
@@ -0,0 +1,31 @@
/* @flow */
import React, { Component } from "react";
class App extends Component<{}> {
render() {
const cl = "border border-dark p-2 bg-warning ";
const ch = "border border-dark p-2 bg-dark text-white ";
return (
<div className="container mw-100">
<div className="row border">
<div className={cl + "col-sm-2 col-md-6"}>2/6</div>
<div className={cl + "col-sm-4"}>4</div>
<div className={cl + "col-sm-1"}>1</div>
<div
className={
ch + "col-sm-1 order-sm-first order-md-last"
}
>
1
</div>
<div className={cl + "col-sm-1 col-md-5"}>1/5</div>
<div className={cl + "col-sm-3 "}>3</div>
</div>
</div>
);
}
}
export default App;
chapter07/src/App.3.js
+33
View File
@@ -0,0 +1,33 @@
/* @flow */
import React, { Component } from "react";
class App extends Component<{}> {
render() {
const cl = "border border-dark p-2 bg-warning ";
const ch = "border border-dark p-2 bg-dark text-white ";
return (
<div className="container mw-100">
<div className="row border">
<div className={cl + "col-sm-2 col-md-6"}>2/6</div>
<div className={ch + "d-none d-sm-block col-sm-4"}>
0/4
</div>
<div className={cl + "col-sm-2"}>2</div>
<div className={cl + "col-sm-2"}>2</div>
<div className={cl + "col-sm-1 col-md-5"}>1/5</div>
<div className={cl + "col-sm-3 "}>3</div>
<div className={ch + "col-sm-7 "}>
<div>TOP</div>
<div className="d-none d-sm-block">(MIDDLE)</div>
<div>BOTTOM</div>
</div>
<div className={cl + "col-sm-4 "}>4</div>
</div>
</div>
);
}
}
export default App;
chapter07/src/App.css
-24
View File
@@ -1,24 +0,0 @@
.App {
text-align: center; }
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px; }
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: green; }
.App-title {
font-size: 1.5em; }
.App-intro {
font-size: large; }
@keyframes App-logo-spin {
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }
chapter07/src/App.js
-26
View File
@@ -1,26 +0,0 @@
/* @flow */
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
type Props = {};
class App extends Component<Props> {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save
to reload.
</p>
</div>
);
}
}
export default App;
chapter07/src/App.scss
-34
View File
@@ -1,34 +0,0 @@
$micolor: green;
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: $micolor;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
chapter07/src/App.test.js
-9
View File
@@ -1,9 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
chapter07/src/index.css
-4
View File
@@ -1,4 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif; }
chapter07/src/index.js
+3 -2
View File
@@ -1,8 +1,9 @@
import React from "react";
import ReactDOM from "react-dom";
import "./App.scss";
import App from "./App";
import App from "./App.3";
import registerServiceWorker from "./registerServiceWorker";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();
chapter07/src/index.scss
-8
View File
@@ -1,8 +0,0 @@
$font-stack: Helvetica, sans-serif;
$real-margin: 0;
body {
margin: $real-margin;
padding: 0;
font-family: $font-stack;
}