Skip to content

Commit de96ed2

Browse files
mrholekmrholek
committed
docs: update documentation
1 parent 997bdf9 commit de96ed2

File tree

14 files changed

+227
-20
lines changed

14 files changed

+227
-20
lines changed

‎config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ params:
7070
source: "https://github.com/coreui/coreui/archive/v4.2.0.zip"
7171
dist: "https://github.com/coreui/coreui/releases/download/v4.2.0/coreui-4.2.0-dist.zip"
7272

73+
download_template:
74+
website: "https://coreui.io/product/free-bootstrap-admin-template/"
75+
7376
cdn:
7477
# See https://www.srihash.org for info on how to generate the hashes
7578
css: "https://cdn.jsdelivr.net/npm/@coreui/coreui@4.2.0/dist/css/coreui.min.css"

‎docs/content/components/header.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ When the container is within your header, its horizontal padding is removed at b
276276

277277
### CSS variables
278278

279-
Sidebars use local CSS variables on `.header` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
279+
Headers use local CSS variables on `.header` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
280280

281281
{{< scss-docs name="header-css-vars" file="scss/_header.scss" >}}
282282

‎docs/content/components/pagination.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -160,19 +160,16 @@ Or with `.justify-content-end`:
160160

161161
## Customizing
162162

163-
### SASS
163+
### CSS Variables
164164

165165
Pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
166166

167167
{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
168168

169-
### Sass variables
169+
### SASS variables
170170

171171
{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
172172

173-
### Sass mixins
173+
### SASS mixins
174174

175175
{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
176-
177-
### CSS Vars
178-
{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}

‎docs/content/customize/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ sections:
2222

2323
## Overview
2424

25-
There are multiple ways to customize Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for Bootstrap you're using, browser support, and more.
25+
There are multiple ways to customize CoreUI for Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for Bootstrap you're using, browser support, and more.
2626

2727
Our two preferred methods are:
2828

‎docs/content/getting-started/contents.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: docs
33
title: Contents
4-
description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
4+
description: Discover what's included in CoreUI, including our precompiled and source code flavors.
55
group: getting-started
66
toc: true
77
---
@@ -62,7 +62,7 @@ coreui/
6262
└── coreui.min.js.map
6363
```
6464

65-
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`coreui.*`), as well as compiled and minified CSS and JS (`coreui.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`coreui.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`coreui.bundle.js` and minified `coreui.bundle.min.js`) include [Popper](https://popper.js.org/).
65+
This is the most basic form of CoreUI: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`coreui.*`), as well as compiled and minified CSS and JS (`coreui.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`coreui.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`coreui.bundle.js` and minified `coreui.bundle.min.js`) include [Popper](https://popper.js.org/).
6666

6767
## CSS files
6868

‎docs/content/getting-started/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Many of our components require the use of JavaScript to function. Specifically,
2828

2929
#### Bundle
3030

31-
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `coreui.bundle.js` and `coreui.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-coreui" >}}) section.
31+
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `coreui.bundle.js` and `coreui.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in CoreUI, please see our [contents]({{< docsref "/getting-started/contents#precompiled-coreui" >}}) section.
3232

3333
```html
3434
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>

‎docs/content/templates.md renamed to ‎docs/content/templates/admin-dashboard.md

File renamed without changes.

‎docs/content/templates/contents.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
layout: docs
3+
title: Contents
4+
description: Discover what's included in CoreUI Bootstrap Admin Template, including our precompiled and source code flavors.
5+
group: templates
6+
toc: true
7+
---
8+
9+
## Project structure
10+
11+
Once downloaded, unzip the compressed folder and you'll see something like this:
12+
13+
```text
14+
coreui-bootstrap-admin-template/
15+
├── build/
16+
├── dist/
17+
├── src/
18+
│ ├── assets/
19+
│ │ ├── brand/
20+
│ │ ├── favicon/
21+
│ │ ├── icons/
22+
│ │ ├── img/
23+
│ ├── js/
24+
│ ├── pug/
25+
│ │ ├── _layout/
26+
│ │ ├── _partial/
27+
│ │ ├── base/
28+
│ │ ├── buttons/
29+
│ │ ├── icons/
30+
│ │ ├── notifications/
31+
│ │ ├── ...
32+
│ │ ├── index.pug
33+
│ │ └── ...
34+
│ ├── scss/
35+
│ ├── vendors/
36+
│ └── views/
37+
│ ├── base/
38+
│ ├── buttons/
39+
│ ├── css/
40+
│ ├── icons/
41+
│ ├── notifications/
42+
│ ├── ...
43+
│ ├── index.html
44+
│ └── ...
45+
└── package.json
46+
```
47+
48+
This is the most basic form of CoreUI Admin Templates. The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes precompiled files for quick drop-in usage in nearly any web project. Beyond that, any other included file provides support for packages, license information, and development.

‎docs/content/templates/customize.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
layout: docs
3+
title: Customize
4+
description: Learn how to theme, customize, and extend CoreUI Bootstrap Templates with Sass, a boatload of global options.
5+
group: template
6+
toc: true
7+
---
8+
9+
## Overview
10+
11+
There are multiple ways to customize CoreUI for Bootstrap. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for Bootstrap you're using, browser support, and more.
12+
13+
Our two preferred methods are:
14+
15+
1. You can extend our source files.
16+
2. You can override CoreUI’s styles.
17+
18+
## File structure
19+
20+
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
21+
22+
Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
23+
24+
```text
25+
your-project/
26+
├── ...
27+
├── node_modules/
28+
│ └── @coreui/coreui
29+
│ ├── js
30+
│ └── scss
31+
├── src
32+
│ └── scss
33+
│ ├── _custom.scss
34+
│ ├── ...
35+
│ ├── _variables.scss
36+
│ └── ...
37+
└── ...
38+
```
39+
40+
## Variable defaults
41+
42+
Every Sass variable in CoreUI for Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying CoreUI's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in CoreUI.
43+
44+
You will find the complete list of CoreUI's variables in `node_modules/@coreui/coreui/scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration. You can also find a specific component variables list in **Customizing** section ex. [Alerts - Customizing]({{< docsref "/components/alerts#customizing" >}})
45+
46+
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for Bootstrap via npm:
47+
48+
```scss
49+
// _variables.scss
50+
51+
// Default variable overrides
52+
$body-bg: #000;
53+
$body-color: #111;
54+
```
55+
56+
## Custom styles and overrides
57+
58+
In your `custom.scss`, you can put custom code for CoreUI's components or your own styles.
59+
60+
```scss
61+
// _custom.scss
62+
63+
// Additional custom code here
64+
.custom-component {
65+
border: 2px solid #222;
66+
}
67+
```

‎docs/content/templates/download.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
layout: docs
3+
title: Download
4+
description: Download CoreUI for Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.
5+
group: templates
6+
toc: true
7+
---
8+
9+
## Source files
10+
11+
Compile CoreUI Bootstrap Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:
12+
13+
- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
14+
- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
15+
16+
Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing CoreUI for Bootstrap and its docs, but they're likely unsuitable for your own purposes.
17+
18+
<a href="{{< param "download_template.website" >}}" class="btn btn-primary">Download</a>
19+
20+
### Clone repo
21+
22+
You can also fork [CoreUI Bootstrap Admin Template's repository](https://github.com/coreui/coreui-free-bootstrap-admin-template.git).
23+
24+
```sh
25+
git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git my-project
26+
```

0 commit comments

Comments
 (0)