OCIO » SliverHeader

Changes for document SliverHeader

Last modified by Matthew Harshbarger on 2017/10/23 11:46
From version 7.1
edited by Matthew Harshbarger
on 2017/09/26 15:23
To version 8.1
edited by Matthew Harshbarger
on 2017/09/26 15:26
Change comment: There is no comment for this version
Content changes
(((
)))
(% style="font-size: 22.54px; color: rgb(0, 90, 131);" %)**__How to Implement the State of Iowa Sliver Header in an app/site:__**(((
(% style="color: rgb(0, 0, 0); font-family: Arial; font-size: 11pt; white-space: pre-wrap;" %)Reference: <script src="~/~/[[sliver.iowa.gov/sliver.js>>http://sliver.iowa.gov/sliver.js||style="font-family: Arial; white-space: pre-wrap; color: rgb(17, 85, 204);" target="_blank"]]" async defer></script>)))
(% style="text-align: start;" %)(((
(% style="font-style: normal; font-weight: normal; text-align: start; font-size: 11pt; font-family: Arial; color: rgb(0, 0, 0); vertical-align: baseline; white-space: pre-wrap;" %)New Location:== (% style="font-style: normal; font-weight: normal; text-align: start; color: rgb(0, 0, 0); font-size: 11pt; font-family: Arial; text-decoration-line: underline; vertical-align: baseline; white-space: pre-wrap;" %)[[https:~~/~~/sliver.iowa.gov/sliver.js>>https://sliver.iowa.gov/sliver.js||style="color: rgb(17, 85, 204);" target="_blank"]]==
)))
(% style="text-align: start;" %)(((
(% style="font-size: 14.6667px; white-space: pre-wrap; font-family: Arial; font-size: 14.6667px; font-style: normal; font-weight: normal; text-align: start; color: rgb(0,0,0)" %)New Location(% style="font-size: 14.6667px; white-space: pre-wrap;" %): (% class="m_-2076160791309139465gmail-html-tag" style="color: rgb(77, 77, 77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; white-space: pre-wrap;" %)<script (% class="m_-2076160791309139465gmail-html-tag m_-2076160791309139465gmail-html-attribute-name" style="color: rgb(77,77,77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; background-color: rgb(214,225,231); white-space: pre-wrap; font-size: 13px" %)type(% class="m_-2076160791309139465gmail-html-tag" style="color: rgb(77, 77, 77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; white-space: pre-wrap;" %)="(% class="m_-2076160791309139465gmail-html-tag m_-2076160791309139465gmail-html-attribute-value" style="color: rgb(77,77,77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; background-color: rgb(214,225,231); white-space: pre-wrap; font-size: 13px" %)text/javascript(% class="m_-2076160791309139465gmail-html-tag" style="color: rgb(77, 77, 77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; white-space: pre-wrap;" %)" (% class="m_-2076160791309139465gmail-html-tag m_-2076160791309139465gmail-html-attribute-name" style="color: rgb(77,77,77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; background-color: rgb(214,225,231); white-space: pre-wrap; font-size: 13px" %)src(% class="m_-2076160791309139465gmail-html-tag" style="color: rgb(77, 77, 77); font-style: normal; font-weight: normal; text-align: start; font-family: monospace; font-size: medium; white-space: pre-wrap;" %)="[[https:~~/~~/iowa.gov/sliver/sliver.js>>https://iowa.gov/sliver/sliver.js||class="m_-2076160791309139465gmail-html-attribute-value m_-2076160791309139465gmail-html-resource-link" style="font-size: 13px; color: rgb(17, 85, 204);" target="_blank"]]"></script>== How to Implement the State of Iowa Sliver Header in an app/site: ==
)))
(((
(% style="color: rgb(0, 0, 0); font-family: Arial; font-size: 11pt; white-space: pre-wrap;" %)Development Team notes:)))
* There is no need to link to a test instance, please link directly to the production sliver code. (((
* The sliver should NOT be intentionally cached.Reference: <script src="~/~/sliver.iowa.gov/sliver.js" async defer></script>
)))
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; text-align: start;" %)
(% style="text-align: start;" %)
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal;" %)New Location: https:~/~/sliver.iowa.gov/sliver.js
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal;" %)Developer Notes:)))
(% style="font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; text-align: start;" %)(((
(% style="font-size: 14px;" %)Project can be found in gForge: (% style="font-family: sans-serif; font-size: 14px; font-style: normal; font-weight: normal; text-align: start; " %)https:~/~/forge.iowa.gov/gf/project/sliver/New Location: <script type="text/javascript" src="https:~/~/sliver.iowa.gov/sliver.js"></script>
)))
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; text-align: start;" %)Please ensure the various sliver classes are uniquely named, or prefixed with the sliver ID.Old Location: <script type="text/javascript" src="https:~/~/iowa.gov/sliver/sliver.js"></script>
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; text-align: start;" %)
(% style="font-size: 12.8px;" %)Examples: [[https:~~/~~/iowa.gov/sliver/sliver-icons-limited/styles.css>>https://iowa.gov/sliver/sliver-icons-limited/styles.css||style="font-size: 12.8px; color: rgb(17, 85, 204);" target="_blank"]]== Development Team notes: ==
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; text-align: start;" %)
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; text-align: start;" %)
Targeting any class that starts with or contains icon- isn't a good idea. It turns out that's pretty common. Go figure. Also icon-search, icon-users, too common. data-icon should all be updated as well. (% style="font-size: 12.8px;" %)Please updateThere is no need to .sliver-icon-whatever or add #(% style="font-size: 12.8px; color: rgb(0, 0, 0); white-space: pre-wrap;" %)iowa_sliver as we don't wantlink to find and fix every instance where each app has its own icon- stylesa test instance, please link directly to the production sliver code.
(% style="font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-weight: normal; text-align: start;" %)
(% style="font-size: 12.8px;" %)It looks like the bar's css is setup better: [[https:~~/~~/iowa.gov/sliver/sliver-1.5.css>>https://iowa.gov/sliver/sliver-1.5.css||style="font-size: 12.8px; color: rgb(17, 85, 204);" target="_blank"]]The sliver should NOT be intentionally cached.
(((
Developer Notes:
(((
Project can be found in gForge: https:~/~/forge.iowa.gov/gf/project/sliver/
)))
(((
)))
(((
Please ensure the various sliver classes are uniquely named, or prefixed with the sliver ID.
)))
(((
)))
(((
Examples: https:~/~/iowa.gov/sliver/sliver-icons-limited/styles.css
)))
(((
Targeting any class that starts with or contains icon- isn't a good idea. It turns out that's pretty common. Go figure. Also icon-search, icon-users, too common. data-icon should all be updated as well. Please update to .sliver-icon-whatever or add #iowa_sliver as we don't want to find and fix every instance where each app has its own icon- styles
)))
(((
It looks like the bar's css is setup better: https:~/~/iowa.gov/sliver/sliver-1.5.css
)))

This wiki is licensed under a Creative Commons 2.0 license
XWiki Enterprise 3.0.36132 - Documentation