<commit_before>[![npm version](https://badge.fury.io/js/showcar-ui.svg)](https://badge.fury.io/js/showcar-ui)
![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=V3R5K2lFTFVkRG5Ed0p1M0tiM1lhaFJ1Wm9JSllPUFlUMHlVYlp3TVdTdz0tLVhIUFdDVHZwSVk1ME9BWUU2alY0UUE9PQ==--15b92933cc78eb4b925a0778e21e88ae4fe38065)

<img src="https://bstacksupport.zendesk.com/attachments/token/4EkFPJPvuynLZdtPX8ybIapji/?name=Logo-01.svg">

# showcar-ui

showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.  

## Installation:

To install showcar-ui within your project use npm.

    npm install showcar-ui --save

## How to build:

For building on your local machine install all npm packages first. Then you can use the gulp command to run the build:

    npm install
    gulp build

## How to include:

You can either include showcar-ui as a fragment or directly include the JS, CSS and inline HTML on your page.
The library provides some HTML content that needs to be inlined on your page. Use the index.html in the dist folder as a template in order to include the inline HTML, CSS and JS on your page.

    <link rel="stylesheet" href="@@ASSET_PATH/showcar-ui.css">
    <script src="@@ASSET_PATH/showcar-ui.js"></script>

Make sure to replace the @@ASSET_PATH string with the path to the JS/CSS file.

## How to test:

You can check development state of the library on home, list and detail page with a parameter `?toguru=sc_develop%3dtrue`.

## Additional information

The showcar-ui library includes some libraries and polyfills:

### Libraries
<commit_msg>readme: add local run command<commit_after>[![npm version](https://badge.fury.io/js/showcar-ui.svg)](https://badge.fury.io/js/showcar-ui)
![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=<KEY>--15b92933cc78eb4b925a0778e21e88ae4fe38065)

<img src="https://bstacksupport.zendesk.com/attachments/token/<KEY>/?name=Logo-01.svg">

# showcar-ui

showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.  

## Installation:

To install showcar-ui within your project use npm.

    npm install showcar-ui --save

## How to build:

For building on your local machine install all npm packages first. Then you can use the gulp command to run the build:

    npm install
    gulp build
    
## How to run locally:

You can use the gulp default command to run the build locally:

    gulp

## How to include:

You can either include showcar-ui as a fragment or directly include the JS, CSS and inline HTML on your page.
The library provides some HTML content that needs to be inlined on your page. Use the index.html in the dist folder as a template in order to include the inline HTML, CSS and JS on your page.

    <link rel="stylesheet" href="@@ASSET_PATH/showcar-ui.css">
    <script src="@@ASSET_PATH/showcar-ui.js"></script>

Make sure to replace the @@ASSET_PATH string with the path to the JS/CSS file.

## How to test:

You can check development state of the library on home, list and detail page with a parameter `?toguru=sc_develop%3dtrue`.

## Additional information

The showcar-ui library includes some libraries and polyfills:

### Libraries

{'fraction_non_alphanumeric': 0.08778280542986425, 'fraction_numerical': 0.02503770739064857, 'mean_word_length': 4.4183006535947715, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1931421', 'n_tokens_mistral': 1118, 'n_tokens_neox': 1052, 'n_words': 385}