Getting Started with NewsKit
Introduction
NewsKit is a design system created by News UK. Its purpose is to provide the foundations, components, and templates upon which you can build your own pages.
Get started with theming
NewsKit offers you the ability to theme all components. To get started with theming, see: creating a theme.
Get started for web
Pre-requisites
To get started developing with NewsKit, you will have to install the following as pre-requisites:
- You will need an existing react application or you can use create-react-app to create a new one.
- Node.js Version 10.*. If you are using an older version of Node, it is recommended to install other versions via NVM.
- Yarn to install the project dependencies.
Note: We recommend using typescript, but NewsKit will work with vanilla javascript too.
Installing
NewsKit is available as NPM package, downloadable from here.
To install, simply add NewsKit to your dependencies by calling yarn add newskit
in the terminal on the root of your project.
Using
Once you have added newskit
to your project you can simply
add components to your react pages by importing them from newskit
like in the following example:
So here is what is happening in this example:
- The ThemeProvider allows the user to provide a theme that is passed to all NewsKit components nested inside it.
- For this example, we are using one of the default themes distributed with NewsKit -
theSunTheme
. - Tag is one of the components exported by NewsKit. In the example, the Tag component receieves two arguments:
href
- which is the URL where the tag will lead us tosize
- The supported sizes for the tag component are placed inside theTagSize
enum object.
As a result of all this you should see this component inside your page:
Bundling
When using any javascript bundler to ship the application to production, it is vital that you should minimize the amount of javascript file size.
This applies to every npm package that you use, not just with newskit, and one way to do this is by removing any unused code in the application bundle.
This is known as treeskaing, and newskit supports this out of the box.
However, you need to ensure that this is optimisation is enabled in the bundle configuration.
For example for using this with webpack, you need to specify module
resolve mainFields.