Skip to content

Commit

Permalink
themes addon (#1768)
Browse files Browse the repository at this point in the history
  • Loading branch information
@uifortdev @TheSharpieOne
uifortdev authored and TheSharpieOne committed Jan 27, 2020
1 parent ba6cd4c commit 1fec610
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 143 deletions.
165 changes: 83 additions & 82 deletions docs/lib/Home/index.js
View file
Expand Up @@ -8,100 +8,101 @@ const importBasic = require('!!raw-loader!../examples/import-basic');

export default () => {
return (
<div>
<Jumbotron tag="section" className="jumbotron-header text-center mb-3">
<div>
<Jumbotron tag="section" className="jumbotron-header text-center mb-3">
<Container>
<Row>
<Col>
<p className="lead">
<img src="/assets/logo.png" alt="" width="150px" />
</p>
<h1 className="jumbotron-heading display-4">reactstrap</h1>
<p className="lead">
Easy to use React Bootstrap 4 components
</p>
<p>
<Button outline color="danger" href="https://github.com/reactstrap/reactstrap">GitHub</Button>
<Button color="danger" className="mr-3" tag={Link} to="/components/">Components</Button>
<Button color="primary" tag={Link} to="/premium-themes/">Premium Themes</Button>
</p>
</Col>
</Row>
</Container>
</Jumbotron>
<Container>
<Row>
<Col>
<p className="lead">
<img src="/assets/logo.png" alt="" width="150px" />
</p>
<h1 className="jumbotron-heading display-4">reactstrap</h1>
<p className="lead">
Easy to use React Bootstrap 4 components
</p>
<p>
<Button outline color="danger" href="https://github.com/reactstrap/reactstrap">GitHub</Button>
<Button color="danger" tag={Link} to="/components/">Components</Button>
</p>
</Col>
</Row>
</Container>
</Jumbotron>
<Container>
<Row className="justify-content-sm-center">
<Col sm={8} className="docSearch-content">
<h2>Installation</h2>
<hr />
<h3 className="mt-5">NPM</h3>
<p>Install reactstrap and peer dependencies via NPM</p>
<pre>
<Row className="justify-content-sm-center">
<Col sm={8} className="docSearch-content">
<h2>Installation</h2>
<hr />
<h3 className="mt-5">NPM</h3>
<p>Install reactstrap and peer dependencies via NPM</p>
<pre>
<PrismCode className="language-bash">npm install --save reactstrap react react-dom</PrismCode>
</pre>
<p>Import the components you need</p>
<div className="docs-example">
<Example />
</div>
<pre>
<p>Import the components you need</p>
<div className="docs-example">
<Example />
</div>
<pre>
<PrismCode className="language-jsx">
{importBasic}
</PrismCode>
</pre>
<h3 className="mt-5">Getting Started with Create React App</h3>
<p>Follow the <a href="https://facebook.github.io/create-react-app/docs/getting-started" target="_blank">Create React App instructions</a> and then follow the <a href="https://facebook.github.io/create-react-app/docs/adding-bootstrap" target="_blank">Adding Bootstrap instructions</a>.</p>
<h4>tl;dr</h4>
<pre>
<h3 className="mt-5">Getting Started with Create React App</h3>
<p>Follow the <a href="https://facebook.github.io/create-react-app/docs/getting-started" target="_blank">Create React App instructions</a> and then follow the <a href="https://facebook.github.io/create-react-app/docs/adding-bootstrap" target="_blank">Adding Bootstrap instructions</a>.</p>
<h4>tl;dr</h4>
<pre>
<PrismCode className="language-bash">
{`npx create-react-app my-app
cd my-app
npm start`}
</PrismCode>
</pre>
<p>
Then open <a href="http://localhost:3000/" target="_blank">http://localhost:3000/</a> to see your app. The initial structure of your app is setup. Next, let's add reactstrap and bootstrap.
</p>
<h4>Adding Bootstrap</h4>
<p>Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:</p>
<pre>
<p>
Then open <a href="http://localhost:3000/" target="_blank">http://localhost:3000/</a> to see your app. The initial structure of your app is setup. Next, let's add reactstrap and bootstrap.
</p>
<h4>Adding Bootstrap</h4>
<p>Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:</p>
<pre>
<PrismCode className="language-bash">
{`npm install --save bootstrap
npm install --save reactstrap react react-dom`}
</PrismCode>
</pre>
<p>Import Bootstrap CSS in the <code>src/index.js</code> file:</p>
<pre>
<p>Import Bootstrap CSS in the <code>src/index.js</code> file:</p>
<pre>
<PrismCode className="language-bash">import 'bootstrap/dist/css/bootstrap.min.css';</PrismCode>
</pre>
<p>Import required reactstrap components within <code>src/App.js</code> file or your custom component files:</p>
<pre>
<p>Import required reactstrap components within <code>src/App.js</code> file or your custom component files:</p>
<pre>
<PrismCode className="language-bash">
{`import { Button } from 'reactstrap';`}
</PrismCode>
</pre>
<p>Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example <a href="https://gist.github.com/Thomas-Smyth/006fd507a7295f17a8473451938f9935" target="_blank"><code>App.js</code></a> redone using reactstrap.</p>
<h2 className="mt-5">CDN</h2>
<p>Reactstrap can be included directly in your application's bundle or excluded during compilation and linked directly to a CDN.</p>
<pre>
<p>Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example <a href="https://gist.github.com/Thomas-Smyth/006fd507a7295f17a8473451938f9935" target="_blank"><code>App.js</code></a> redone using reactstrap.</p>
<h2 className="mt-5">CDN</h2>
<p>Reactstrap can be included directly in your application's bundle or excluded during compilation and linked directly to a CDN.</p>
<pre>
<PrismCode className="language-jsx">
https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js
</PrismCode>
</pre>
<blockquote className="blockquote">
<p>
<strong>Note</strong>: When using the external CDN library, be sure to include the required dependencies as necessary <strong>prior</strong> to the Reactstrap library:
</p>
<ul>
<li><a href="//cdnjs.com/libraries/react" target="_blank">React</a></li>
<li><a href="//unpkg.com/react-transition-group/dist/react-transition-group.min.js" target="_blank">ReactTransitionGroup</a></li>
</ul>
</blockquote>
<p>Check out the demo <a href="http://output.jsbin.com/dimive/latest">here</a></p>
<h2 className="mt-5">About the Project</h2>
<hr />
<p>This library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, <a href="https://popper.js.org/">https://popper.js.org/</a> via <a href="https://github.com/souporserious/react-popper">https://github.com/souporserious/react-popper</a> is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.</p>
<p>There are a few core concepts to understand in order to make the most out of this library.</p>
<p>1) Your content is expected to be composed via props.children rather than using named props to pass in Components.</p>
<pre>
<blockquote className="blockquote">
<p>
<strong>Note</strong>: When using the external CDN library, be sure to include the required dependencies as necessary <strong>prior</strong> to the Reactstrap library:
</p>
<ul>
<li><a href="//cdnjs.com/libraries/react" target="_blank">React</a></li>
<li><a href="//unpkg.com/react-transition-group/dist/react-transition-group.min.js" target="_blank">ReactTransitionGroup</a></li>
</ul>
</blockquote>
<p>Check out the demo <a href="http://output.jsbin.com/dimive/latest">here</a></p>
<h2 className="mt-5">About the Project</h2>
<hr />
<p>This library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, <a href="https://popper.js.org/">https://popper.js.org/</a> via <a href="https://github.com/souporserious/react-popper">https://github.com/souporserious/react-popper</a> is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.</p>
<p>There are a few core concepts to understand in order to make the most out of this library.</p>
<p>1) Your content is expected to be composed via props.children rather than using named props to pass in Components.</p>
<pre>
<PrismCode className="language-jsx">
{`// Content passed in via props
const Example = (props) => {
Expand All @@ -123,21 +124,21 @@ const PreferredExample = (props) => {
}`}
</PrismCode>
</pre>
<p>
2) Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like popperjs), or automatically include non-content based elements.
</p>
<p>Examples:</p>
<ul>
<li><code>isOpen</code> - current state for items like dropdown, popover, tooltip</li>
<li><code>toggle</code> - callback for toggling isOpen in the controlling component</li>
<li><code>color</code> - applies color classes, ex: <code>{'<Button color="danger"/>'}</code></li>
<li><code>size</code> for controlling size classes. ex: <code>{'<Button size="sm"/>'}</code></li>
<li><code>tag</code> - customize component output by passing in an element name or Component</li>
<li>boolean based props (attributes) when possible for alternative style classes or sr-only content</li>
</ul>
</Col>
</Row>
</Container>
</div>
<p>
2) Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like popperjs), or automatically include non-content based elements.
</p>
<p>Examples:</p>
<ul>
<li><code>isOpen</code> - current state for items like dropdown, popover, tooltip</li>
<li><code>toggle</code> - callback for toggling isOpen in the controlling component</li>
<li><code>color</code> - applies color classes, ex: <code>{'<Button color="danger"/>'}</code></li>
<li><code>size</code> for controlling size classes. ex: <code>{'<Button size="sm"/>'}</code></li>
<li><code>tag</code> - customize component output by passing in an element name or Component</li>
<li>boolean based props (attributes) when possible for alternative style classes or sr-only content</li>
</ul>
</Col>
</Row>
</Container>
</div>
);
};
55 changes: 55 additions & 0 deletions docs/lib/PremiumThemes/index.js
View file
@@ -0,0 +1,55 @@
import React from 'react';
import { Card, Button, CardBody, CardHeader, Container, Row, Col, Jumbotron } from 'reactstrap';

export default () => {
return (
<div>
<Jumbotron tag="section" className="jumbotron-header text-center mb-3">
<p className="lead">
<img src="/assets/logo.png" alt="" width="110px"/>
</p>
<h1>Reactstrap Themes & Templates</h1>
<h4 className="mb-5">A collection of free and premium React templates and themes powered by Reactstrap</h4>
</Jumbotron>
<Container>
<h2 className="font-weight-bold">
UiFort
</h2>
<p className="mb-4">Check out some examples that our partners from UiFort created using the Reactstrap components library.</p>
<Row>
<Col md="7">
<Card>
<CardHeader className="p-3">
<h5 className="m-0 font-weight-bold">
<a href="https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io" target="_blank" title="View details">
Bamburgh React Admin Dashboard with Reactstrap PRO
</a>
</h5>
<p className="mb-0 mt-1 text-muted">
Premium React Admin Template
</p>
</CardHeader>
<CardBody className="p-3">
<a href="https://uifort.com/template/bamburgh-react-admin-dashboard-reactstrap-pro/?ref=reactstrap.github.io" target="_blank" title="View details">
<img className="rounded img-fluid" src="/assets/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg" alt=""/>
</a>
</CardBody>
</Card>
</Col>
<Col md="5">
<Card className="h-100 mt-3 mt-lg-0 d-flex justify-content-center align-items-center text-muted">
<div>
More themes will be added soon !
</div>
</Card>
</Col>
</Row>
<div className="text-center mt-5">
<Button tag="a" size="lg" href="https://uifort.com" color="primary">
See more themes from UiFort
</Button>
</div>
</Container>
</div>
);
};
47 changes: 25 additions & 22 deletions docs/lib/UI/Nav.js
View file
Expand Up @@ -20,28 +20,31 @@ export default class UINav extends React.Component {
}
render() {
return (
<Navbar className="header" color="faded" light expand="md">
<Container>
<NavbarBrand className="mr-auto" tag={Link} to="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} />
<Collapse navbar isOpen={this.state.showNavbar}>
<Nav navbar className="ml-sm-auto">
<NavItem>
<DocSearch />
</NavItem>
<NavItem>
<NavLink tag={Link} to="/components/" activeClassName="active">Components</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/utilities/" activeClassName="active">Utilities</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
<Navbar className="header" color="faded" light expand="md">
<Container>
<NavbarBrand className="mr-auto" tag={Link} to="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} />
<Collapse navbar isOpen={this.state.showNavbar}>
<Nav navbar className="ml-sm-auto">
<NavItem>
<DocSearch />
</NavItem>
<NavItem>
<NavLink tag={Link} to="/components/" activeClassName="active">Components</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/utilities/" activeClassName="active">Utilities</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<NavItem>
<NavLink className="font-weight-bold" tag={Link} to="/premium-themes/" activeClassName="active">Premium Themes</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
}

0 comments on commit 1fec610

Please sign in to comment.