Skip to content

Commit 3250a75

Browse files
mrholekmrholek
committed
docs: update content
1 parent ecc24f5 commit 3250a75

File tree

7 files changed

+296
-2
lines changed

7 files changed

+296
-2
lines changed

‎packages/docs/.vuepress/config.ts

+31-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default defineUserConfig<DefaultThemeOptions>({
1414
head: [
1515
['link', { rel: 'icon', href: `/vue/docs/${pkg.config.version_short}/favicons/favicon-96x96.png` }],
1616
// ['link', { rel: 'manifest', href: '/favicons/manifest.json' }],
17-
['script', { src: 'https://media.ethicalads.io/media/client/ethicalads.min.js' }],
1817
],
1918
extendsMarkdown: (md) => {
2019
md.use(require('markdown-it-include')),
@@ -298,6 +297,37 @@ export default defineUserConfig<DefaultThemeOptions>({
298297
},
299298
],
300299
},
300+
{
301+
text: 'Templates',
302+
link: '/templates/',
303+
icon: '<path fill="var(--ci-primary-color, currentColor)" d="M472,232H424V120a24.028,24.028,0,0,0-24-24H40a24.028,24.028,0,0,0-24,24V366a24.028,24.028,0,0,0,24,24H212v50H152v32H304V440H244V390h92v58a24.027,24.027,0,0,0,24,24H472a24.027,24.027,0,0,0,24-24V256A24.027,24.027,0,0,0,472,232ZM336,256V358H48V128H392V232H360A24.027,24.027,0,0,0,336,256ZM464,440H368V264h96Z" class="ci-primary"/>',
304+
children: [
305+
{
306+
text: 'Admin & Dashboard',
307+
link: '/templates/admin-dashboard.html',
308+
badge: {
309+
color: 'success',
310+
text: 'New',
311+
}
312+
},
313+
{
314+
text: 'Download',
315+
link: '/templates/download.html',
316+
},
317+
{
318+
text: 'Installation',
319+
link: '/templates/installation.html',
320+
},
321+
{
322+
text: 'Customize',
323+
link: '/templates/customize.html',
324+
},
325+
{
326+
text: 'Contents',
327+
link: '/templates/contents.html',
328+
},
329+
],
330+
},
301331
{
302332
text: 'Migration',
303333
link: '/migration/',

‎packages/docs/.vuepress/theme-coreui/src/client/styles/_footer.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.docs-footer {
1+
.footer.docs-footer {
22
--cui-footer-bg: #f0f4f7;
33
font-size: 0.875rem;
44

‎packages/docs/templates/admin-dashboard.md

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Vue Templates
3+
name: Vue Templates
4+
description: Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize vue admin panels to cover any requirement.
5+
---
6+
7+
8+
## Vue Admin & Dashboard Templates
9+
10+
Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for Vue.js, and CoreUI PRO for Vue.js
11+
12+
<CRow>
13+
<CCol :md="6">
14+
<CCard class="mb-4">
15+
<CCardBody>
16+
<CLink class="text-decoration-none text-reset" href="https://coreui.io/product/free-vue-admin-template/" target="_blank">
17+
<CCardTitle>Free Vue Admin Template</CCardTitle>
18+
<CCardSubtitle class="mb-3 text-muted">Default Theme</CCardSubtitle>
19+
<CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_free_1440.webp" alt=""/>
20+
</CLink>
21+
</CCardBody>
22+
</CCard>
23+
</CCol>
24+
<CCol :md="6">
25+
<CCard class="mb-4">
26+
<CCardBody>
27+
<CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=default-v3" target="_blank">
28+
<CCardTitle>Vue Dashboard Template</CCardTitle>
29+
<CCardSubtitle class="mb-3 text-muted">Default Theme v3</CCardSubtitle>
30+
<CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_v3_1440.webp" alt=""/>
31+
</CLink>
32+
</CCardBody>
33+
</CCard>
34+
</CCol>
35+
<CCol :md="6">
36+
<CCard class="mb-4">
37+
<CCardBody>
38+
<CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=light-v3" target="_blank">
39+
<CCardTitle>Vue Dashboard Template</CCardTitle>
40+
<CCardSubtitle class="mb-3 text-muted">Light Theme v3</CCardSubtitle>
41+
<CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_v3_1440.webp" alt=""/>
42+
</CLink>
43+
</CCardBody>
44+
</CCard>
45+
</CCol>
46+
<CCol :md="6">
47+
<CCard class="mb-4">
48+
<CCardBody>
49+
<CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=default" target="_blank">
50+
<CCardTitle>Vue Dashboard Template</CCardTitle>
51+
<CCardSubtitle class="mb-3 text-muted">Default Theme</CCardSubtitle>
52+
<CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_1440.webp" alt=""/>
53+
</CLink>
54+
</CCardBody>
55+
</CCard>
56+
</CCol>
57+
<CCol :md="6">
58+
<CCard class="mb-4">
59+
<CCardBody>
60+
<CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=light" target="_blank">
61+
<CCardTitle>Vue Dashboard Template</CCardTitle>
62+
<CCardSubtitle class="mb-3 text-muted">Light Theme</CCardSubtitle>
63+
<CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_1440.webp" alt=""/>
64+
</CLink>
65+
</CCardBody>
66+
</CCard>
67+
</CCol>
68+
<CCol :md="6">
69+
<CCard class="mb-4">
70+
<CCardBody>
71+
<CLink class="text-decoration-none text-reset" href="https://coreui.io/product/vue-dashboard-template/?theme=dark" target="_blank">
72+
<CCardTitle>Vue Dashboard Template</CCardTitle>
73+
<CCardSubtitle class="mb-3 text-muted">Dark Theme</CCardSubtitle>
74+
<CImage class="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_dark_1440.webp" alt=""/>
75+
</CLink>
76+
</CCardBody>
77+
</CCard>
78+
</CCol>
79+
</CRow>

‎packages/docs/templates/contents.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: Vue templates contents
3+
name: Vue templates contents
4+
description: Discover what's included in CoreUI Vue Admin Template, including our precompiled and source code flavors.
5+
---
6+
7+
## Project structure
8+
9+
Once downloaded, unzip the compressed folder and you'll see something like this:
10+
11+
```text
12+
coreui-vue-admin-template/
13+
├── public/
14+
├── src/
15+
│ ├── assets/
16+
│ │ ├── brand/
17+
│ │ ├── icons/
18+
│ │ └── images/
19+
│ ├── components/
20+
│ ├── layout/
21+
│ ├── router/
22+
│ ├── styles/
23+
│ ├── views/
24+
│ │ ├── base/
25+
│ │ ├── buttons/
26+
│ │ ├── css/
27+
│ │ ├── icons/
28+
│ │ ├── notifications/
29+
│ ├── App.vue
30+
│ ├── _nav.js
31+
│ └── main.js
32+
├── tests/
33+
├── ...
34+
├── babel.config.js
35+
├── cypress.json
36+
├── jest.config.js
37+
├── jsconfig.json
38+
├── package.json
39+
└── vue.config.js
40+
```
41+
42+
This is the most basic form of CoreUI Vue Admin Templates.

‎packages/docs/templates/customize.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Customize vue templates
3+
name: Customize vue templates
4+
description: Learn how to theme, customize, and extend CoreUI Vue Templates with Sass, a boatload of global options.
5+
---
6+
7+
## Overview
8+
9+
There are multiple ways to customize CoreUI for Vue. Your best path can depend on your project, the complexity of your build tools, the version of CoreUI for Vue you're using, browser support, and more.
10+
11+
Our two preferred methods are:
12+
13+
1. You can extend our source files.
14+
2. You can override CoreUI’s styles.
15+
16+
## File structure
17+
18+
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
19+
20+
Whenever possible, avoid modifying CoreUI's core files. For Sass, that means creating your own stylesheet that imports CoreUI for Vue 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:
21+
22+
```text
23+
your-project/
24+
├── ...
25+
├── node_modules/
26+
│ ├── @coreui/coreui
27+
│ │ ├── scss
28+
│ │ └── ...
29+
│ └── @coreui/vue
30+
│ └── ...
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 Vue 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.
45+
46+
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for Vue 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+
```

‎packages/docs/templates/download.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: Download vue templates
3+
name: Download vue templates
4+
description: Download CoreUI Vue Admin Templates to get the source code that lets you customize and create your vue-based application.
5+
---
6+
7+
## Source files
8+
9+
Compile CoreUI Vue Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:
10+
11+
- Vue, Vue CLI
12+
- Sass compiler for compiling your CSS.
13+
14+
<a href="https://coreui.io/product/free-vue-admin-template/" class="btn btn-primary">Download</a>
15+
16+
<br/><br/>
17+
18+
### Clone repo
19+
20+
You can also fork [CoreUI Vue Admin Template's repository](https://github.com/coreui/coreui-free-vue-admin-template.git).
21+
22+
```sh
23+
git clone https://github.com/coreui/coreui-free-vue-admin-template.git my-project
24+
```

‎packages/docs/templates/installation.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Vue templates installation
3+
name: Vue templates installation
4+
description: Learn how to use CoreUI Vue Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.
5+
---
6+
7+
## Tooling setup
8+
9+
CoreUI Vue Admin Templates uses [npm scripts](https://docs.npmjs.com/misc/scripts/) for its build system. Our `package.json` includes convenient methods for working with the framework, including compiling code, running tests, and more.
10+
11+
To use our build system and run our admin template locally, you'll need a copy of source files and Node. Follow these steps and you should be ready to rock:
12+
13+
1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
14+
2. If you prefer to use Yarn instead of NPM, you have to [download and install it](https://classic.yarnpkg.com/lang/en/docs/install/)
15+
3. [Download CoreUI Vue Admin Template](https://coreui.io/product/free-vue-admin-template/).
16+
4. Navigate to the root template directory and run `npm install` or `yarn install` to install our local dependencies listed in `package.json`.
17+
18+
When completed, you'll be able to run the various commands provided from the command line.
19+
20+
## Using npm scripts
21+
22+
Our `package.json` includes numerous tasks for developing the project. Run `npm run` or `yarn run` to see all the npm scripts in your terminal. **Primary tasks include:**
23+
24+
| Task | Description |
25+
| --- | --- |
26+
| `npm run serve` or `yarn serve` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
27+
| `npm run build` or `yarn build` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer). |
28+
| `npm test` or `yarn test` | Runs tests locally |
29+
30+
## Sass
31+
32+
CoreUI uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline.
33+
34+
Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
35+
36+
## Autoprefixer
37+
38+
We uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
39+
40+
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See `.browserslistrc`.
41+
42+
## Local template
43+
44+
Here's how to get it started:
45+
46+
1. Run through the [tooling setup](#tooling-setup) above to install all dependencies.
47+
2. From the root template directory, run `npm run start` or `yarn start` in the command line.
48+
3. Open `http://localhost:8080` in your browser, and voilà.
49+
50+
## Troubleshooting
51+
52+
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install` or `yarn install`.

0 commit comments

Comments
 (0)