Merge branch 'main' of https://github.com/coreui/coreui

mrholek · mrholek · commit 126519e74c58 · 2022-07-08T14:09:47.000+02:00
diff --git a/config.yml b/config.yml
@@ -73,6 +73,9 @@ params:
     source_pro:         "https://github.com/coreui/coreui-pro/archive/v4.3.0-beta.1.zip"
     dist_pro:           "https://github.com/coreui/coreui-pro/releases/download/v4.3.0-beta.1/coreui-4.3.0-beta.1-dist.zip"
 
+  download_template:
+    website:            "https://coreui.io/product/free-bootstrap-admin-template/"
+
   cdn:
   # See https://www.srihash.org for info on how to generate the hashes
     css:                 "https://cdn.jsdelivr.net/npm/@coreui/coreui@4.2.0/dist/css/coreui.min.css"
diff --git a/docs/content/components/header.md b/docs/content/components/header.md
@@ -277,7 +277,7 @@ When the container is within your header, its horizontal padding is removed at b
 
 ### CSS variables
 
-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.
+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.
 
 {{< scss-docs name="header-css-vars" file="scss/_header.scss" >}}
 
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
@@ -164,19 +164,16 @@ Or with `.justify-content-end`:
 
 ## Customizing
 
-### SASS
+### CSS Variables
 
 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.
 
 {{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
 
-### Sass variables
+### SASS variables
 
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
 
-### Sass mixins
+### SASS mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
-
-### CSS Vars
-{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
diff --git a/docs/content/customize/color.md b/docs/content/customize/color.md
@@ -123,11 +123,11 @@ Bootstrap doesn't include `color` and `background-color` utilities for every col
 Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
 
 ```scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/maps";
+@import "@coreui/coreui/scss/mixins";
+@import "@coreui/coreui/scss/utilities";
 
 $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
 
@@ -148,7 +148,7 @@ $utilities: map-merge(
   )
 );
 
-@import "bootstrap/scss/utilities/api";
+@import "@coreui/coreui/scss/utilities/api";
 ```
 
 This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
diff --git a/docs/content/customize/overview.md b/docs/content/customize/overview.md
@@ -26,7 +26,7 @@ sections:
 
 ## Overview
 
-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.
+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.
 
 Our two preferred methods are:
 
diff --git a/docs/content/customize/sass.md b/docs/content/customize/sass.md
@@ -25,7 +25,7 @@ your-project/
         └── scss
 ```
 
-If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
+If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping CoreUI's source files separate from your own.
 
 ```text
 your-project/
@@ -38,7 +38,7 @@ your-project/
 
 ## Importing
 
-In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
+In your `custom.scss`, you'll import CoreUI's source Sass files. You have two options: include all of CoreUI, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
 
 ```scss
 // Custom.scss
diff --git a/docs/content/getting-started/contents.md b/docs/content/getting-started/contents.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Contents
-description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
+description: Discover what's included in CoreUI, including our precompiled and source code flavors.
 group: getting-started
 aliases:
   - "/getting-started/contents/"
@@ -65,7 +65,7 @@ coreui/
     └── coreui.min.js.map
 ```
 
-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/).
+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/).
 
 ## CSS files
 
diff --git a/docs/content/getting-started/introduction.md b/docs/content/getting-started/introduction.md
@@ -37,7 +37,7 @@ Many of our components require the use of JavaScript to function. Specifically,
 
 #### Bundle
 
-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.
+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.
 
 ```html
 <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
diff --git a/docs/content/templates/admin-dashboard.md b/docs/content/templates/admin-dashboard.md
diff --git a/docs/content/templates/contents.md b/docs/content/templates/contents.md
@@ -0,0 +1,48 @@
+---
+layout: docs
+title: Contents
+description: Discover what's included in CoreUI Bootstrap Admin Template, including our precompiled and source code flavors.
+group: templates
+toc: true
+---
+
+## Project structure
+
+Once downloaded, unzip the compressed folder and you'll see something like this:
+
+```text
+coreui-bootstrap-admin-template/
+├── build/
+├── dist/
+├── src/
+│   ├── assets/
+│   │   ├── brand/
+│   │   ├── favicon/
+│   │   ├── icons/
+│   │   ├── img/
+│   ├── js/
+│   ├── pug/
+│   │   ├── _layout/
+│   │   ├── _partial/
+│   │   ├── base/
+│   │   ├── buttons/
+│   │   ├── icons/
+│   │   ├── notifications/
+│   │   ├── ...
+│   │   ├── index.pug
+│   │   └── ...
+│   ├── scss/
+│   ├── vendors/
+│   └── views/
+│       ├── base/
+│       ├── buttons/
+│       ├── css/
+│       ├── icons/
+│       ├── notifications/
+│       ├── ...
+│       ├── index.html
+│       └── ...
+└── package.json
+```
+
+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.
diff --git a/docs/content/templates/customize.md b/docs/content/templates/customize.md
@@ -0,0 +1,67 @@
+---
+layout: docs
+title: Customize
+description: Learn how to theme, customize, and extend CoreUI Bootstrap Templates with Sass, a boatload of global options.
+group: template
+toc: true
+---
+
+## Overview
+
+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.
+
+Our two preferred methods are:
+
+1. You can extend our source files.
+2. You can override CoreUI’s styles.
+
+## File structure
+
+Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
+
+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:
+
+```text
+your-project/
+├── ...
+├── node_modules/
+│   └── @coreui/coreui
+│       ├── js
+│       └── scss
+├── src
+│   └── scss
+│       ├── _custom.scss
+│       ├── ...
+│       ├── _variables.scss
+│       └── ...
+└── ...
+```
+
+## Variable defaults
+
+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.
+
+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" >}})
+
+Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling CoreUI for Bootstrap via npm:
+
+```scss
+// _variables.scss
+
+// Default variable overrides
+$body-bg: #000;
+$body-color: #111;
+```
+
+## Custom styles and overrides
+
+In your `custom.scss`, you can put custom code for CoreUI's components or your own styles.
+
+```scss
+// _custom.scss
+
+// Additional custom code here
+.custom-component {
+  border: 2px solid #222;
+}
+```
diff --git a/docs/content/templates/download.md b/docs/content/templates/download.md
@@ -0,0 +1,26 @@
+---
+layout: docs
+title: Download
+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.
+group: templates
+toc: true
+---
+
+## Source files
+
+Compile CoreUI Bootstrap Admin with your own asset pipeline by downloading our source Sass, and JavaScript files. This option requires some additional tooling:
+
+- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
+- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
+
+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.
+
+<a href="{{< param "download_template.website" >}}" class="btn btn-primary">Download</a>
+
+### Clone repo
+
+You can also fork [CoreUI Bootstrap Admin Template's repository](https://github.com/coreui/coreui-free-bootstrap-admin-template.git).
+
+```sh
+git clone https://github.com/coreui/coreui-free-bootstrap-admin-template.git my-project
+```
diff --git a/docs/content/templates/installation.md b/docs/content/templates/installation.md
@@ -0,0 +1,55 @@
+---
+layout: docs
+title: Installation
+description: Learn how to use CoreUI Bootstrap Admin Dashboard  Templates including npm scripts to build templates, compile source code, run tests, and more.
+group: templates
+toc: true
+---
+
+## Tooling setup
+
+CoreUI Bootstrap Admin Templates uses [npm scripts](https://docs.npmjs.com/misc/scripts/) for its build system. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
+
+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:
+
+1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies.
+2. [Download CoreUI Admin Template]({{< docsref "/templates/download" >}}).
+3. Navigate to the root template directory and run `npm install` to install our local dependencies listed in `package.json`.
+
+When completed, you'll be able to run the various commands provided from the command line.
+
+## Using npm scripts
+
+Our `package.json` includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
+
+{{< bs-table >}}
+| Task | Description |
+| --- | --- |
+| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. |
+| `npm run build` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). |
+| `npm test` | Runs tests locally after running `npm run dist` |
+{{< /bs-table >}}
+
+## Sass
+
+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.
+
+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.
+
+## Autoprefixer
+
+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.
+
+We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See `.browserslistrc`.
+
+## Local template
+
+Here's how to get it started:
+
+1. Run through the [tooling setup](#tooling-setup) above to install all dependencies.
+2. From the root template directory, run `npm run start` in the command line.
+3. Open `http://localhost:9001/` in your browser, and voilà.
+
+## Troubleshooting
+
+Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
diff --git a/docs/content/utilities/api.md b/docs/content/utilities/api.md
diff --git a/docs/content/utilities/spacing.md b/docs/content/utilities/spacing.md
diff --git a/docs/data/sidebar.yml b/docs/data/sidebar.yml
diff --git a/docs/layouts/partials/sidebar.html b/docs/layouts/partials/sidebar.html
