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. 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 and
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.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "72-Semibold";
src:url("https://www.unpkg.com/@sap-theming/theming-base-content@11.18.2/content/Base/baseLib/baseTheme/fonts/72-Semibold-full.woff2")
format("woff2");
font-style: normal;
}
@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.woff2")
format("woff2");
font-weight: 700;
font-style: normal;
}
@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.woff2")
format("woff2");
font-weight: 300;
font-style: normal;
}
@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.woff2")
format("woff2");
font-style: normal;
}
@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.woff2")
format("woff2");
font-style: normal;
}
@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.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@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.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
@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.woff2")
format("woff2");
font-weight: normal;
font-style: normal;
}
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/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/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/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.
BlimpKit