Integrating Patternlab

Integrating Patternlab into a Project

WARNING

User credentials are required for the private npm package: npmjs.com/package/@pharma4u/patternlab

1. Install the package from the npm repository:

npm i @pharma4u/patternlab@latest --save

2. After installing the package, you can import the compiled CSS and JavaScript files into your project. The exact method of importing will depend on your project's setup (e.g., using Webpack, Rollup, or including them directly in your HTML).

Show Example of importing in HTML

<!-- Importing CSS -->
<link rel="stylesheet" href="./node_modules/@pharma4u/patternlab/resources/contrib/contrib.css" media="screen">
<link rel="stylesheet" href="./node_modules/@pharma4u/patternlab/pharma4u.css" media="screen">
<link rel="stylesheet" href="./node_modules/@pharma4u/patternlab/print-labxpert.css" media="print">
    
    ...
<!-- Importing Scripts -->
<script src="./node_modules/@pharma4u/patternlab/resources/contrib/jquery/jquery-1.12.4-patch.min.js"></script>
<script src="./node_modules/@pharma4u/patternlab/resources/contrib/jquery/jquery-migrate-1.4.1.min.js"></script>
<script src="./node_modules/@pharma4u/patternlab/resources/contrib/contrib.js"></script>
<script src="./node_modules/@pharma4u/patternlab/main.js"></script>

Boilerplate

WARNING

Update this project

Check out this demo project to find out how Patternlab can be integrated into another project via npm: Bitbucket: Patternlab Boilerplate

Integrations

• pharma4u_templates: the compiled Patternlab JavaScript and CSS is included in pharma4u_templates/Configuration/Typoscript/Setup/assets.typoscript