Skip to content

Commit 2db6989

Browse files
luisFilipePTtaion
luisFilipePT
authored and
taion
committed
docs(Code-sand-box examples): Add a code-sand-box example for using Sass with custom theming (#35)
1 parent f6b3d42 commit 2db6989

File tree

10 files changed

+10507
-0
lines changed

10 files changed

+10507
-0
lines changed

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ The repository for React-Bootstrap's [CodeSandbox](https://codesandbox.io/) exam
99
- [Basic Example](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic) - Just a simple create-react-app setup with React-Bootstrap components.
1010
- [Basic Example CDN](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-cdn) - Another simple create-react-app setup, this time including the Bootstrap CSS via CDN link.
1111
- [Basic Example with Typescript](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-ts) - Another simple create-react-app setup, this time by using Typescript
12+
- [Basic Example with Sass and custom theming](https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic-sass-custom-theming) - Another simple create-react-app setup, this time by using Sass with custom theming

Diff for: ‎basic-sass-custom-theming/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Basic Example using Sass with custom theming
2+
3+
A simple [create-react-app](CRA-README.md) setup, showcasing the use of a Sass with custom theming on React-Bootstrap components!

Diff for: ‎basic-sass-custom-theming/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "code-sandbox-examples",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"bootstrap": "^4.3.1",
7+
"node-sass": "^4.12.0",
8+
"react": "^16.9.0",
9+
"react-bootstrap": "^1.0.0-beta.12",
10+
"react-dom": "^16.9.0",
11+
"react-scripts": "3.1.1"
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test",
17+
"eject": "react-scripts eject"
18+
},
19+
"eslintConfig": {
20+
"extends": "react-app"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

Diff for: ‎basic-sass-custom-theming/public/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>React-Bootstrap CodeSandbox Starter</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
</html>

Diff for: ‎basic-sass-custom-theming/src/App.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useState } from "react";
2+
3+
import Jumbotron from "react-bootstrap/Jumbotron";
4+
import Container from "react-bootstrap/Container";
5+
import Button from "react-bootstrap/Button";
6+
import Alert from "react-bootstrap/Alert";
7+
8+
function AlertDismissibleExample() {
9+
const [show, setShow] = useState(false);
10+
11+
if (show) {
12+
return (
13+
<Alert variant="danger" onClose={() => setShow(false)} dismissible>
14+
<Alert.Heading>I am an alert of type <span className="dangerText">danger</span>! But my color is Teal!</Alert.Heading>
15+
<p>
16+
By the way the button you just clicked is an <span className="infoText">Info</span> button but is using the color Tomato.
17+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
18+
Accusantium debitis deleniti distinctio impedit officia reprehenderit suscipit voluptatibus. Earum, nam necessitatibus!
19+
</p>
20+
</Alert>
21+
);
22+
}
23+
return <Button variant="info" onClick={() => setShow(true)}>Show Custom Styled Alert</Button>;
24+
}
25+
26+
const App = () => (
27+
<Container className="p-3">
28+
<Jumbotron className="pb-1">
29+
<h1 className="header">Welcome To React-Bootstrap</h1>
30+
<h2 className="header">Using Sass with custom theming</h2>
31+
<AlertDismissibleExample />
32+
<hr/>
33+
<p>
34+
You can check further in information on the official Bootstrap docs <a href="https://getbootstrap.com/docs/4.3/getting-started/theming/#importing" target="_blank">here</a>.
35+
</p>
36+
</Jumbotron>
37+
</Container>
38+
);
39+
40+
export default App;

Diff for: ‎basic-sass-custom-theming/src/App.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import "custom";
2+
3+
.header {
4+
text-align: center;
5+
}
6+
7+
span {
8+
&.dangerText {
9+
color: #dc3545;
10+
}
11+
12+
&.infoText {
13+
color: #17a2b8;
14+
font-weight: bold;
15+
}
16+
}

Diff for: ‎basic-sass-custom-theming/src/App.test.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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(<App />, div);
8+
ReactDOM.unmountComponentAtNode(div);
9+
});

Diff for: ‎basic-sass-custom-theming/src/custom.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* make the customizations */
2+
$theme-colors: (
3+
"info": tomato,
4+
"danger": teal
5+
);
6+
7+
/* import bootstrap to set changes */
8+
@import "../node_modules/bootstrap/scss/bootstrap";

Diff for: ‎basic-sass-custom-theming/src/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
// Importing Sass with Bootstrap CSS
6+
import "./App.scss";
7+
8+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)