I am using the CSS Reference and much more from W3Schools to learn how to be stylish. This is the best reference out there. Try to avoid the rat holes of Stack Overflow when searching for how to do something.

This design started out by copying the GitHub Pages Modernist Theme, which looks like this.

All of the design elements you see here are implemented by the style sheet in assets/css. Some features require the use of HTML. You will see how when you edit design.md and getstarted.md.

TOC Made Easy

Use the examples provided in the _includes folder. The TOC is the bottom line of the header. On that line, you may place the TOC dropdown button, Page Title and “Hide All” button. Notice how the toc file for the home page only includes the page title.

For toc links, each markdown heading in a page is assigned an HTML “id” when the site is built, which you can reference in the toc dropdown list, with spaces in the heading replaced with dashes.

TIP: If you use any non-alphanumeric characters in your headings, open the html file in the _site folder or view the page source in your browser to obtain the id that was assigned. Some characters may be removed.

After creating the TOC file, call it out in the front matter of the page using the title, toc and optional print variable:

---
title: Design Elements
toc: toc-design.html
print: print-button.html
---
< blank line >
Step by step process for beginners...

Dropdown Buttons Made Easy

Not really. It’s all HTML and you need to provide inline style settings for each button or define the default style for your dropdown buttons in the style sheet under class “.dropdown”.

Here is a dropdown button with all manner of style applied inline:

arrow_downward Button text with arrows from Google icons. arrow_downward

Dropdown buttons can be useful when you want to hide the details of a particular topic so they don't clutter up your page.

I added this feature to improve upon the method I was using to handle button clicks for the site menu and TOC. The TOC button remains in a class of it's own so when you click one of the links or elsewhere on the page, the button script will catch that and hide the toc dropdown content.

Not so with the other buttons. You need to click the button again to hide the dropdown content.

Which is why I added the "Hide All" button that you can include in the TOC line of the header. This button will also scroll to the top of the page when clicked.

Check out how I used this feature in lieu of a toc button for my Hikvision Camera Controller User Guide.

Sunset over Gages Lake IL, since the sun is now setting on this project of mine, at least for the time being.

This is a button with no style

The button may have no style but the content is a 33-66 grid so I can explain in detail what to do here. On a small screen, the grid will collapse and this text will appear below the image. Try it out.

You will see how easy or difficult it is to do this when you edit this page. Only problem is, the slightest slip in your HTML could drive you nuts for hours.

Nah, only minutes until you find the missing /div or slash something somewhere.

< blank line >
< div >
< button class="dropdown" style="font-size:1.2em;">
< i style="font-size:20px;" class="material-icons">arrow_downward</i>
Technical Details and How To
< / button >
< div class="drop-content" >
< p >When coding dropdown buttons...< /p >
< / div >
< / div >
< blank line >

Media Screen Styles

Fully optimized for viewing on small screens by reducing font sizes, header sizes, bottom margins and left/right page margins for all content. Grids are reset to one column. Description and logo are removed from header. Tagline is removed from footer. When designing your pages, it’s important to consider how they are going to look on phones and tablets.

Media Print Style

Description and all link buttons are removed from header. Footer is removed.

Color Scheme and Table Style

The colors are shown using html “<span style=…>” in the markdown. This color site is a good reference.

It’s easy to change the color scheme by updating the style sheet. Linear gradient is used to transition from color 1 to color 2.

Image Styles

Use one of the custom image classes to to create a picture frame or round over the corners:

<img width="20%" src="images/zion-np.jpg">
 <img class="img-noborder" width="20%" src="images/zion-np.jpg">
 <img class="img-border2" width="20%" src="images/zion-np.jpg">
 <img class="img-border4" width="20%" src="images/zion-np.jpg">

Other Elements

Code Highlighting

This is the default Rouge highlighter for GitHub Pages. Many other options are available.

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

Formatted Text

Formatted monospace text
Without highlighting by using html < pre > tag.

List Item Spacing

Lists with a little space between. Easy to find and adjust in the style sheet.

1. numbered list with break
   more text
2. two
3. three

• bullet list with break
  more text
• next bullet
  • four spaces to get nested bullet with break
    and more text
  • and one more
  • last nested bullet
• last one

Blockquote

blockquote text with break
more text

second paragraph

Keyboard Keys

Press Ctrl + c

Press <kbd>Ctrl</kbd> + <kbd>c</kbd>

Definition List

Style Sheet

Lets people know how stylish you are

Wrapper (Generic Term)

Used to encapsulate content on a web page

HTML Grids

Used to encapsulate content on a web page in a defined pattern of columns or rows.

Header1

content

Header2

content

Header3

content

Header4

content

Header5

content

Header6

content

Grid Styles

Placing text and other content next to an image can be done in several ways and gets really complicated really fast, but I got his working with grid classes in the style sheet and html in the markdown. This appears to be the only way to create a grid out of markdown.

You can run wild with these, provided you don’t mind editing raw html in your pages, which is prone to the slightest slip or miss that makes your web page run wild, too. Easy to copy/paste the basic structure needed and then fill in the content.

50-50 Grid

Each element in the grid starts with a horizontal rule that spans the width of the column, with a 32px gap.

Other grid classes include grid-6633 and grid-3366. Like I said, you can run wild.

---

First Element in the Grid

With image width=50%

---

Second Element

---

Virgin River - Zion National Park

---

800x600 image resized to fit 50% of the grid column.

---

Third Element

Formatted text. Code highlighting doesn't work here.

var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

---

Fourth Element

More content

Next markdown paragraph after the grid.

66-33 Grid

---

First Element in the Grid

With image width=66%

---

Second Element

---

Virgin River - Zion National Park

---

Next markdown paragraph after the grid.

Pipe Testing

Using the Pipe/Vertical Bar Symbol yields table cells

Two pipes with image after the second

End of Document