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.