Getting Started with Fundamental Library Styles in Vue Project

Step by Step Tutorial

Picture by Caspar Camille Rubin in Unsplash.

What is Vue?

Screenshot from initial App.vue page

What is Fundamental Library Styles?

Get Started

1. Install Node.js

Screenshot from Node.js website

2. Install Vue

3. Initiate the Vue project

Screenshot from the Demo Project
Screenshot from the Demo Project
Screenshot from the Demo Project
Screenshot from the Vue Project just created
Screenshot after the content is deleted from HelloWorld.vue

4. Install Fundamental Library Styles

Screenshot from Fundamental Library Styles Installation
npm install @sap-theming/theming-base-content
Screenshot from the Demo project.
@font-face {
font-family: "72";
src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff") format("woff");
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: "72";
src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff") format("woff");
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: "SAP-icons";
src: url("~@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff") format("woff");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'BusinessSuiteInAppSymbols';
src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'SAP-icons-TNT';
src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff') format('woff');
font-weight: normal;
font-style: normal;
}

html {
font-size: 16px;
}

Bonus

Screenshot from the Demo Project.
Screenshot from the Demo Project

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store