Built uppon and extending the Tachyons framework and CSS Flex-Box.
Introduction
This is a quick introduction to the modules and functionality built into the ADRS application. While this style-guide is usefull in of itself, it is meant to be used and understood along side the rendered template files found in the root of this project (basically everything with a .html in the file name).
So please also look at the markup of these files in your own implementation.
Notes
Further resources
This toolset is built uppon a subset of the Tachions CSS framework. Check out the Tachyons docs for an in-depth look
at how each module works.
For more info and resources on how this project is structured,
and the sass conventions being used, see the SASS Structure Notes,
found in the /resources/docs/ directory.
Build Pipeline
The process of concatenating and optimizing JS and SCSS files, as well as images and other resources is outlined in the Project Resources Build Pipeline notes.
Getting Started
Paths
The project build-pipeline generally takes resoruces found in /resources/src/**/* and renders/processes them to the /resources/dist/**/* directory.
Styles
At the time of this writing, there is one master stylesheet which should be included in the <head> of all pages like so:
In addition to jQuery as a project dependancy, there are two main JS files which contain the bulk of the
application's logic. main-public-min.js is for all public faceing logic and is intentionally is as
light as possible for fast loading time.
The second file main-app-min.js is much larger and includes all the libraries needed to operate the more complex application logic, including graphing etc. Due to its size, this file should only be downloaded by those people who are logged in. To improve user experience and the perception of speed, larger files can be 'hinted to' for background loading by the browser on pages that don't need them, and only required on pages where these resources are absolutely necessary. In this way by the time a logged in user navigates to a page where these libraries are needed, it is expected that a good portion of the resource is already downloaded into the browser's memory, thereby resulting in a 'snappy' user experience.
All JS scripts should be included before the <body> element at the foot of the document like so:
// Load jQuery from CDN if avalable, else load from server
<script src='https://code.jquery.com/jquery-3.3.1.min.js'
integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
<script>window.jQuery || document.write('<script src=\'/resources/dist/js/jquery-3.3.1-min.js\'><\/script>')</script>
// Load the public JS
<script src='/resources/dist/js/main-public-min.js'></script>
// Preload the heavy application JS on non-application pages, where the user is logged out.
<link rel='prefetch' href='/resources/dist/js/main-app-min.js'>
// And only include it where needed:
<!-- <script src='/resources/dist/js/main-app-min.js'></script> -->
Enabled Tachyons Modules
To keep things as lite and speedy as possible, we're not using the entire Tachyons suite in our bulild. But as previously mentioned, this page's style sheet is hotlinked to the tachyons' CDN. So in the markup on this page, you will find modules not used in the main application.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
Measure
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
Narrow Measure
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
// Requires u-alertDismiss.js
// Note: Dissmissing js will remove the element from the DOM.
<div class="v1-m-alert -is-caution -is-floating -is-dismissible">Some Alert: dismissible error
<button type="button" class="-is-dismissible" data-dismiss="alert" aria-label="Close">
<i class="v1-a-icon icon-x" aria-hidden="true"></i>
</button>
</div>
<details class="v1-m-alert -is-secondary">
<summary>Some notice</summary>
... a nifty collapsing notice.
</details>
Buttons
// Example of base styling for button-type elements
<button>Button Element</button>
<input type="reset" value="Input Clear">
<input type="submit" value="Input Submit">
// Example with active element as span with the .-is-active class
<nav class="v1-m-pagination">
<div class="v1-m-pagination__wrap">
<ul class="v1-m-pagination__pager">
<li class="v1-m-pagination__link -is-entry -is-prev"><a aria-label="Previous" class="v1-a-btns -is-pill -is-bg-white -is-bdr-blue -is-bdr-dotted -is-med" href="page-news-entry.php">← previous</a></li>
<li class="v1-m-pagination__link -is-entry"><a aria-label="Page 7" class="v1-a-btns -is-pill -is-bg-white -is-bdr-blue -is-bdr-dotted -is-med" href="page-news-entry.php">7</a></li>
<li class="v1-m-pagination__link -is-entry"><span aria-label="Current Page" class="v1-a-btns -is-pill -is-bg-white -is-bdr-blue -is-bdr-dotted -is-med -is-active" href="page-news-entry.php">8</span></li>
<li class="v1-m-pagination__link -is-entry"><a aria-label="Page 9" class="v1-a-btns -is-pill -is-bg-white -is-bdr-blue -is-bdr-dotted -is-med" href="page-news-entry.php">9</a></li>
</ul>
</div>
</nav>
Tabs
Tab 1
The important achievement of Apollo was demonstrating that humanity is not forever
chained to this planet and our visions go rather further than that and our
opportunities are unlimited.
Tab 2
Never limit yourself because of others' limited imagination; never limit others
because of your own limited imagination.
Tab 3
After Apollo 17, America stopped looking towards the next horizon. The United States
had become a space-faring nation, but threw it away. We have sacrificed space
exploration for space exploitation, which is interesting but scarcely visionary.
The following is a "bare metal" test suite with no Tachyons styles applied. The elements below are
either styled by our resets + theme, or by browser defaults.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec,
gravida vehicula, nisl.
Heading 2
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec,
gravida vehicula, nisl.
Heading 3
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec,
gravida vehicula, nisl.
Heading 4
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec,
gravida vehicula, nisl.
Heading 5
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec,
gravida vehicula, nisl.
Heading 6
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec
faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec,
gravida vehicula, nisl.
Block Elements
Paragraphs and Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis
luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque
aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Blockquote
This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."
This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Figure-Caption
The figcaption element example
Details-Summary
The summary element example
The details example text. It may be styled differently based on what browser or operating system you
are using.
The abbr element and an abbr element with title examples
The ACRONYM element example
The b element example
The cite element example
The code element example
The data element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The example
The u element example
The var element example
Monospace / Preformatted
Code block wrapped in "pre" and "code" tags
// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}
Monospace Text wrapped in "pre" tags
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl
