Ring UI 1.0 is Released!

Natasha Katson

Please welcome Ring UI 1.0!

Last year we introduced Ring UI library, an open-source library for web-based products. At JetBrains, we use Ring UI components for our web-based products like YouTrack, Hub, TeamCity, and Upsource. We keep working to improve the library and today we are happy to introduce its major release.

New visual language

We have completely re-implemented the visual language to make it clean and modern. Many components now also have a property that toggles the component’s appearance to better fit dark and light backgrounds.

Customization and theming support via CSS custom properties

Now all components use CSS custom properties to specify their colors, fonts, and other parameters. This lets you change the appearance of components on the fly in modern browsers (outdated browsers use default values).

You can also use colors from Ring UI in your apps to produce a consistent UI. To use CSS custom properties in your app, configure PostCSS as follows:

plugins: [
  ...
  require('postcss-custom-properties')({
    preserve: true,
    variables: require('@jetbrains/ring-ui/extract-css-vars')
  })
]

Customize the colors for your application and create unique color schemes!

Most components moved to CSS Modules, SASS usage is deprecated

Starting from its public release in 2017, we have been moving the Ring UI components away from SASS in favor of CSS Modules. This makes components more encapsulated and protects them from being broken by inaccurate style overriding.

New components: Message, Tabs, Toggle

Ring 1.0 introduces new components for message, tabs, and toggle.

Message

Tabs

Toggle

Babel 7

A new version of Babel was released a while ago, so in this release, we’ve moved to Babel 7 to support its new features. Now if you don’t need to support outdated browsers, you can use browserlist to specify which browsers to support. It can help reduce the size of the final application code and simplify debugging.

Other changes

The Ring UI homepage has moved from http://jetbrains.org/ring-ui/ to http://jetbrains.github.io/ring-ui. There are other usability improvements and features included in this release, which you can read more about here.

We always appreciate your feedback! Please share with us in the comment section below and report any bugs you find in our tracker. Thanks!

Subscribe to JetBrains Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!