NewsKit Mobile Logo

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 to
    • size - The supported sizes for the tag component are placed inside the TagSize enum object.

As a result of all this you should see this component inside your page:

Hello World

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.