diff --git a/src/stylesheets/typography/_global.scss b/src/stylesheets/typography/_global.scss index 2e4661967..94b1e7742 100644 --- a/src/stylesheets/typography/_global.scss +++ b/src/stylesheets/typography/_global.scss @@ -48,7 +48,7 @@ a { } } -p { +p, .p { @include nice-font($scale: 0, $line-height: 1.6); font-feature-settings: 'kern', 'onum', 'liga'; } diff --git a/src/stylesheets/typography/_headings.scss b/src/stylesheets/typography/_headings.scss index 77d7e231f..7f183fcf7 100644 --- a/src/stylesheets/typography/_headings.scss +++ b/src/stylesheets/typography/_headings.scss @@ -8,9 +8,42 @@ h3, h4, h5, h6 { + clear: both; margin: 0; } +.heading { + clear: both; + + &--primary { + @include h1; + } + + &--secondary { + @include h2; + } + + &--tertiary { + @include h3; + } + + &--quaternary { + @include h4; + } + + &--quinary { + @include h5; + } + + &--senary { + @include h6; + } + + &--separator { + border-bottom: 1px solid get-colour(grey); + } +} + h1, .h1 { @include h1; diff --git a/web/client/stylesheets/components/_swatch.scss b/web/client/stylesheets/components/_swatch.scss new file mode 100644 index 000000000..244fd2118 --- /dev/null +++ b/web/client/stylesheets/components/_swatch.scss @@ -0,0 +1,26 @@ +.swatch { + border-radius: 999px; + display: block; + float: left; + height: 100px; + line-height: 100px; + margin: 0 8px 8px; + text-align: center; + width: 100px; + + @each $name, $palette in $palettes { + + @each $key, $hex in $palette { + &--#{$name}-#{$key} { + background: $hex; + + &:after { + color: invert($hex); + content: '#{$hex}'; + // TODO: Change colour based on hex + } + } + } + } + +} diff --git a/web/client/stylesheets/main.scss b/web/client/stylesheets/main.scss index 1044c53d7..64af4734d 100644 --- a/web/client/stylesheets/main.scss +++ b/web/client/stylesheets/main.scss @@ -5,5 +5,6 @@ // Components @import 'components/example'; +@import 'components/swatch'; // Other diff --git a/web/server/views/404.njk b/web/server/views/404.njk index 2d925851c..f9366cb68 100644 --- a/web/server/views/404.njk +++ b/web/server/views/404.njk @@ -3,8 +3,10 @@ {% block body %} -

Page not found

+
+

Page not found

-

Sorry, that page could not be found

+

Sorry, that page could not be found

+
{% endblock %} diff --git a/web/server/views/index.njk b/web/server/views/index.njk index 22e343d95..ce9b6f882 100644 --- a/web/server/views/index.njk +++ b/web/server/views/index.njk @@ -1,6 +1,15 @@ {% extends "layouts/_layout.njk" %} {% set title = "NICE Bootstrap v2" %} +{% macro item(title, href, description) %} +
+

{{ title }}

+

+ {{ description }} +

+
+{% endmacro %} + {% block body %}
@@ -25,28 +34,74 @@

Welcome to NICE Experience

-

Modern, semantic & accessible

+

Your source for creating beautiful, consistent experiences across NICE

+ +

Style Library

+ +

The foundations and patterns that are to be used for faster product development.

-
-

What is it?

+ + {{ item("Layout", "/style-guide/layout", "Containers, grid and layouts") }} + + {{ item("Typography", "/style-guide/typography", "Headings, paragraphs, featured text, quotations, lists, links") }} + + {{ item("Buttons", "/style-guide/buttons", "Button text, button blocks") }} + + {{ item("Colour", "/style-guide/colour", "Colour contrast, SASS variables, colour palettes") }} + + {{ item("Buttons", "/style-guide/buttons", "Button text, button blocks") }} + +
+ +
+

UI Components

+ +

Further patterns

+ +
+ + {{ item("Breadcrumbs", "/style-guide/breadcrumbs", "Secondary navigation scheme that reveals the user's location") }} + + {{ item("Tabs", "/style-guide/tabs", "Content is separated into different panes, with only one pane viewable at a time.") }} + +
+
+ +

SASS

+ +

We use SASS as our CSS pre-processor

+ +
+
+

Syntax

+

+ Syntax and formatting +

+
+
+

Naming

+

+ Variable naming and BEM convention +

+
+
+

Layout

- It's a modern replacement for NICE.Bootstrap and NICE.UI with improved tooling and documentation, allowing consistent and rapid prototyping for NICE online services and web applications. + Grid unit proportions, gutters and spacing.

-
-

Not just another UI kit…

+
+

Colour

- We haven't re-invented the wheel. - We've used our experience and borrowed & adapted the best bits from Bootstrap and GOV.UK's Front End Toolkit & Elements. + Colour contrast, Sass variables, colour palettes.

-
-

Getting started

+
+

Colour

- We've made it easy to extend and add to, and equally easy to integrate it into your application. + Colour contrast, Sass variables, colour palettes.

- Get started
diff --git a/web/server/views/partials/style-guide-nav.njk b/web/server/views/partials/style-guide-nav.njk new file mode 100644 index 000000000..34b8ac8f9 --- /dev/null +++ b/web/server/views/partials/style-guide-nav.njk @@ -0,0 +1,9 @@ + diff --git a/web/server/views/style-guide/buttons.njk b/web/server/views/style-guide/buttons.njk new file mode 100644 index 000000000..18f19fdbf --- /dev/null +++ b/web/server/views/style-guide/buttons.njk @@ -0,0 +1,85 @@ +{% extends "../layouts/_sidebar.njk" %} +{% set title = "Buttons" %} + +{% block sidebar %} + + {% include "partials/style-guide-nav.njk" %} + +{% endblock %} + + +{% block main %} + +

Buttons

+ + + +
+

Button styles

+ +
    +
  • Buttons can be <a>, <button> or <input>
    • +
  • Use BEM mofifiers for different types
    • +
+ + {% example -%} +
+

+

Primary button

+

+
+ {%- endexample %} +
+ +
+

Sizes

+ +
    +
  • Use BEM modifiers for sizes
    • +
  • Size and type modifiers can be combined
    • +
+ + {% example -%} +
+
+

+

+

+

+

+
+
+

+

+

+

+

+
+
+ {%- endexample %} +
+ +
+

Groups

+ +
    +
  • Buttons can be grouped together
    • +
  • Typically a default/primary and a secondary
    • +
  • Don't group more than 3 buttons
    • +
+ + {% example -%} +

+ + +

+ {%- endexample %} +
+ +{% endblock %} diff --git a/web/server/views/style-guide/colour.njk b/web/server/views/style-guide/colour.njk new file mode 100644 index 000000000..81372d017 --- /dev/null +++ b/web/server/views/style-guide/colour.njk @@ -0,0 +1,48 @@ +{% extends "../layouts/_sidebar.njk" %} +{% set title = "Colour" %} + +{% block sidebar %} + + {% include "partials/style-guide-nav.njk" %} + +{% endblock %} + + +{% block main %} + +

Colours

+ + + +
+

Usage

+ +
+ + +
+

Palettes

+ +

Oranges

+ +
+ +

Blues

+ +
+
+
+
+ +

Purples

+ +
+ +
+ +{% endblock %} diff --git a/web/server/views/style-guide/index.njk b/web/server/views/style-guide/index.njk index c4dde7ee1..83110a7c4 100644 --- a/web/server/views/style-guide/index.njk +++ b/web/server/views/style-guide/index.njk @@ -9,31 +9,6 @@

This guide shows how to make your service look consistent with the rest of NICE.

- -
-
-

Layout

-

- Grid unit proportions, gutters and spacing. -

-
-
-

Typography

-

- Headings, body text, links, lists, inset text, hidden text. -

-
-
-

Colour

-

- Colour contrast, Sass variables, colour palettes. -

-
-
-
-
-
-
{% endblock %} diff --git a/web/server/views/style-guide/layout.njk b/web/server/views/style-guide/layout.njk new file mode 100644 index 000000000..0af13973f --- /dev/null +++ b/web/server/views/style-guide/layout.njk @@ -0,0 +1,35 @@ +{% extends "../layouts/_sidebar.njk" %} +{% set title = "Layout" %} + +{% block sidebar %} + + {% include "partials/style-guide-nav.njk" %} + +{% endblock %} + + +{% block main %} + +

Layout

+ + + +
+

Containers

+ +
+ + +
+

Grid

+ + + +
+ +{% endblock %} diff --git a/web/server/views/style-guide/typography.njk b/web/server/views/style-guide/typography.njk index 44853ccc9..a066f2e40 100644 --- a/web/server/views/style-guide/typography.njk +++ b/web/server/views/style-guide/typography.njk @@ -3,16 +3,7 @@ {% block sidebar %} -

Typography

- - + {% include "partials/style-guide-nav.njk" %} {% endblock %} @@ -21,6 +12,16 @@

Typography

+ +

Intro

@@ -116,25 +117,6 @@
-
-

Buttons

- - {% example -%} -
-

-

Primary button

-

-
-

-

-

- - -

- {%- endexample %} -
- -

Quotations