Merge pull request #134 from youseedk/small-design-guidelines-improve…

…ments

Improvement of titles and other small changes to desgin guidelines

fractal-theme/assets/scss/src/_contributors.scss

@@ -3,9 +3,9 @@
   flex-flow: row wrap;
 
   &__image {
-    flex: 0 0 70px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    flex: 0 0 60px;
+    margin: 5px;
+    text-align: center;
 
     img {
       vertical-align: middle;
@@ -16,7 +16,8 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 70px;
+    width: 60px;
     font-size: 12px;
+    text-align: center;
   }
 }

fractal-theme/assets/scss/src/_icons.scss

@@ -36,10 +36,6 @@
     background: white;
     padding-bottom: 12px;
     text-align: center;
-
-    @media screen and (max-width: 700px) {
-      display: none;
-    }
   }
 
   &__download-link {

src/docs/02-Design Guidelines/01-intro.md → src/docs/02-Design Guidelines/01-introduction.md

@@ -1,10 +1,10 @@
-# Why a Design System
-> It helps creating a consistent and distinctive brand experience
-
-## What is a Design System?
-A Design System is a living, breathing document that contains all our brand’s digital manifestations and a component library that cointains all our visual assets (components, iconography, color pale!es, grids, etc).
-Its purpose consists of explaning to everyone that will work with the brand on a digital environment how to use the brand’s assets the best way possible taking into to consideration, for example, physical color VS display color or interactivity VS static images.
-
-## Offline VS Online
-There’s a big difference the way you show a brand offline and on online plataforms. A Design System should be designed with a 100% digital mindset, which means, taking into consideration, animations, microinteractions and most importantly, interactivity.
-Those elements cannot be translated into and offline mean, therefore, a Digital CVI should live online, where all those manifestations can be demonstrated and exemplified.
+## Why a Design System
+It helps creating a consistent and distinctive brand experience
+
+## What is a Design System?
+A Design System is a living, breathing document that contains all our brand’s digital manifestations and a component library that cointains all our visual assets (components, iconography, color pale!es, grids, etc).
+Its purpose consists of explaning to everyone that will work with the brand on a digital environment how to use the brand’s assets the best way possible taking into to consideration, for example, physical color VS display color or interactivity VS static images.
+
+## Offline VS Online
+There’s a big difference the way you show a brand offline and on online plataforms. A Design System should be designed with a 100% digital mindset, which means, taking into consideration, animations, microinteractions and most importantly, interactivity.
+Those elements cannot be translated into and offline mean, therefore, a Digital CVI should live online, where all those manifestations can be demonstrated and exemplified.

src/docs/02-Design Guidelines/02-Design-Principles.md

@@ -1,4 +1,3 @@
-# Design Principles
 The Design Principles are the set of qualities that we want customers to associate with the brand every time they interact with it in a digital environment.
 
 ## Alive

src/docs/02-Design Guidelines/03-8-Point-Grid.md

@@ -1,4 +1,3 @@
-# 8 Point Grid System
 Uses increments of 8 to size and space out the elements on a page. This means that any defined height or width, margin or padding will be an increment of 8.
 
 Nowadays, the majority of popular screen sizes are divisible by 8 which makes for an easy fit. Scaling by increments of 8 offers a good amount of options without overloading you with variables like a 6 point system, or limiting you like a 10 point system.

src/docs/02-Design Guidelines/04-Accessibility.md

@@ -1,4 +1,3 @@
-# Accessibility Rules
 For too long, accessibility has been misunderstood as building sites for a small group of users of assistive technology — a blind person using a screen reader for example — and far too o!en dismissed as too complex, too time-consuming, or “not our customers.” Accessibility, however, is not just for a single, small group, but for an estimated 15% of people worldwide who have some level of temporary visual, auditory, motor, and cognitive impairments.
 
 ## Color contrast

src/docs/02-Design Guidelines/05-Animation.md → src/docs/02-Design Guidelines/05-Animations.md

@@ -1,12 +1,11 @@
-# Animation
-Microinteractions are the controls that set a website in motion. They also improve usability and make simple tasks – like turning the sound on or off, liking a status update, or sharing a post – not only easy, but also engaging. They blend into a user’s experience naturally.
-
-> “Microinteractions happen through the functional, interactive details of a product, and details... aren’t just the details; they are the design.” - Dan Saffer
-
-## Purpose
-Animations should be fast and nimble, never keeping the user waiting longer than is necessary. The aim is to prioritize user-perceived performance over technical benchmarks. Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.
-
-## When to use
-- Guide the user focus between views or to highlight something
-- Hints at what will happen if a user completes a gesture
-- As a distraction from what’s happening behind the scenes (like fetching content or loading the next view)
+Microinteractions are the controls that set a website in motion. They also improve usability and make simple tasks – like turning the sound on or off, liking a status update, or sharing a post – not only easy, but also engaging. They blend into a user’s experience naturally.
+
+> “Microinteractions happen through the functional, interactive details of a product, and details... aren’t just the details; they are the design.” - Dan Saffer
+
+## Purpose
+Animations should be fast and nimble, never keeping the user waiting longer than is necessary. The aim is to prioritize user-perceived performance over technical benchmarks. Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.
+
+## When to use
+- Guide the user focus between views or to highlight something
+- Hints at what will happen if a user completes a gesture
+- As a distraction from what’s happening behind the scenes (like fetching content or loading the next view)

src/docs/02-Design Guidelines/08-typography.md

@@ -1,4 +1,3 @@
-# Typography
 Typographic hierarchy organizes type and establishes an order of importance within the content and this helps the user to easily find what they are looking for and navigate the content without hesitation.
 
 > For accessibility reasons we should aim for a line-height adhering to the 8 point grid, which means rounding up numbers to meet the grid specs.

src/docs/02-Design Guidelines/09-Cards.md

@@ -1,4 +1,3 @@
-# Cards
 In the physical world, objects can be stacked or affixed to one another, but cannot pass through each other. Objects also cast shadows and reflect light. Cards behave like objects so they should respect the same rules as objects.
 
 Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length. A card collection is a layout of cards on the same plane.

src/docs/02-Design Guidelines/10-Bow.md

@@ -1,5 +1,4 @@
-# The Bow
-Use the Curved Horizon as a breaker or to introduce the next block of content. It consists of a circle inside a mask.
+Use the Curved Horizon (Bow) as a breaker or to introduce the next block of content. It consists of a circle inside a mask.
 
 ## When to use the bow
 - In the TOP Tile / Hero Image (to add a clear separation of content)