Browse Source

docs: Document CSS files like this?

Renée Kooi 6 years ago
parent
commit
8024f20021

+ 8 - 0
website/src/docs/dashboard.md

@@ -34,6 +34,14 @@ Install from NPM:
 npm install @uppy/dashboard
 ```
 
+## CSS
+
+The Dashboard plugin includes CSS for the Dashboard itself, and the plugins the Dashboard uses ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+
+The CSS file lives at `@uppy/dashboard/dist/style.css`. A minified version is at `@uppy/dashboard/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The Dashboard can be extensively customized by configuring the options below to your liking:

+ 8 - 0
website/src/docs/dragdrop.md

@@ -28,6 +28,14 @@ Install from NPM:
 npm install @uppy/drag-drop
 ```
 
+## CSS
+
+The DragDrop plugin includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead.
+
+The CSS file lives at `@uppy/drag-drop/dist/style.css`. A minified version is at `@uppy/drag-drop/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The DragDrop plugin has the following configurable options:

+ 8 - 0
website/src/docs/fileinput.md

@@ -29,6 +29,14 @@ Install from NPM:
 npm install @uppy/file-input
 ```
 
+## CSS
+
+The FileInput plugin includes some simple styles for use with the [`pretty`](#pretty-true) option, like shown in the [example](/examples/xhrupload). You can also choose not to use it and provide your own styles instead.
+
+The CSS file lives at `@uppy/file-input/dist/style.css`. A minified version is at `@uppy/file-input/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The FileInput plugin has the following configurable options:

+ 8 - 0
website/src/docs/informer.md

@@ -29,6 +29,14 @@ Install from NPM:
 npm install @uppy/informer
 ```
 
+## CSS
+
+The Informer plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the Informer, because the Dashboard already includes it.
+
+The CSS file lives at `@uppy/informer/dist/style.css`. A minified version is at `@uppy/informer/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The Informer plugin has the following configurable options:

+ 8 - 0
website/src/docs/statusbar.md

@@ -29,6 +29,14 @@ Install from NPM:
 npm install @uppy/status-bar
 ```
 
+## CSS
+
+The StatusBar plugin includes CSS a file for styling. If you use the [`@uppy/dashboard`](/docs/dashboard) plugin, you do not need to include the styles for the StatusBar, because the Dashboard already includes it.
+
+The CSS file lives at `@uppy/status-bar/dist/style.css`. A minified version is at `@uppy/status-bar/dist/style.min.css`.
+
+Import one of these files into your project. The way to do this depends on your build system.
+
 ## Options
 
 The StatusBar plugin has the following configurable options: