-
Style Guide
Introduction
For the development of the component library we use a flexible grid of 8px, so we stablis a square of 8px as a "s" for the documentation. Aswell as defining the colors needed for all of them.
For the documentation we have use the zeplin styguide fuctionality, taking advantage of the "color and text styles" and "components" sections, with a really clear explanation.
-
#active_blue
RGB: #00c9ff
-
#r_error
RGB: #f57171
-
#g-success
RGB: #2ed93f
-
#pale-grey
RGB: #f4f6f7
-
#brown-grey
RGB: #9b9b9b
-
#black
RGB: #444444
Inputs
For the input I have use the animation from placeholder to label of google material design.
Here we can see the static, focus, filled and error status and an example of dropdown.
In the ncomplete style guide it's defined all the types of inputs, as searchbar with suggestions, pass inputs or scrollable text-areas.
Dialogs
These are two types of siple dialogs, with one and two actions, the primary one at the right and with a blue CTA to improve the conversion of these kind of actions
In the ncomplete style guide we have also alert with a color code for severity and all the mixes with one, two o none actions
Buttons
These are the buttons of the component library, and we can see the static and hover with a ripple effect, that disappears in the on-click, also floating buttons and fixed buttons for the bottom of the screen when its needed in the mobile version and some scrollable contents in desktop.
Menus
These menus are used in the control panes and other projects that have the same dependencies, we can see the desktop version and the mobile one, that behaves as a TabBar as it's defined in material design 2, if needed the las section opens an overlay menu with the rest of functionalities, we also have some pop-up menus.
Tables
These is the redesign of the control panel tables to adjust to all posible cases in other actual projects and future ones. all the elements are interchangeable, so it can fit in any defined case needed until now.
In the ncomplete style guide we have also expandable rows and a few more cases as hover menus
