@lonelyplanet/common-css

common-css

This package provides a common.css file that sets the global styles for a front-end application on lonelyplanet.com.

The stylesheet:

• uses @font-face to set custom web fonts Benton Sans and Miller Daily
• sets box-sizing: border-box to normalize the box model
• includes normalize.css and a custom reset to create a baseline across multiple browsers
• contains some global helper classes
• provides some default typographic styling
• includes print styles

Browser support

Last 3 versions and IE 11 via the browserlist config.

Installation

npm install @lonelyplanet/common-css

Usage

For now, the recommended way to use this package is to include it in a Webpack build.

@import "@lonelyplanet/common-css/dist/common.css";

Scripts

The only script you’ll need to run is build.

Script	Description
start	Runs the package in “development mode”; opens the preview HTML file and runs Webpack with the --watch flag to recompile as changes are made, however, the HTML must be manually refreshed after each change
build	Compiles the CSS file to the dist directory
preview	Compiles the CSS file and opens an HTML file where the styles can be previewed; this script is run as part of the start script
stylelint	Lints the CSS source files
test	Runs the stylelint script
prepublishOnly	Runs the build script before the package is prepared and packed, only on npm publish
precommit	Runs the test script before a commit is made

Dependencies

Package	Description
@lonelyplanet/design-tokens	This package contains the design tokens (styles) used across Lonely Planet’s digital products; it’s part of the Backpack monorepo.
@lonelyplanet/browserslist-config	This package contains information about Lonely Planet’s browser support for Autoprefixer.
normalize.css	Normalize.css makes browsers render all elements more consistently and in line with modern standards. It is used in place of a full CSS reset.
PostCSS	PostCSS is a tool for transforming styles with JS plugins. Plugins include postcss-calc, postcss-custom-media, postcss-custom-properties and postcss-import. The separate CLI tool for PostCSS is also installed.
Autoprefixer	Autoprefixer is a PostCSS plugin that parses CSS and adds vendor prefixes to CSS rules using values from the Can I Use website.
cssnano	cssnano is CSS minifier built on top of the PostCSS ecosystem.
Webpack	Webpack is a module bundler for the web. Loaders include css-loader, extract-text-webpack-plugin, postcss-loader and style-loader. The separate CLI tool for Webpack is also installed.
Stylelint	Stylelint is a linter tool for CSS files; it has been configured to use stylelint-config-standard.
pre-commit	pre-commit automatically installs pre-commit hooks which runs npm scripts before a commit is made.

Contributing

Please read the contributing document before writing any code.

License

MIT License