Getting Started with NewsKit
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
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.
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.
Once you have added
newskit to your project you can simply
add components to your react pages by importing them from
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 -
- 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
As a result of all this you should see this component inside your page:
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.