ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 09:26:45 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
Style-guide thematic color constants added;
Normalized doc-title content across files;
Additional detail in glyphs.html;
This commit is contained in:
Charles Hacskaylo 2017-01-31 18:12:29 -08:00
parent 7543faa577
commit 2c3a09f448
5 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
example/styleguide/res/sass/_style-guide-base.scss
View File

@ -24,6 +24,10 @@
text-align: justify;
margin: auto 10%;
a.link {
color: $colorKey;
}
h1, h2 {
color: pullForward($colorBodyFg, 20%);
}
@ -130,11 +134,10 @@
// Example grid of glyphs
.items-holder.grid {
.item.glyph-item {
$d: 200px;
margin-bottom: 50px;
margin-right: 10px;
height: $d;
width: $d;
height: 200px;
width: 225px;
text-align: left;
.glyph {
color: $colorGlyphExample;
@ -143,10 +146,13 @@
text-align: center;
}
table.details td.label {
color: pushBack($colorBodyFg, 10%);
text-transform: uppercase;
white-space: nowrap;
table.details td {
font-size: inherit;
&.label {
color: pushBack($colorBodyFg, 10%);
text-transform: uppercase;
white-space: nowrap;
}
}
}
}

2
example/styleguide/res/sass/style-guide-espresso.scss
View File

@ -28,7 +28,7 @@
@import "../../../../platform/commonUI/general/res/sass/icons";
// Thematic constants
$colorCode: rgba(black, 0.1);
$colorCode: rgba(black, 0.2);
$colorGlyphExample: #fff;
@import "style-guide-base";

2
example/styleguide/res/templates/controls.html
View File

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information.
-->
<div class="l-style-guide s-text">
<p class="doc-title">Open MCT Style Guide: Controls</p>
<p class="doc-title">Open MCT Style Guide</p>
<h1>Controls</h1>
<div class="l-section">
<p>Intro about controls</p>

4
example/styleguide/res/templates/glyphs.html
View File

@ -124,13 +124,13 @@
"></div>
<div class="l-style-guide s-text">
<p class="doc-title">Open MCT Style Guide: Glyphs</p>
<p class="doc-title">Open MCT Style Guide</p>
<h1>Glyphs</h1>
<div class="l-section">
<p>Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.</p>
<p>New glyphs can be added if needed. Take care to observe the following guidelines:
<ul>
<li>Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a &quot;crisp&quot; 16px approach.</li>
<li>Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a &quot;crisp&quot; 16px approach. Find out more about <a class="link" target="_blank" href="http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon">crisp symbol fonts</a>.</li>
<li>In general, the symbol should occupy most of a square area as possible; avoid symbol aspect ratios that are squat or tall.</li>
<li>For consistency and legibility, symbols are designed as mostly solid shapes. Avoid using thin lines or fine detail that will be lost when the icon is sized down. In general, no stroke should be less than 32 pixels.</li>
<li>Symbols should be legible down to a minimum of 12 x 12 pixels.</li>

2
example/styleguide/res/templates/input.html
View File

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information.
-->
<div class="l-style-guide s-text">
<p class="doc-title">Open MCT Style Guide: Text Input</p>
<p class="doc-title">Open MCT Style Guide</p>
<h1>Text Input</h1>
<div class="l-section">
<p>Intro about text input elements.</p>