GuidesChangelog

Red Sift UI

User interface helper libraries for creating frontend Sifts

Suggest Edits

Red Sift UI is a set of libraries which supports developers to build frontend Sifts quickly. It is completely optional to use this library. A frontend Sift is agnostic to its implementation and can be developed with any UI library or framework you feel comfortable with. You can also mix in parts of Red Sift UI into the library you are using.

Red Sift UI allows rapid prototyping of a Sift in providing

  • a template for the general appearance of your Sift,
  • general UI components to interact with the Sift, e.g. buttons or sliders, and
  • a carefully crafted typography preset.

To keep Red Sift UI flexible and allow you to pick the parts you want to include in your project without the need to import the whole library we provide a set of libraries which are part of Red Sift UI:

  • ui-rs-core: Base library containing the general UI components
  • ui-rs-hero: Contains a Sift hero component

Our design philosophy for Red Sift UI is to provide a sound library to create frontend Sifts which is small in size, has minimal dependencies and is customizable. All Sifts provided by us are built on top of Red Sift UI, so when using it in your projects the typical look-and-feel comes for free. Still, the library provides flexible customization possibilities to give your Sift the little something that makes it shine.

Red Sift UI provides you with basic UI elements for your Sift. For visualizing data in your Sift have a look at our accompanying set of Red Sift D3 Components.

Red Sift UI is built in Javascript and CSS. The Javascript part is using ES2015 to provide all the modern features which make Javascript fun to develop with today. We are using Stylus to structure the CSS and to provide flexible customization.

To structure our CSS we us BEM. If you are not familiar with it invest a few minutes to get an overview as it will make the provided CSS classes much easier to understand. We chose BEM as it provides a straightforward naming schema which is easy to grasp and maintain. No fiddling around with complicated CSS selectors or nested class hierarchies. We try to keep it simply.

The library is built on responsive design principles from the ground which makes it a pleasure to use on mobile and desktop devices.

This section describes the building blocks provided by Red Sift UI. To demonstrate them we use the fabulous Codepen site so that you can play around with the examples directly in the browser. To enter the live edit mode of an example simply click "Edit on Codepen" and start exploring.

📘

Ad blocker

The live examples are embedded using <iframe>s. Some ad blockers prevent the display of such content. If you do not see the live examples change the settings of the ad blocker to allow content from https://codepen.io/.

Getting Started

The easiest way to use Red Sift UI in your project is to load it from our CDN. For the CSS styles copy the following lines into the <head> section of your page, which will add the light flavour of the Red Sift UI theme to your page:

<link rel="stylesheet" href="https://static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css">
<link rel="stylesheet" href="https://static.redsift.io/reusable/ui-rs-hero/latest/css/ui-rs-hero.min.css">

For ui-rs-core we also provide a dark theme, here we go:

<link rel="stylesheet" href="https://static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core-dark.min.css">

The Javascript containing the logic for the data visualization and UI are added via the following <script> tags:

<script src="https://static.redsift.io/reusable/ui-rs-core/latest/js/ui-rs-core.umd-es2015.min.js"></script>
<script src="https://static.redsift.io/reusable/ui-rs-hero/latest/js/ui-rs-hero.umd-es2015.min.js"></script>

Add the tag at the bottom of you <body> section on the page. This is all you need to start developing your Sift with the Red Sift UI libraries!

📘

Javascript functionality

If you only want to use the styling parts of Red Sift UI (e.g., fonts, button styles, etc.) it is not necessary to include the Javascript files.

📘

Universal Javascript Module (UMD)

The "umd" in https://static.redsift.io/reusable/ui-rs-core/latest/js/ui-rs-core.umd-es2015.min.js stands for Universal Module Definition. A UMD module can be loaded with various module loaders, as well as imported directly into your web page.

Sift Layout Template

We provide a layout template for you to get started quickly when developing a new Sift. The template contains a hero part to introduce the Sift and a content part below and is provided by ui-rs-hero. This is how it looks like:

Hero

Add the following code to your page to integrate the hero part:

<rs-hero header="Taxi Sift" bg-class="-bg-hero -effect-darken" scroll-target="#scroll-anchor" sticky-header=".content">
    <code class="fade-in">£17.50</code>
    <p class="fade-in delay">Your taxi bills from last week</p>
</rs-hero>

<rs-hero> is a custom element following the web component specification. It is configurable via the following attributes:

  • header: (optional) A text appearing in the header of the hero component

  • bg-class: (optional) One or multiple comma separated CSS classes applied to the component (due to technical reasons it is not possible to apply classes directly via the class attribute). -bg-taxi is defining a background image (see below for the CSS code), -effect-darken is an effect class to improve the contrast between the background image and the displayed text in the hero. The effect class is provided by RedsiftUI, its counterpart -effect-lighten is also available.

  • scroll-target: (optional) If specified an arrow is displayed within the hero which scrolls to the given element on the page. Depending on the height of the whole page a click on the arrow might not cause any action, i.e. if the page is not overflowing.

  • sticky-header: (optional) If specified the header part of the hero unit will act as a sticky header. When the element specified in the attribute is scrolling out on the top of the page the class hero-sticky-header--active is added to the header div, allowing you to style the header when it is showing on its own withouth the hero unit.

The content you put within the rs-hero element will be displayed vertically and horizontally centered within the hero.

🚧

Javascript Dependency

To enable the hero unit it is necessary to include the ui-rs-hero Javascript library as shown at the beginning of this section. The library takes care of registering the custom element automatically.

Content

To encapsulate the content we provide a very thin template which only wraps the content into a bordered frame. You can replace the template with whatever you seem fit for your sift, though:

<div class="content" id="scroll-anchor">
  <div class="content__container">
    <h2>Item within <strong>content</strong> wrapper</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  </div>
</div>

Noticed the scroll-anchor ID? We specified this ID as scroll-target on the hero. If the page is overflowing and the user clicks on the arrow in the hero the page will scroll to this element smoothly.

Customization

The bg-hero class is arbitrary, it simply defines a background image for the hero.
When not specifying a class to configure the background we show a greyish background for you. Well...

To customize the sticky header which is enabled via the sticky-header attribute on the rs-hero element use the hero-sticky-header--active class. It is added to the header element whenever the element specified in the sticky-header attribute is flowing out of the viewport on top of the page. If you specify the first element after the hero unit (.content here) a neat sticky effect is achieved, as shown in the example. 

.-bg-hero {
  background-image: url('//static.redsift.io/assets/images/taxi-1.jpg');
  background-color: rgb(42, 24, 22);
}

.hero-sticky-header--active {
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  background-image: url('//static.redsift.io/assets/images/taxi-1.jpg');
}

will display the arrow. When clicked it will smoothly scroll to the anchor in the href attribute, #scroll-anchor in this case. In the default Sift layout the anchor is set on the first .content block via its id attribute like so:

Additional classes

The default Sift layout template contains a few additional classes:

  • -effect-darken, -effect-lighten: Darkens or lightens the div the class is applied to. This is useful to make the contrast between background image and overlaying text more distinct and the text more readable.

  • fade-in, delay: Animation classes to fade in an element with an optional delay

📘

For the curious

Have a look at the source code here:

ui-rs-hero/src/index.js
ui-rs-hero/src/styles/index.import.styl

UI Components

To interact with your Sift we provide a set of pre-styled input elements like buttons, sliders and input elements. The elements are available in a 'light' (the default) and a 'dark' theme and are provided by the ui-rs-core library. See this Codepen on how to use them:

📘

The UI components only need the Javascript portion of ui-rs-core for setting slider values. The rest of the components are only styles from the library.

Typography

The ui-rs-core library provides a default typography setup for <h1> - <h4> and the <p> element. The font and baseline sizes are carefully crafted for different breakpoints.

Customizing

To customize Red Sift UI head over to the Github repository of ui-rs-core or ui-rs-hero. It contains the source code of the libraries and instructions on how to setup a development environment. Let us know if you build something gorgeous with it!

Updated less than a minute ago