Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

documentation #266

Merged
merged 43 commits into from
Sep 22, 2020
Merged

documentation #266

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
f04283b
documentation
Quadrisheriff Jul 6, 2020
120a885
Update card.md
Quadrisheriff Jul 7, 2020
a1b64cd
Update tiles.md
Quadrisheriff Jul 7, 2020
a1a3b1a
Update box.md
Quadrisheriff Jul 7, 2020
8f7ae6b
Update card.md
Quadrisheriff Jul 7, 2020
f90ed0a
Update content.md
Quadrisheriff Jul 7, 2020
334610c
Update media.md
Quadrisheriff Jul 7, 2020
9f8de3c
new
Quadrisheriff Jul 14, 2020
68d42b4
Update gap.md
Quadrisheriff Jul 15, 2020
0abaf90
Update nesting.md
Quadrisheriff Jul 15, 2020
d1de4eb
Update options.md
Quadrisheriff Jul 15, 2020
4a43c91
Update responsiveness.md
Quadrisheriff Jul 15, 2020
384ee32
Update card.md
Quadrisheriff Jul 15, 2020
f6e4423
Update dropdown.md
Quadrisheriff Jul 15, 2020
a3ea8ec
Update menu.md
Quadrisheriff Jul 15, 2020
ed1bf37
Update message.md
Quadrisheriff Jul 15, 2020
a764cf2
Update navbar.md
Quadrisheriff Jul 15, 2020
c96e6c2
Update pagination.md
Quadrisheriff Jul 15, 2020
137b030
Update panel.md
Quadrisheriff Jul 15, 2020
b68d879
Update tabs.md
Quadrisheriff Jul 15, 2020
0540658
Update box.md
Quadrisheriff Jul 15, 2020
040fb6f
Update button.md
Quadrisheriff Jul 15, 2020
42f0883
Update icon.md
Quadrisheriff Jul 15, 2020
855c9a3
Update notification.md
Quadrisheriff Jul 15, 2020
9a460d5
Update progress-bar.md
Quadrisheriff Jul 15, 2020
7f6b388
Update tag.md
Quadrisheriff Jul 15, 2020
b711be1
Update container.md
Quadrisheriff Jul 15, 2020
c485e1a
Update level.md
Quadrisheriff Jul 15, 2020
2790371
new
Quadrisheriff Jul 15, 2020
9a521d6
new
Quadrisheriff Jul 17, 2020
1ab9213
new
Quadrisheriff Jul 17, 2020
3051c9c
Tidy up code
kennethnym Jul 24, 2020
4692b6b
Update column size documentation
kennethnym Jul 24, 2020
8f62b0c
Fix small typo in column size doc
kennethnym Jul 24, 2020
db3e7c5
Update column responsiveness doc
kennethnym Aug 2, 2020
0b57900
Update column nesting doc
kennethnym Aug 2, 2020
1391029
Accidentally removed Section import in column nesting doc
kennethnym Aug 2, 2020
20a7757
Add missing code example in column responsiveness doc
kennethnym Aug 2, 2020
dd8b45c
Update column gap doc
kennethnym Aug 2, 2020
bd15643
Update column options doc
kennethnym Aug 2, 2020
18b119d
Update column basics doc
kennethnym Aug 2, 2020
c700a8e
Update container doc
kennethnym Aug 12, 2020
df3c830
Update level doc
kennethnym Aug 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions documentation/docs/components/columns/basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ sidebar_label: Basics
import Columns from 'react-bulma-components/lib/components/columns'
import Hero from 'react-bulma-components/lib/components/hero'

---
## **Import**
```js
import Columns from 'react-bulma-components/lib/components/columns'
```

---
---
You can build columns very easily:

1. Add a `<Columns />` component
Expand Down Expand Up @@ -46,6 +54,7 @@ All `<Column />`s will be equally sized.
</Columns.Column>
</Columns>
```
---

## Official documentation

Expand Down
101 changes: 101 additions & 0 deletions documentation/docs/components/columns/gap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,106 @@ title: Gap
sidebar_label: Gap
---

import Columns from 'react-bulma-components/lib/components/columns'
import Hero from 'react-bulma-components/lib/components/hero'
import Section from 'react-bulma-components/lib/components/section';

---
## **Import**

```js
import Columns from 'react-bulma-components/lib/components/columns'
```

---
---


## **Examples**
<Section>
<Columns
variableGap={{
mobile: 1,
tablet: 0,
desktop: 3,
widescreen: 8,
fullhd: 2,
}}
>
<Columns.Column size={3}>
<Hero color="dark">Size 1</Hero>
</Columns.Column>
<Columns.Column size={3}>
<Hero color="light">Size 1</Hero>
</Columns.Column>
<Columns.Column size={3}>
<Hero color="white">Size 1</Hero>
</Columns.Column>
<Columns.Column size={3}>
<Hero color="danger">Size 1</Hero>
</Columns.Column>
</Columns>
kennethnym marked this conversation as resolved.
Show resolved Hide resolved
</Section>

```jsx
<Columns
variableGap={{
mobile: 1,
tablet: 0,
desktop: 3,
widescreen: 8,
fullhd: 2,
}}
>
kennethnym marked this conversation as resolved.
Show resolved Hide resolved
<Columns.Column size={3}>
<Hero color="dark">Size 1</Hero>
</Columns.Column>
<Columns.Column size={3}>
<Hero color="light">Size 1</Hero>
</Columns.Column>
<Columns.Column size={3}>
<Hero color="white">Size 1</Hero>
</Columns.Column>
<Columns.Column size={3}>
<Hero color="danger">Size 1</Hero>
</Columns.Column>
</Columns>

```


### **Gapless**

<Section>
<Columns gapless>
<Columns.Column>
<Hero color="success">First Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="info">Middle Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="warning">Last Column</Hero>
</Columns.Column>
</Columns>
kennethnym marked this conversation as resolved.
Show resolved Hide resolved
</Section>

```jsx
<Columns gapless>
<Columns.Column>
<Hero color="success">First Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="info">Middle Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="warning">Last Column</Hero>
</Columns.Column>
</Columns>
```

---

## Official documentation

https://bulma.io/documentation/columns/gap
79 changes: 79 additions & 0 deletions documentation/docs/components/columns/nesting.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,84 @@ title: Nesting
sidebar_label: Nesting
---

import Columns from 'react-bulma-components/lib/components/columns'
import Hero from 'react-bulma-components/lib/components/hero'
import Section from 'react-bulma-components/lib/components/section';

---
## **Import**
```js
import Columns from 'react-bulma-components/lib/components/columns'
```

---
---

## **Example**

<Section>
<Columns>
<Columns.Column size="half">
<Hero color="success">First column</Hero>
<Columns>
<Columns.Column size="one-third">
<Hero color="info">First Nested Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="warning">Second Nested Column</Hero>
</Columns.Column>
</Columns>
</Columns.Column>
<Columns.Column size="half">
<Hero color="success">Second column</Hero>
<Columns>
<Columns.Column size="half">
<Hero color="info">First Nested Column</Hero>
</Columns.Column>
<Columns.Column size="one-quarter">
<Hero color="warning">Second Nested Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="warning">Thirld Nested Column</Hero>
</Columns.Column>
</Columns>
</Columns.Column>
</Columns>
kennethnym marked this conversation as resolved.
Show resolved Hide resolved
</Section>


```jsx
<Columns>
<Columns.Column size="half">
<Hero color="success">First column</Hero>
<Columns>
<Columns.Column size="one-third">
<Hero color="info">First Nested Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="warning">Second Nested Column</Hero>
</Columns.Column>
</Columns>
</Columns.Column>
<Columns.Column size="half">
<Hero color="success">Second column</Hero>
<Columns>
<Columns.Column size="half">
<Hero color="info">First Nested Column</Hero>
</Columns.Column>
<Columns.Column size="one-quarter">
<Hero color="warning">Second Nested Column</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="warning">Thirld Nested Column</Hero>
</Columns.Column>
</Columns>
</Columns.Column>
</Columns>
```

---

## Official documentation

https://bulma.io/documentation/columns/nesting
53 changes: 53 additions & 0 deletions documentation/docs/components/columns/options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,58 @@ title: Options
sidebar_label: Options
---

import Columns from 'react-bulma-components/lib/components/columns'
import Hero from 'react-bulma-components/lib/components/hero'
import Section from 'react-bulma-components/lib/components/section';

---
## **Import**
```js
import Columns from 'react-bulma-components/lib/components/columns'
```

---
---
## **Example**

<Section>
<Columns vCentered>
<Columns.Column size={8}>
<Hero color="primary">
<p>First column</p>
</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="primary">
<p>
Second column with more content. This is so you can see the vertical
alignment.
</p>
</Hero>
</Columns.Column>
</Columns>
kennethnym marked this conversation as resolved.
Show resolved Hide resolved
</Section>

```jsx
<Columns vCentered>
<Columns.Column size={8}>
<Hero color="primary">
<p>First column</p>
</Hero>
</Columns.Column>
<Columns.Column>
<Hero color="primary">
<p>
Second column with more content. This is so you can see the vertical
alignment.
</p>
</Hero>
</Columns.Column>
</Columns>
```
---


## Official documentation

https://bulma.io/documentation/columns/options
Loading