@lmu-med/styles
v0.1.12
Published
Provides common CSS styles in LMU Klinikum corporate identity
Downloads
21
Readme
LMU Klinikum Styles
Provides CSS in line with the LMU Klinikum corporate identity. Automatically styles buttons, forms, headings and tables on a page where the styles are embedded and the body has the class "lmu-klinikum" applied to it.
Usage
- Add the package to your project:
npm install -d @lmu-med/styles- Import css from the module's dist folder:
<link href="node_modules/@lmu-med/styles/dist/lmu.css" rel="stylesheet" />Or, when using a build tool like webpack:
// add to your entry JS:
import "@lmu-med/styles/dist/lmu.css";Syntax for SCSS or SASS:
@import "@lmu-med/styles/dist/lmu.css";- Apply the required class "lmu-klinikum" to the html's body:
<body class="lmu-klinikum"></body>- Profit
Available classes for styling
The minute you include the stylesheet in your project, these elements are automatically styled in accordance with the LMU Klinikum CI:
form > input
buttonAdditionally, by adding the class lmu-klinikum to the body tag, these elements are styled, too:
table > tbody > tr > th
table > tbody > tr > td
h1, h2, h3, h4, h5, h6, p
ul, liFor styling of buttons you have class definitions for size and colour available:
/* Size classes */
button-lg button-md button-sm
/* Colour classes */
grassgreen orange gold sel-red sel-light-gray sel-gray sel-dark-gray sel-distinct
/* Contoured colors */
grassgreen-invers orange-invers gold-invers sel-red-invers sel-light-gray-invers sel-gray-invers sel-dark-gray-invers sel-distinct-inversFor more info and examples, follow the instructions at "Development"
Styling Checkboxes
Note bug in use with Ruby on Rails. If using check boxes, form.label must be after form.check_box
Adding Roboto font-family
To add Roboto to your project, use FontSource
npm install @fontsource/robotoIn your application.js or css:
import "@fontsource/roboto";
body { font-family: 'Roboto' }Development
Checkout this project and run
npm iTo test your package run:
npm startThis starts a webserver at localhost:8080 showing examples for all the elements that are being styled by this module.
Releasing
To compile a release, run:
npm run compile...then commit and push.
Publishing
To publish a new release, login as user lmu-med-wad with this command:
npm loginFinally, to publish the new package to NPM, run this:
npm publishContributing
Bug reports and pull requests are welcome on GitHub at https://github.com/KUMteamIM/lmu-med-styles.
License
The project is available as open source under the terms of the MIT License.
