diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index cc291e0d68..b72200da3b 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -22,7 +22,7 @@ A clear and concise description of what the bug is. > Is this issue related to a specific component? -> What version of the Fundamental Styles are you using? +> What version of the Fundamental Library Styles are you using? > What offering/product do you work on? Any pressing ship or release dates we should be aware of? diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 5557541ef5..7c2f44090d 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -23,7 +23,7 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate > What browser are you working in? -> What version of Fundamental Styles are you using? +> What version of Fundamental Library Styles are you using? > What offering/product do you work on? Any pressing ship or release dates we should be aware of? diff --git a/README.md b/README.md index 4edbce2c6c..c6b6f99ac1 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ -# Fundamental Styles +# Fundamental Library Styles [![npm version](https://badge.fury.io/js/fundamental-styles.svg)](https://badge.fury.io/js/fundamental-styles) [![Build Status](https://travis-ci.com/SAP/fundamental-styles.svg?branch=master)](https://travis-ci.com/SAP/fundamental-styles) [![Slack](https://img.shields.io/badge/slack-ui--fundamentals-blue.svg?logo=slack)](https://join.slack.com/t/ui-fundamentals/shared_invite/enQtNTIzOTU0Mzc2NTc5LWQzZWI5MWFhYjE5OTc4YzliN2JhOTc1ZjQxZTg1YjZiMWZiYzRkNjMwYzgyMmFkYmNhZDVjMWE5MDIzOWEzMmM) -## What is Fundamental Styles? +## What is Fundamental Library Styles? -Fundamental Styles is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With Fundamental Styles’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology. +Fundamental Library Styles is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.). With Fundamental Library Styles’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology. **Learn more at http://sap.github.io/fundamental-styles/** diff --git a/config/postcss.config.js b/config/postcss.config.js index bd7648ae34..f3b67cc8c1 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -38,10 +38,10 @@ module.exports = { }), minify, postcssBanner({ - banner: `Fundamental Styles v${packageVersion} + banner: `Fundamental Library Styles v${packageVersion} Copyright (c) ${year} SAP SE or an SAP affiliate company. Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/master/LICENSE)`, important: true}) ] -} \ No newline at end of file +} diff --git a/docs/_config.yml b/docs/_config.yml index 0b0b05ab0b..8baf6d1466 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -24,7 +24,7 @@ host: 127.0.0.1 # the port where the preview is rendered. You can leave this as is unless you have other Jekyll builds using this same port that might cause conflicts. in that case, use another port such as 4006. port: 4000 -feedback_subject_line: Fundamental Styles Documentation Feedback +feedback_subject_line: Fundamental Library Styles Documentation Feedback # used as a contact email for the Feedback link in the top navigation bar feedback_email: fundamental@sap.com diff --git a/docs/_data/sidebars/left-navigation-sidebar.yml b/docs/_data/sidebars/left-navigation-sidebar.yml index eecf614cc8..3d13828532 100755 --- a/docs/_data/sidebars/left-navigation-sidebar.yml +++ b/docs/_data/sidebars/left-navigation-sidebar.yml @@ -61,19 +61,23 @@ entries: output: web folderitems: - - - title: Contextual Menu - url: /patterns/contextual-menu.html - output: web - title: Combobox Input url: /patterns/combobox-input.html output: web + + - title: Contextual Menu + url: /patterns/contextual-menu.html + output: web - title: Date Picker url: /patterns/date-picker.html output: web + - title: Multi Input + url: /patterns/multi-input.html + output: web + - title: Search Input url: /patterns/search-input.html output: web @@ -247,7 +251,7 @@ entries: url: /resources/design-system-utilities.html output: web - - title: Fundamental Styles Implementation Libraries + - title: Fundamental Libraries url: /resources/fundamentals-libraries.html output: web diff --git a/docs/_data/strings.yml b/docs/_data/strings.yml index 3496747380..6d232a8928 100755 --- a/docs/_data/strings.yml +++ b/docs/_data/strings.yml @@ -1,4 +1,4 @@ # placed here for translation purposes -headerDisclaimer: Although the following examples use the `

` tag for the title element, the styling provided by Fundamental Styles will remain consistent for any heading level used. `

` should be reserved for the page title. +headerDisclaimer: Although the following examples use the `

` tag for the title element, the styling provided by Fundamental Library Styles will remain consistent for any heading level used. `

` should be reserved for the page title. search_placeholder_text: search... search_no_results_text: No results found \ No newline at end of file diff --git a/docs/_includes/display-component.html b/docs/_includes/display-component.html index 1e65634334..4f7b4ee1be 100644 --- a/docs/_includes/display-component.html +++ b/docs/_includes/display-component.html @@ -1,14 +1,4 @@ -{% assign min = 50 %} -{% assign max = 100000 %} -{% assign diff = max | minus: min %} -{% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min %}
-
{{ include.component }}
diff --git a/docs/_includes/topnav.html b/docs/_includes/topnav.html index bce48c4e81..28c2a6b461 100755 --- a/docs/_includes/topnav.html +++ b/docs/_includes/topnav.html @@ -4,7 +4,7 @@ diff --git a/docs/_layouts/full-width-page.html b/docs/_layouts/full-width-page.html index 27bc3e8c9b..1baa9bfa29 100644 --- a/docs/_layouts/full-width-page.html +++ b/docs/_layouts/full-width-page.html @@ -24,9 +24,9 @@ {% endif %} -
+
-

{{ page.title }}

+

{{ page.title }}

{% if page.summary %}
diff --git a/docs/_sass/_docs-display-component.scss b/docs/_sass/_docs-display-component.scss index ef4722f026..198c76ee99 100644 --- a/docs/_sass/_docs-display-component.scss +++ b/docs/_sass/_docs-display-component.scss @@ -112,10 +112,6 @@ margin-top: -410px; } } - - .docs-component__bg-toggle { - display: none; - } } &__app-example { diff --git a/docs/_sass/_docs-main-content.scss b/docs/_sass/_docs-main-content.scss index ebc4f2a6e8..00c725b2c0 100644 --- a/docs/_sass/_docs-main-content.scss +++ b/docs/_sass/_docs-main-content.scss @@ -32,7 +32,7 @@ } } .docs-content-full-width { - padding: 40px 40px 80px 40px; + padding: 40px 40px 80px 0; width: 100%; display: flex; flex-direction: column; diff --git a/docs/images/component-visual/date-picker.png b/docs/images/component-visual/date-picker.png new file mode 100644 index 0000000000..210771f60e Binary files /dev/null and b/docs/images/component-visual/date-picker.png differ diff --git a/docs/images/component-visual/time-picker.png b/docs/images/component-visual/time-picker.png new file mode 100644 index 0000000000..c8327148fa Binary files /dev/null and b/docs/images/component-visual/time-picker.png differ diff --git a/docs/index.html b/docs/index.html index 0d5e9d373a..d75de1c525 100755 --- a/docs/index.html +++ b/docs/index.html @@ -10,11 +10,10 @@
-

Develop with Fundamental +

Develop with Fundamental Library
Styles.

- Fundamental Styles is SCSS ready! Explore some functions and mixins to maintain consistency & quality of - your SCSS. + An open source library to consistent user interface across web applications.

@@ -44,7 +43,7 @@

Spacing.

Type.

-

Fundamental Styles uses a set of sans-serif system fonts. +

Fundamental Library Styles uses a set of sans-serif system fonts. They are timeless fonts ensures that the fresh, clean, and minimalist style. It works well across all browsers, devices, and platforms for customization to be easy.

Type.

+

library.

-

library.

{% include search-box.html %}
-

resources.

-
- Source Code - Guides -
-

+ Fundamental Library for Angular + Fundamental Library for React + Fundamental Library for Vue
- -
-
-
-

implementation libraries.

- - Fundamental for Angular - Fundamental for React - Fundamental for Vue -
- -
-
\ No newline at end of file diff --git a/docs/pages/foundation/getting-started-designers.html b/docs/pages/foundation/getting-started-designers.html index f70731a5c8..60a4767c40 100644 --- a/docs/pages/foundation/getting-started-designers.html +++ b/docs/pages/foundation/getting-started-designers.html @@ -5,7 +5,7 @@ toc: false permalink: foundation/getting-started-designers.html folder: foundation -summary: Create a harmonious experience for users with Fundamental Styles design language. As designers, deliver geat outcomes with flexible consistent design that guarantees faster build times. +summary: Create a harmonious experience for users with Fundamental Library Styles design language. As designers, deliver geat outcomes with flexible consistent design that guarantees faster build times. breadcrumb: Getting Started Designers --- @@ -29,11 +29,11 @@

Adaptive

[ IMAGE OF UI KIT ]
    -
  1. To start designing, download the Fundamental Styles Kit: Sketch or Axure. Fundament UI Kit is built to provide the core visual styles, components, and templates.
    2. +
  2. To start designing, download the Fundamental Library Styles Kit: Sketch or Axure. Fundament UI Kit is built to provide the core visual styles, components, and templates.
  3. Make sure to learn more about our UI Guidlines: Colors, Grid, Spacing and Type.

Releases

-

Fundamental Styles team is always making improvements to the kit. Keep track of updates.

+

Fundamental Library Styles team is always making improvements to the kit. Keep track of updates.

If you have any questions, email our team.

\ No newline at end of file diff --git a/docs/pages/foundation/index.md b/docs/pages/foundation/index.md index e2564e4b89..8eb995e598 100644 --- a/docs/pages/foundation/index.md +++ b/docs/pages/foundation/index.md @@ -5,14 +5,10 @@ toc: false sidebar: left-navigation-sidebar permalink: foundation/index.html folder: foundation -summary: Fiori Fundamentals is a unified, flexible design system that solves complex +summary: Fundamental Library Styles is a unified, flexible design system that solves complex problems in a meaningful way and creates simple intuitive experience. --- -

Fundamental Styles is a unified, flexible design system that solves complex -problems in a meaningful way and creates simple intuitive experience. -

-
@@ -30,7 +26,7 @@ problems in a meaningful way and creates simple intuitive experience. Type

- Fundamental Styles uses a set of sans-serif system fonts. + Fundamental Library Styles uses a set of sans-serif system fonts.

diff --git a/docs/pages/getting-started.md b/docs/pages/getting-started.md index aa687ffeb9..90f9cec11b 100644 --- a/docs/pages/getting-started.md +++ b/docs/pages/getting-started.md @@ -5,9 +5,9 @@ sidebar: left-navigation-sidebar toc: false permalink: getting-started.html folder: -summary: SAP Fiori Fundamentals is a light-weight presentation layer using HTML and CSS. With Fiori Fundamentals’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology. +summary: --- - Fundamental Styles is a light-weight presentation layer using HTML and CSS with the following implementations under active development: [Angular](https://sap.github.io/fundamental-ngx/){:target="_blank"}, [React](https://sap.github.io/fundamental-react/){:target="_blank"}, and [Vue](https://sap.github.io/fundamental-vue/){:target="_blank"}. With Fundamental Styles’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology. + Fundamental Library Styles is a light-weight presentation layer using HTML and CSS with the following implementations under active development: [Angular](https://sap.github.io/fundamental-ngx/){:target="_blank"}, [React](https://sap.github.io/fundamental-react/){:target="_blank"}, and [Vue](https://sap.github.io/fundamental-vue/){:target="_blank"}. With Fundamental Library Styles’ library of stylesheets and HTML tags, developers can build consistent Fiori apps in any web-based technology.
diff --git a/docs/pages/layouts/index.md b/docs/pages/layouts/index.md index fbd1280dab..2b31d9ca40 100644 --- a/docs/pages/layouts/index.md +++ b/docs/pages/layouts/index.md @@ -8,7 +8,7 @@ folder: layouts summary: --- -Layouts in Fundamental Styles are for structuring the main parts of your application. Organized in three main categories +Layouts in Fundamental Library Styles are for structuring the main parts of your application. Organized in three main categories
diff --git a/docs/pages/patterns/index.md b/docs/pages/patterns/index.md index fd4b60aee8..5cfbabeb1d 100644 --- a/docs/pages/patterns/index.md +++ b/docs/pages/patterns/index.md @@ -8,12 +8,11 @@ folder: Patterns summary: --- -Patterns in Fundamental Styles are completely composed from other components CSS and don't have any of their own unique class names or styles. +Patterns in Fundamental Library Styles are completely composed from other components CSS and don't have any of their own unique class names or styles.
{% for component in site.data.patterns.items %} -
{{component.meta}}
{{component.title}}
diff --git a/docs/pages/components/multi-input.md b/docs/pages/patterns/multi-input.md similarity index 98% rename from docs/pages/components/multi-input.md rename to docs/pages/patterns/multi-input.md index 3cf9ea2db4..86e414a973 100644 --- a/docs/pages/components/multi-input.md +++ b/docs/pages/patterns/multi-input.md @@ -4,8 +4,8 @@ id: multi-input keywords: multi input sidebar: left-navigation-sidebar toc: false -permalink: components/multi-input.html -folder: components +permalink: patterns/multi-input.html +folder: patterns summary: --- diff --git a/docs/pages/resources/design-system-utilities.md b/docs/pages/resources/design-system-utilities.md index 8f921d1769..12f6d5af0d 100644 --- a/docs/pages/resources/design-system-utilities.md +++ b/docs/pages/resources/design-system-utilities.md @@ -5,9 +5,16 @@ sidebar: left-navigation-sidebar toc: false permalink: resources/design-system-utilities.html folder: resources -summary: The following guide covers all the major utility features of the Fundamental Styles (FDUI) design system toolkit. We recommend that you utilize these functions, mixins and helper classes to maintain consistency throughout your application. Using the toolkit features will ensure that you application will remain compatible and easy to upgrade with the future versions of FDUI, transition between themes and customization. +summary: The following guide covers some major utility features of the Fundamental Library Styles design system toolkit. --- + + + ## Text Utilities {: .docs-header-h2} @@ -50,18 +57,6 @@ Use these CSS classes to control the text size. Used mainly for content text, al {% endcapture %} {% include display-component.html component=type-util %} -## Type Face -{: .docs-header-h2} - -`fd-has-font-family-body` renders Open-Sans font. -`fd-has-font-family-header` renders Roboto font. -{% capture type-face %} -

This is body text

-

This is header text

-

This is code text

-{% endcapture %} -{% include display-component.html component=type-face %} - ## Type Weights {: .docs-header-h2} @@ -72,87 +67,6 @@ Use these CSS classes to control the text size. Used mainly for content text, al {% endcapture %} {% include display-component.html component=type-weight %} -## Colors -{: .docs-header-h2} - -All colors on the [color palette]({{site.baseurl}}/foundation/colors.html). Can be accessed via SCSS function and respective CSS classes. - -### Color Function -{: .docs-header-h3} - -Colors can be accessed via color function [`fd-color({group}, {shade})`](how-to-use-scss.html#core-functions-and-mixins) - -### Color Helper classes -{: .docs-header-h3} - -Helper classes are available as a foreground color class `fd-has-color-{group}-{shade}` or as a background color `fd-has-background-color-{group}-{shade}`. -A foreground color class applies the color property to the element for example `.fd-has-color-primary` results in `color: ##006fbb !important` - -{: .docs-table} -| Class structure | {group}-{shade} options | -| ------------------------------- | ----------------------- | -| Foreground Class:
`.fd-has-color-{group}-{shade}`

Background Class:
`.fd-has-background-color-{group}-{shade}` | `action` - `1`, `2`, `3`
`shell` - `1`, `2`
`text` - `1`, `2`, `3`, `4`
`background` - `1`, `2`, `3`, `4`, `5`, `6`
`neutral` - `1`, `2`, `3`, `4`
`status` - `1`, `2`, `3`, `4`, `5`
`accent` - `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `13`, `14`, `15`, `16`| - -Please check the [colors page]({{site.baseurl}}/foundation/colors.html) to see full color palette. - -Some examples of color helper classes. -{% capture color %} - -

Action Color Group

-

.fd-has-color-action-1

-

.fd-has-color-action-2

- -

Shell Color Group

-

.fd-has-background-color-shell-1

-

.fd-has-color-shell-2

- -

Text Color Group

-

.fd-has-color-text-1

-

.fd-has-color-text-2

-

.fd-has-color-text-3

-

.fd-has-color-text-4

- -

Background Color Group

-

.fd-has-color-background-1

-

.fd-has-color-background-2

-

.fd-has-color-background-3

-

.fd-has-color-background-4

-

.fd-has-color-background-5

-

.fd-has-color-background-6

- -

Neutral Color Group

-

.fd-has-background-color-netural-1

-

.fd-has-background-color-netural-2

-

.fd-has-background-color-netural-3

-

.fd-has-background-color-netural-4

- -

Status Color Group

-

.fd-has-background-color-status-1

-

.fd-has-background-color-status-2

-

.fd-has-background-color-status-3

-

.fd-has-background-color-status-4

-

.fd-has-background-color-status-5

- -

Accent Color Group

-

.fd-has-background-color-accent-1

-

.fd-has-background-color-accent-2

-

.fd-has-background-color-accent-3

-

.fd-has-background-color-accent-4

-

.fd-has-background-color-accent-5

-

.fd-has-background-color-accent-6

-

.fd-has-background-color-accent-7

-

.fd-has-background-color-accent-8

-

.fd-has-background-color-accent-9

-

.fd-has-background-color-accent-10

-

.fd-has-background-color-accent-11

-

.fd-has-background-color-accent-12

-

.fd-has-background-color-accent-13

-

.fd-has-background-color-accent-14

-

.fd-has-background-color-accent-15

-

.fd-has-background-color-accent-16

-{% endcapture %} -{% include display-component.html component=color class="color-examples"%} - ## Margin and Padding {: .docs-header-h2} diff --git a/docs/pages/resources/fundamentals-libraries.md b/docs/pages/resources/fundamentals-libraries.md index 05f95b40e4..8e623e9aa0 100644 --- a/docs/pages/resources/fundamentals-libraries.md +++ b/docs/pages/resources/fundamentals-libraries.md @@ -1,22 +1,22 @@ --- -title: Fundamental Styles Implementation Libraries +title: Fundamental Libraries keywords: libraries frameworks angular vue react sidebar: left-navigation-sidebar toc: false permalink: resources/fundamentals-libraries.html folder: resources -summary: Fundamental Styles can be used with your framework of choice, however fundamentals-react, fundamentals-ngx, and fundamentals-vue are currently in active development. +summary: Fundamental Library Styles can be used with your framework of choice, however Fundamental Library for React, Fundamental Library for Angular, and Fundamental Library for Vue are currently in active development. ---
-## Fundamental NGX ([GitHub](https://github.com/SAP/fundamental-ngx){:target="_blank"}) +## Fundamental Library for Angular ([GitHub](https://github.com/SAP/fundamental-ngx){:target="_blank"}) {: .docs-header-h2} -[Fundamental NGX](https://sap.github.io/fundamental-ngx/){:target="_blank"} is a set of Angular components built with the Fundamental Styles library. +[Fundamental Library for Angular](https://sap.github.io/fundamental-ngx/){:target="_blank"} is a set of Angular components built with the Fundamental Library Styles. -## Fundamental React ([GitHub](https://github.com/SAP/fundamental-react){:target="_blank"}) +## Fundamental Library for React ([GitHub](https://github.com/SAP/fundamental-react){:target="_blank"}) {: .docs-header-h2} -[Fundamental React](https://sap.github.io/fundamental-react/){:target="_blank"} is a set of React components built with the Fundamental Styles library. +[Fundamental Library for React](https://sap.github.io/fundamental-react/){:target="_blank"} is a set of React components built with the Fundamental Library Styles. -## Fundamental Vue ([GitHub](https://github.com/SAP/fundamental-vue){:target="_blank"}) +## Fundamental Library for Vue ([GitHub](https://github.com/SAP/fundamental-vue){:target="_blank"}) {: .docs-header-h2} -[Fundamental Vue](https://sap.github.io/fundamental-vue/){:target="_blank"} is a set of Vue components built with the Fundamental Styles library. \ No newline at end of file +[Fundamental Library for Vue](https://sap.github.io/fundamental-vue/){:target="_blank"} is a set of Vue components built with the Fundamental Library Styles. \ No newline at end of file diff --git a/docs/pages/resources/index.md b/docs/pages/resources/index.md index 18a058d637..6d424ef4f2 100644 --- a/docs/pages/resources/index.md +++ b/docs/pages/resources/index.md @@ -9,7 +9,6 @@ summary: ---
-
@@ -21,7 +20,7 @@ summary:

- Fundamental Styles Implementation Libraries + Fundamental Library Styles Implementation Libraries

diff --git a/package.json b/package.json index c3a329731c..1bd5f84535 100644 --- a/package.json +++ b/package.json @@ -90,4 +90,4 @@ "last 2 versions", "IE 11" ] -} +} \ No newline at end of file diff --git a/src/_settings.scss b/src/_settings.scss index 1d7b7c04b7..e81117293e 100644 --- a/src/_settings.scss +++ b/src/_settings.scss @@ -4,7 +4,7 @@ // library namespace $fd-namespace: fd !default; -// ————————v Fundamental Styles FOUNDATION ————————v +// ————————v Fundamental Library Styles FOUNDATION ————————v // breakpoints $fd-breakpoints: ( @@ -213,7 +213,7 @@ $fd-colors-background-states: map-merge( $fd-colors-background-states ); -// ————————^ Fundamental Styles FOUNDATION ————————^ +// ————————^ Fundamental Library Styles FOUNDATION ————————^ // features $fd-space-modify: normal !default; // normal, compact diff --git a/test/templates/pages/layouts/starter.njk b/test/templates/pages/layouts/starter.njk index d16d49c12d..b03ccb8514 100644 --- a/test/templates/pages/layouts/starter.njk +++ b/test/templates/pages/layouts/starter.njk @@ -7,7 +7,7 @@ - Fundamental Styles | Starter Page | {{ title }} + Fundamental Library Styles | Starter Page | {{ title }}