<!-- Markup for an empty line with line number:-->
<pre class='js'>
<code>
<i></i> // empty line
</code>
</pre>
Result:
// empty line
CSS Components
Three Tier Fixed Top Navigation Bar
Basic HTML Setup:
1. Include CSS files (truss-navbar-style.css) under all other stylesheets
<link href="Truss/css/truss-navbar-style.css" rel="stylesheet" type="text/css" media="all">
2. Include the Arrow Image files "images" directory in your files directory structure
"Truss-NavBar/images"
3. Include HTML Navigation Bar
Change the anchor tag description for the item and include any necessary href links.
When adding list items to navbar, be sure to include any required classes.
Class: 'right', 'left', 'down' are for the direction of arrow image.
Class 'last' is for the operation of left flyout.
The top level list items is fixed width.
If list items are added or removed the width will require changing in the CSS.
<nav id="navBarId">
<ul>
<li><a class=" down" href="index.html">Menu1</a>
<ul>
<li><a class="right" href="#" >Menu11</a>
<ul>
<li><a href="#">Menu111</a></li>
<li><a href="#">Menu112</a></li>
<li><a href="#">Menu113</a></li>
<li><a href="#">Menu114</a></li>
</ul>
</li>
</ul>
</li>
<li><a class=" down" href="#">Menu2</a>
<ul>
<li><a href="#">Menu21</a></li>
<li><a href="#">Menu22</a></li>
<li><a href="#">Menu23</a></li>
<li><a class="right" href="#">Menu24</a>
<ul>
<li><a href="#">Menu241</a></li>
<li><a href="#">Menu242</a></li>
</ul>
</li>
<li><a href="#">Menu25</a></li>
<li><a href="#">Menu26</a></li>
<li><a href="#">Menu27</a></li>
</ul>
</li>
<li><a class=" down" href="#">Menu3</a>
<ul>
<li><a class="right" href="#">Menu31</a>
<ul>
<li><a href="#">Menu311</a></li>
<li><a href="#">Menu312</a></li>
<li><a href="#">Menu313</a></li>
<li><a href="#">Menu314</a></li>
</ul>
</li>
<li><a class="right" href="#">Menu32</a>
<ul>
<li><a href="#">Menu321</a></li>
<li><a href="#">Menu322</a></li>
<li><a href="#">Menu323</a></li>
<li><a href="#">Menu324</a></li>
</ul>
</li>
<li><a class="right" href="#" >Menu33</a>
<ul>
<li><a href="#">Menu331</a></li>
<li><a href="#">Menu332</a></li>
<li><a href="#">Menu333</a></li>
<li><a href="#">Menu334</a></li>
</ul>
</li>
<li><a href="#">Menu34</a></li>
<li><a href="#">Menu35</a></li>
<li><a href="#">Menu36</a></li>
</ul>
</li>
<li class="last"><a class="down" href="#">Menu4</a>
<ul>
<li><a href="#">Menu41</a></li>
<li><a href="#">Menu42</a></li>
<li><a href="#" class="left">Menu43</a>
<ul>
<li><a href="#">Menu431</a></li>
<li><a href="#">Menu432</a></li>
<li><a href="#">Menu433</a></li>
<li><a href="#">Menu434</a></li>
<li><a href="#">Menu435</a></li>
</ul>
</li>
<li><a href="#">Menu44</a></li>
</ul>
</li>
</ul>
</nav>
4. Include Optional Embedded CSS (modify to your needs). See table below.
/* CAN CHANGE THE DEFAULT LIST ITEM COLORS HERE OR IN THE CSS FILE*/
/* SETS ALL LIST ITEM COLOR */
#navBarId ul li a {
background: #cfc796;
border-top: 2px solid #144c85;
border-right: 2px solid #0d3155;
border-bottom: 2px solid #0d3155;
border-left: 2px solid #144c85;
}
/* BACKGROUND COLOR FOR LIST ITEM THAT CONTAINS THE ARROW IMAGE */
#navBarId li a.right, #navBarId li a.down, #navBarId li a.left {
background-color: #cfc796;
}
/* SETS HOVER OR FOCUS LIST ITEM COLOR */
#navBarId ul li a:hover,
#navBarId ul li a:focus {
background: #dcd6b2;
border-top: 2px solid #e8dd9c;
border-right: 2px solid #f0e8b9;
border-bottom: 2px solid #f0e8b9;
border-left: 2px solid #e8dd9c;
}
Fancy Blockquotes
Fancy blockquotes retain a <p> section for the main quoted text and a footer section with an optional <cite> tag, but they also include an <img> and wrapper. To insert this CSS component into your webpage, simply copy and paste the code below and insert your own text. If you would like alternating blockquotes, add the "right" class to every right-floating quote.
The left side of alternating blockquoted text from a user identifying how this framework has changed his/her life. Now for lorem ipsum. Lorem ipsum dolor sit amet, luctus integer nulla amet eu nam.
<div class="testimonial-quote">
<img>
<blockquote class="blockquote-fancy">
<p>The left side of alternating blockquoted text from a user identifying how this framework has changed his/her life. Now for lorem ipsum. Lorem ipsum dolor sit amet, luctus integer nulla amet eu nam.</p>
<footer> Collaborators of Truss in
<br>
<cite>Some Book or Something</cite></footer>
</blockquote>
</div>
Alternated blockquoted text from a user identifying how this framework has changed his/her life. Now for lorem ipsum. Lorem ipsum dolor sit amet, luctus integer nulla amet eu nam, arcu massa, integer cubilia metus id vestibulum.
<div class="testimonial-quote right">
<img>
<blockquote class="blockquote-fancy">
<p>Alternated blockquoted text from a user identifying how this framework has changed his/her life. Now for lorem ipsum. Lorem ipsum dolor sit amet, luctus integer nulla amet eu nam, arcu massa, integer cubilia metus id vestibulum. </p>
<footer> Collaborators of Truss in
<br>
<cite>Another Book or Something</cite></footer>
</blockquote>
</div>
Fancy Code Editor
Styling HTML <pre> <code></code> </pre> and inline <code></code>
Use the provided classes to style HTML, CSS, and Javascript used inside inline code or pre tags.
To keep adding line numbers, add <i></i> at the start of each line and then add your code and space your code as you always do inside a pre tag.
Markup for an empty line with line number:
Detailed Example: Javascript
Add class='js' to your pre tag.
Add <i></i> at the start of each line to get line numbers.
Wrap the javascript vocabulary with span tags and use these words as class names to style them: regex, punctuation, function, comment, keyword, operator, number, string.
<!-- Markup for a single line of javascript:-->
<pre class='js'>
<code>
<i></i> <span class="keyword">var</span> <span class="function">x</span> <span class="operator">=</span> <span class="keyword">function</span><span class="punctuation">() {};</span>
</code>
</pre>
Result:
var x = function() {};
Result Example: Javascript
// Styling javascript keywords, operators, functions, string, punctuations and comments and much more ...
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
// Using number
var num = 45;
// Using regex
var re = /ab+c/;
// No spans/style
$(window).scroll(function () {
if ($(this).scrollTop() > height) {
buttons.addClass('stickyBtn');
} else {
buttons.removeClass('stickyBtn');
}
});
Result Example: HTML
Add class='html' to your pre tag.
Add <i></i> at the start of each line to get line numbers.
Wrap the html vocabulary with span tags and use these words as class names to style them: comment, punctuation, tag, attr, value, doctype.
<!-- HTML -->
<h1>Heading</h1>
<!-- HTML comment -->
<div id="photoCollection">
<div data-src="img/img1.jpg">
<img src="img/img1_thumb.jpg" />
<time datetime="2014-04-23"></time>
</div>
</div>
<!-- No spans/style -->
<head>
<meta charset="utf-8">
<title>Welcome to Vecta Corp.>/title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="comp.css" rel="stylesheet">
</head>
Result Example: CSS
Add class='css' to your pre tag.
Add <i></i> at the start of each line to get line numbers.
Wrap the css vocabulary with span tags and use these words as class names to style them: selector, property, punctuation, number, comment.
/* Styling CSS rules */
/* CSS comment */
pre code i::before {
counter-increment: linenumber;
content: counter(linenumber);
display: inline-block;
padding-right: 1em;
margin-right: 1em;
color: gray;
width: 1em;
text-align: right;
}
/* CSS rule with no spans/style */
pre code {
line-height: 2;
direction: ltr;
/* text-align: left;*/
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
}
Message Boxes
1. Include the stylesheet below in your html.
<link href="Truss/css/Components/TrussMessageBoxes/css/truss-message-boxes-style.css" rel="stylesheet" type="text/css">
2. View the message boxes below and pick your favorite.
success: Write your success message here.
warning: Write your warning message here.
notice: Write your notice message here.
validation: Write your validation message here.
favorite: Write your favorite message here.
appointment: Write your appointment message here.
help: Write your help message here.
tip: Write your tip message here.
IMPORTANT: Write your important message here.
error: Write your error message here.
no image: Write your message here.
3. Find the corresponding html, copy it into your html page, and customize the text for your own needs.
<div class="msg-box success"><span>success: </span>Write your success message here.</div>
<div class="msg-box warning"><span>warning: </span>Write your warning message here.</div>
<div class="msg-box notice"><span>notice: </span>Write your notice message here.</div>
<div class="msg-box validation"><span>validation: </span>Write your validation message here.</div>
<div class="msg-box favorite"><span>favorite: </span>Write your favorite message here.</div>
<div class="msg-box appointment"><span>appointment: </span>Write your appointment message here.</div>
<div class="msg-box help"><span>help: </span>Write your help message here.</div>
<div class="msg-box tip"><span>tip: </span>Write your tip message here.</div>
<div class="msg-box important"><span>IMPORTANT: </span>Write your important message here.</div>
<div class="msg-box error"><span>error: </span>Write your error message here.</div>
<div class="msg-box noimage"><span>no image: </span>Write your message here.</div>