👶

Bebe Styled

Feature · Report

Navigation

• Navigation
• Get started
• Included
• Documentation
• License

Get started

npm i bebe-styled

Included

bebe-styled/
└── src/
    ├── Col/
    │   ├── Col.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Collapse/
    │   ├── Collapse.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Container/
    │   ├── Container.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Image/
    │   ├── Image.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Modal/
    │   ├── Modal.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Nav/
    │   ├── Nav.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Navbar/
    │   ├── Navbar.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── NavbarBrand/
    │   ├── NavbarBrand.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── NavbarToggler/
    │   ├── NavbarToggler.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── NavItem/
    │   ├── NavItem.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── NavLink/
    │   ├── NavLink.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── Row/
    │   ├── Row.js
    |   ├── index.js
    |   ├── StyledComponents.js
    ├── index.js

Documentation

Col

the column goes from 1 to 12, and the container has a maximum of 960px.

Example

  <Container>
    <Row>
      <Col col="1">col1</Col>
      <Col col="11">col11</Col>
    </Row>
  </Container>

-- Col1 -- | ---------------------- Col11 ----------------------

---- Col2 ---- | -------------------- Col10 --------------------

------ Col3 ------ | ------------------ Col09 ------------------

-------- Col4 -------- | ---------------- Col08 ----------------

---------- Col5 ---------- | -------------- Col07 --------------

------------ Col6 -------------- | ------------ Col6 ------------

Collapse

Example

  <Collapse>

  </Collapse>

Container

Container by default have 90%

  <Container>
    <!-- Content -->
  </Container>

Using the "full" props the container will have 100%

!  <Container full>
    <!-- Content -->
  </Container>

Nav

Example

  <Nav>

  </Nav>

Navbar

Example

  <Navbar>

  </Navbar>

NavbarBrand

Example

  <Navbar>
    <NavbarBrand href="">link</NavbarBrand>
  </Navbar>

License

MIT License