BlimpKit BlimpKit
Introduction Common Icons Code Focus Form Input Rules Components Avatar Bar Breadcrumb Busy Indicator Button Badge Card Dialog Checkbox ComboBox Field Set Inputs Input Group Radio Icon Tab Bar Link List Menu Message Box Message Page Notification Object Status Pagination Panel Popover Product Switch Progress Indicator Scrollbar Shellbar Switch Select Table Tile Token Tool header Toolbar Upload collection Vertical Navigation Wizard Common CSS Box Grid Text Borders Paddings & Margins Width & Height
BlimpKit

What is BlimpKit?

BlimpKit is an AngularJS directive/component UI library based on the fundamental-styles CSS library.

While it mostly follows the fundamental-styles style guides, it deviates in some places and some of the widgets are modified and/or removed, therefore it should not be viewed as an official implementation.

BlimpKit is its own library and contains some extra components that are unique to it.

Getting Started

The library is modular, so you can use as little or as much as you need.

Dependencies

Besides BlimpKit, you will also need AngularJS, jQuery, fundamental-styles and SAP Theming:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular-aria.js"></script>

Base styles and themes

Themes are supported. Officially, there are two themes availabe - BlimpKit and Classic. Both of those have a light, dark and auto modes. You can replace 'themeName' with the name of the theme that you want. The available options are:

  • blimpkit-auto
  • blimpkit-light
  • blimpkit-dark
  • classic-auto
  • classic-light
  • classic-dark

For light or dark:

<link href="https://unpkg.com/fundamental-styles@0.38.0/dist/fundamental-styles.css" rel="stylesheet"> <link href="/css/themes/{themeName}.css" rel="stylesheet"> <link href="/css/themes/{themeName}-variables.css" rel="stylesheet"> <link href="/css/blimpkit.css" rel="stylesheet">

For auto:

<link href="https://unpkg.com/fundamental-styles@0.38.0/dist/fundamental-styles.css" rel="stylesheet"> <link href="/css/themes/{themeName}.css" rel="stylesheet"> <link href="/css/blimpkit.css" rel="stylesheet">

There are other themes available from the base CSS library. You can replace 'themeName' with the name of the theme that you want. The available options are:

  • sap_horizon
  • sap_horizon_dark
  • sap_horizon_hcb
  • sap_horizon_hcw
  • sap_fiori_3
  • sap_fiori_3_dark
  • sap_fiori_3_hcb
  • sap_fiori_3_hcw
  • sap_fiori_3_light_dark

<link href="https://unpkg.com/fundamental-styles@0.38.0/dist/fundamental-styles.css" rel="stylesheet"> <link href="https://unpkg.com/fundamental-styles@0.38.0/dist/theming/{themeName}.css" rel="stylesheet"> <link href="https://unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/{themeName}/css_variables.css" rel="stylesheet"> <link href="/css/blimpkit.css" rel="stylesheet">

Fonts and icons

Fonts and icons are not included or configured by default. You must create you own CSS file and configure the fonts from the @sap-theming package.

@font-face { font-family: "72"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "72"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "72-Light"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "72"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "72-Bold"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "72Mono-Regular"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72Mono-Regular-full.woff") format("woff"); font-style: normal; font-display: swap; } @font-face { font-family: "72Mono-Bold"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72Mono-Bold-full.woff") format("woff"); font-style: normal; font-display: swap; } @font-face { font-family: "SAP-icons"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "BusinessSuiteInAppSymbols"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/sap_horizon/fonts/BusinessSuiteInAppSymbols.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "SAP-icons-TNT"; src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/sap_horizon/fonts/SAP-icons-TNT.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }

Initialization and use

Include the base BlimpKit module:

<script type="text/javascript" src="/src/blimpkit.js"></script>

Add the BlimpKit module to your module as a dependency:

angular.module('yourModuleName', ['blimpKit']);

In order to use a component, you will need to include it. You can include only the components that you need or you can include everything:

<script type="text/javascript" src="/src/avatar.js"></script> <script type="text/javascript" src="/src/badge.js"></script> <script type="text/javascript" src="/src/bar.js"></script> <script type="text/javascript" src="/src/breadcrumb.js"></script> <script type="text/javascript" src="/src/busy-indicator.js"></script> <script type="text/javascript" src="/src/button.js"></script> <script type="text/javascript" src="/src/card.js"></script> <script type="text/javascript" src="/src/checkbox.js"></script> <script type="text/javascript" src="/src/combobox.js"></script> <script type="text/javascript" src="/src/dialog.js"></script> <script type="text/javascript" src="/src/forms.js"></script> <script type="text/javascript" src="/src/input.js"></script> <script type="text/javascript" src="/src/link.js"></script> <script type="text/javascript" src="/src/radio.js"></script> <script type="text/javascript" src="/src/icon-tab-bar.js"></script> <script type="text/javascript" src="/src/list.js"></script> <script type="text/javascript" src="/src/menu.js"></script> <script type="text/javascript" src="/src/message-box.js"></script> <script type="text/javascript" src="/src/message-page.js"></script> <script type="text/javascript" src="/src/object-status.js"></script> <script type="text/javascript" src="/src/pagination.js"></script> <script type="text/javascript" src="/src/panel.js"></script> <script type="text/javascript" src="/src/popover.js"></script> <script type="text/javascript" src="/src/product-switch.js"></script> <script type="text/javascript" src="/src/progress-indicator.js"></script> <script type="text/javascript" src="/src/scrollbar.js"></script> <script type="text/javascript" src="/src/select.js"></script> <script type="text/javascript" src="/src/shellbar.js"></script> <script type="text/javascript" src="/src/switch.js"></script> <script type="text/javascript" src="/src/step-input.js"></script> <script type="text/javascript" src="/src/table.js"></script> <script type="text/javascript" src="/src/textarea.js"></script> <script type="text/javascript" src="/src/tile.js"></script> <script type="text/javascript" src="/src/token.js"></script> <script type="text/javascript" src="/src/tokenizer.js"></script> <script type="text/javascript" src="/src/tool-header.js"></script> <script type="text/javascript" src="/src/toolbar.js"></script> <script type="text/javascript" src="/src/upload-collection.js"></script> <script type="text/javascript" src="/src/vertical-navigation.js"></script> <script type="text/javascript" src="/src/wizard.js"></script>

That's it! You can now use BlimpKit components. For examples on how to use them, look under the "Components" section in the sidebar.