# Helpful Hints

Details several Helpful Hints in using the Admin modules

# Bootstrap Grid

#### **Overview**

The **Bootstrap grid** was designed by two *Twitter* developers in the mid-2010s. It is used to align elements within a defined area of a page. Just as with the HTML table structure consists of row (tr) and column (td) elements, the **Bootstrap Grid** structure consists of same two parts... row and col. When constructing the grid think of the area as a table with rows and columns.

##### **Row Identifier**

To identify the beginning of a row enter the following HTML code... **<span style="color: #e03e2d;">&lt;div class="row"&gt;</span>**. At the end of the code identifying the columns enter the code... &lt;/div&gt;

##### **Col Identifier**

Identifying the columns of the row is a little more complex. Each row of the grid structure can contain up to a total of 12 columns. The 12 can be used separately or in groups of any number up to 12. The column identifier is... **<span style="color: #e03e2d;">&lt;div class="col-xx-nn"&gt;</span>** where '**<span style="color: #e03e2d;">xx</span>**' is the breakpoint identifier and '**<span style="color: #e03e2d;">nn</span>**' identifies the number of columns.

1. **Breakpoint Identifier (xx)** - The Breakpoint Identifier is used to identify at what viewport size the column width should be activated.. A detailed explanation of this identifier is beyond the scope of this document and the usage on the website. For this website it is preferred to simply use the '**<span style="color: #e03e2d;">x</span><span style="color: #e03e2d;">s</span>**' breakpoint identifier.
2. **Number of Columns Identifier (nn)** - The '<span style="color: #e03e2d;">**nn**</span>' identifier is simply a number from 1 to 12 that indicates the number of columns that are to be grouped together. Within any row area there can be multiple column areas as long as the number of columns does not exceed 12.

##### **Offset Identifier**

Sometimes it may be desired to not begin the column group at column 1 but to offset the column '**<span style="color: #e03e2d;">nn</span>**' number of columns. This is accomplished by using the **offset** identifier in the column class structure as follows... <span style="color: #e03e2d;">**&lt;div class="col-xs-4 col-xs-offset-nn"&gt;**</span> where '**<span style="color: #e03e2d;">nn</span>**' is the number of columns to leave empty (offset). Note that the first class element identifies the number of columns that are to be grouped followed by the number of columns that are to be offset (empty).

##### **A Grid with no Row Identifier**

It is possible to construct a grid of this nature without using the Row Identifier (div with row class). BUT, be aware that the desired structure may not appear as you desire. This is because any space remaining after the columns are placed on the page by the browser will then be occupied by any following text on the page. Thus, it is best to always use the div Row class identifier.

##### **Examples of Usage**

Example of a grid with one row and two columns each with a group of 6.

1. &lt;div class="row"&gt;
2. &lt;div class="col-xs-**<span style="color: #e03e2d;">6</span>**"&gt;
3. Column content
4. &lt;/div&gt; &lt;!-- End of first group of 6 column --&gt;
5. &lt;div class="col-xs-**<span style="color: #e03e2d;">6</span>**"&gt;
6. Column content
7. &lt;/div&gt; &lt;!-- End of second group of 6 column --&gt;
8. &lt;/div&gt; &lt;!-- End of row --&gt;

Example of a grid with one row and two columns, first with a group of 4 and the second with a group of 8.

1. &lt;div class="row"&gt;
2. &lt;div class="col-xs-**<span style="color: #e03e2d;">4</span>**"&gt;
3. Column content
4. &lt;/div&gt; &lt;!-- End of first group of 6 column --&gt;
5. &lt;div class="col-xs-**<span style="color: #e03e2d;">8</span>**"&gt;
6. Column content
7. &lt;/div&gt; &lt;!-- End of second group of 6 column --&gt;
8. &lt;/div&gt; &lt;!-- End of row --&gt;

Example of a grid with one row and two columns, first with a group of 4 offset by 2 and the second with a group of 4.

1. &lt;div class="row"&gt;
2. &lt;div class="col-xs-**<span style="color: #e03e2d;">4 col-xs-offset-2</span>**"&gt;
3. Column content
4. &lt;/div&gt; &lt;!-- End of first group of 6 column --&gt;
5. &lt;div class="col-xs-**<span style="color: #e03e2d;">4</span>**"&gt;
6. Column content
7. &lt;/div&gt; &lt;!-- End of second group of 6 column --&gt;
8. &lt;/div&gt; &lt;!-- End of row --&gt;

Note that the number of column used only add up to **<span style="color: #e03e2d;">10</span>**... group of **<span style="color: #e03e2d;">4</span>**, plus offset of **<span style="color: #e03e2d;">2</span>**, plus group of **<span style="color: #e03e2d;">4</span>**.

# Including Images

#### **Images Using Pseudo Code**

Often within an article it is desired to include an image. In the old days of web development the only way to do so was to use the HTML img element... &lt;img src="image\_name.jpg" align="right" width="250px" height="250px" target="\_blank" alt="My Photo"&gt;. Using this required extra lines of code to also add an image caption.

With the implementation of HTML5 a two new elements were added to better assist in the placement of images... &lt;figure&gt; and &lt;figcaption&gt;. With this addition it became much easier to include images on a webpage.

##### **The 'foto' pseudo code**

Building on the figure structure this site implements a 'foto' pseudo code to further simplify insertion of an image on a page. The <span style="color: #e03e2d;">**&lt;foto&gt;border\*path\*align\*width\*name\*caption&lt;/foto&gt;**</span> pseudo code provides a structured means of entering simple code that gets expanded into the &lt;figure&gt; structure. The elements of the pseudo code are as follows.

**Type** - The *type* element identifies the type of border to place around the image. Three options are, *photo*, *scan*, and empty (no entry). The *photo* option will place a shadow box type border where the top and left borders are lighter in shade with the right and bottom borders darker in shade. The *scan* option places a dark shade border around the entire image. Leaving the element empty will not include a border around the image.

**Path** - The *path* element is used to indicate the path to the image (e.g., images/bok\_images). Given that all images are placed in an images subfolder that begins with a three-letter identifier (i.e. bok, mis, etc.), it is permissible to just include the three-letter identifier rather than the whole path. Note that if the 'bio' identifier is used the system will also automatically include the subfolder Ltr\_? identifier.

**Align** - The *align* element identifies the alignment of the image. Options are... *left*, *center*, *right*.

**Width** - The width element simply identifies the desired image width in pixels. The 'px' suffix is not required, just include the number.

**Name** - The *name* element indicates the full name of the image, which includes the image type (e.g. jpg, png, etc.).

**Caption** - The *caption* element indicates the text of the caption that is placed below the image. The *caption* text is formatted with the *whisper* class (e.g., smaller bold text)

Additionally, the resulting code will include the alt="" text based on the image name along with the code to make the image source a link so that a larger view of the image can be seen. Also included on a hover to the image is the code to change the cursor to the spyglass icon to indicate that a larger image can be viewed.

**Note:** if an element is not used (e.g., type, width, etc.) make sure that the asterisks (\*) are not removed. The asterisks are used to separate the parameters and should not be removed.