Merge pull request #2423 from SpareBank1/kompilert-css-readme

Info om kompilert css i Readme

packages/ffe-accordion/README.md

@@ -14,6 +14,14 @@ Full documentation on accordion usage is available at https://design.sparebank1.
 @import 'path/to/node_modules/@sb1/ffe-accordion/less/ffe-accordion';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-accordion/css/ffe-accordion.css';
+```
+
 See also `@sb1/ffe-accordion-react`.
 
 ## Theming with CSS custom properties

packages/ffe-account-selector-react/README.md

@@ -21,6 +21,14 @@ For styling the account-selector use:
 @import 'path/to/node_modules/@sb1/ffe-account-selector-react/less/ffe-account-selector';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-account-selector-react/css/ffe-account-selector.css';
+```
+
 ## Development
 
 To start a local development server, run the following from the designsystem root folder:

packages/ffe-buttons/README.md

@@ -14,6 +14,14 @@ Full documentation on button usage is available at https://design.sparebank1.no/
 @import 'path/to/node_modules/@sb1/ffe-buttons/less/buttons';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-buttons/css/buttons.css';
+```
+
 See also `@sb1/ffe-buttons-react`.
 
 ## Theming with CSS custom properties

packages/ffe-cards/README.md

@@ -24,6 +24,14 @@ Or pick just the ones you need from these:
 @import 'path/to/node_modules/@sb1/ffe-cards/less/image-card';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-cards/css/cards.css';
+```
+
 See also `@sb1/ffe-cards-react`.
 
 ## Theming with CSS custom properties

packages/ffe-chart-donut-react/README.md

@@ -16,6 +16,14 @@ Full documentation on chart donut usage is available at https://design.sparebank
 @import 'path/to/node_modules/@sb1/ffe-chart-donut-react/less/ffe-chart-donut';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-chart-donut-react/css/ffe-chart-donut.css';
+```
+
 ## Theming with CSS custom properties
 
 In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.

packages/ffe-chips/README.md

@@ -0,0 +1,47 @@
+# @sb1/ffe-chips
+
+## Install
+
+```bash
+npm install --save @sb1/ffe-core @sb1/ffe-chips
+```
+
+## Usage
+
+```less
+@import 'path/to/node_modules/@sb1/ffe-chips/less/chip';
+```
+
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-chips/css/chip.css';
+```
+
+See also `@sb1/ffe-chips-react`.
+
+## Theming with CSS custom properties
+
+In order to support theming of components, this package contains styling that depends on a set of custom properties, defined in `less/theme.less`. These properties in turn depend on a base theme defined in `ffe-core`.
+
+If your project uses the `ffe-core`, you're probably good to go. If not, make sure to import the core properties in `theme.less`:
+
+```css
+@import '~@sb1/ffe-core/less/theme';
+```
+
+## Development
+
+To start a local development server, run the following from the designsystem root folder:
+
+```bash
+npm install
+npm run build
+npm start
+```
+
+A local instance of `component-overview` with live reloading will run at http://localhost:1234/.
+
+Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.

packages/ffe-collapse-react/README.md

@@ -19,6 +19,14 @@ Alternatively you can do it by adding style to the class
 `.ffe-collapse-transition`\, adding it to your own class and provide the class
 through the `className` property or by styling it directly through the `style` property.
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-collapse-react/css/collapse.css';
+```
+
 ## Development
 
 To start a local development server, run the following from the designsystem root folder:

packages/ffe-core/README.md

@@ -14,9 +14,9 @@ npm install --save-dev less less-plugin-npm-import    # less-plugin is optional,
 
 Full documentation on usage is available at:
 
-https://design.sparebank1.no/komponenter/typografi/
-https://design.sparebank1.no/profil/farger/
-https://design.sparebank1.no/profil/spacing/
+* https://design.sparebank1.no/komponenter/typografi/
+* https://design.sparebank1.no/profil/farger/
+* https://design.sparebank1.no/profil/spacing/
 
 ```less
 /* Your project's main .less import file */
@@ -44,6 +44,14 @@ parts you require if you want:
 @import '~@sb1/ffe-core/less/accessibility';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-core/css/ffe.css';
+```
+
 ## Theming with CSS custom properties
 
 Theming of components is supported through a set of custom properties, defined in a `less/theme.less` file in every styling package. The properties in `ffe-core` constitute a base theme, which is in turn used as default values in other packages. You may override the properties in each individual package in order to customize a single component, or override the properties defined in `ffe-core` to customize a sitewide theme.

packages/ffe-datepicker/README.md

@@ -24,6 +24,14 @@ You need styles for both the dateinput field and the calendar.
 @import 'node_modules/@sb1/ffe-form/less/form.less';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-datepicker/css/datepicker.css';
+```
+
 Example HTML stucture with classes. (Aria-tags and other attributes have been removed for clarity)
 
 ```html

packages/ffe-feedback/README.md

@@ -16,6 +16,14 @@ Full documentation is not yet available, but will be added to https://design.spa
 @import 'node_modules/@sb1/ffe-feedback/less/feedback';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-feedback/css/feedback.css';
+```
+
 See also `@sb1/ffe-feedback-react`.
 
 ## Development

packages/ffe-file-upload/README.md

@@ -14,6 +14,14 @@ Full documentation on file upload usage is available at https://design.sparebank
 @import 'path/to/node_modules/@sb1/ffe-file.upload/less/ffe-file-upload.less';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-file-upload/css/file-upload.css';
+```
+
 See also `@sb1/ffe-file-upload-react`.
 
 ## Theming with CSS custom properties

packages/ffe-form/README.md

@@ -14,6 +14,14 @@ Full documentation on form usage is available at https://design.sparebank1.no/ko
 @import 'path/to/node_modules/@sb1/ffe-form/less/form';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-form/css/form.css';
+```
+
 See also `@sb1/ffe-form-react`.
 
 ## Theming with CSS custom properties

packages/ffe-grid/README.md

@@ -14,6 +14,14 @@ Remember to include the less-file in your main less-file:
 @import '~@sb1/ffe-grid/less/ffe-grid';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-grid/css/ffe-grid.css';
+```
+
 ## Usage
 
 Full documentation on grid usage is available at https://design.sparebank1.no/komponenter/grid/.

packages/ffe-icons/README.md

@@ -12,6 +12,14 @@ npm install --save @sb1/ffe-icons
 
 Full documentation on icon usage is available at https://design.sparebank1.no/komponenter/ikoner/.
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-icons/css/ffe-icons.css';
+```
+
 See also `@sb1/ffe-icons-react`.
 
 ## Updating available icons

packages/ffe-lists/README.md

@@ -14,6 +14,14 @@ Full documentation on lists usage is available at https://design.sparebank1.no/k
 @import 'path/to/node_modules/@sb1/ffe-lists/less/lists';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-lists/css/lists.css';
+```
+
 See also `@sb1/ffe-lists-react`.
 
 ## Theming with CSS custom properties

packages/ffe-lists/package.json

@@ -15,7 +15,7 @@
     "scripts": {
         "lint": "ffe-buildtool stylelint less/*.less",
         "test": "npm run lint",
-        "build": "lessc less/lists.less css/ffe-accordion.css --autoprefix"
+        "build": "lessc less/lists.less css/lists.css --autoprefix"
     },
     "dependencies": {
         "@sb1/ffe-core": "^29.1.4"

packages/ffe-messages/README.md

@@ -14,6 +14,14 @@ Full documentation on lists usage is available at https://design.sparebank1.no/k
 @import 'path/to/node_modules/@sb1/ffe-messages/less/messages';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-messages/css/messages.css';
+```
+
 See also `@sb1/ffe-messages-react`.
 
 ## Theming with CSS custom properties

packages/ffe-modals/README.md

@@ -14,6 +14,14 @@ Full documentation on lists usage is available at https://design.sparebank1.no/k
 @import 'path/to/node_modules/@sb1/ffe-modals/less/modal';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-modals/css/modal.css';
+```
+
 See also `@sb1/ffe-modals-react`.
 
 ## Theming with CSS custom properties

packages/ffe-pagination/README.md

@@ -14,6 +14,14 @@ Full documentation on lists usage is available at https://design.sparebank1.no/k
 @import 'path/to/node_modules/@sb1/ffe-pagination/less/pagination';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-pagination/css/pagination.css';
+```
+
 See also `@sb1/ffe-pagination-react`.
 
 ## Theming with CSS custom properties

packages/ffe-searchable-dropdown-react/README.md

@@ -25,6 +25,14 @@ styling:
 @import "npm://ffe-searchable-dropdown-react/less/searchable-dropdown";
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-searchable-dropdown-react/css/searchable-dropdown.css';
+```
+
 ## FFE less Dependencies
 
 ```

packages/ffe-spinner/README.md

@@ -14,6 +14,14 @@ Full documentation on spinner usage is available at https://design.sparebank1.no
 @import 'path/to/node_modules/@sb1/ffe-spinner/less/spinner';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-spinner/css/spinner.css';
+```
+
 See also `@sb1/ffe-spinner-react`.
 
 ## Development

packages/ffe-tables/README.md

@@ -14,6 +14,14 @@ Full documentation on table usage is available at https://design.sparebank1.no/k
 @import 'path/to/node_modules/@sb1/ffe-tables/less/tables';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-tables/css/tables.css';
+```
+
 See also `@sb1/ffe-tables-react`.
 
 ## Theming with CSS custom properties

packages/ffe-tabs/README.md

@@ -14,6 +14,14 @@ Full documentation on tabs usage is available at https://design.sparebank1.no/ko
 @import 'path/to/node_modules/@sb1/ffe-tabs/less/tabs';
 ```
 
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-tabs/css/tabs.css';
+```
+
 See also `@sb1/ffe-tabs-react`.
 
 ## Theming with CSS custom properties