Article Title
By B Lingafelter testserver, workflow
Article Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pattern Library: Colors, Fonts, & Text Elements
Colors
The main colors on these pages are black, white, and gray, with a couple shades of purple and brown matching the school logo.
#43125F
#4A176C
#B99C6B
#000
#333
#444
#E0E0E0
#EFEFEF
#FFF
Usage:
The body of each page is white (#FFF), and the main body text color is #444. H1 headings, h2 headings, and links are all #43125F. The shades of grey are mostly used as backgrounds in tables or blockquotes, etc. All of the colors above will be repeated throughout this pattern library.
Fonts
The pages use the following font families: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif
h1 heading
h2 heading
h3 heading
h4 heading
linksThis is the body's font, which inherits to many other elements like tables, blockquotes, lists, etc.
Usage:
The fonts, sizes, headings, links, and body are used for almost all of the content on these web pages.
Markup
<h1 class="butlerWebDev__h1">
h1 heading
</h1>
<h2 class="butlerWebDev__h2">
h2 heading
</h2>
<h3 class="butlerWebDev__h3">
h3 heading
</h3>
<h4 class="butlerWebDev__h4">
h4 heading
</h4>
<a href=" # " class="butlerWebDev__link">
links
</a>
<body class="butlerWebDev__body">
This is the body's font...
</body>
Notes Div
This element is a simple <div> with an identifying class, and a paragraph inside. It is styled with a gray background and a black border.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Usage:
This element is used to emphasize important text-based information, usually within a set of instructions.
Markup
<div class="butlerWebDev__notes">
<p>
Lorem ipsum...
</p>
</div>
Code Block
These blocks are a simple <figure> containing the following: a <pre> with various coding, and a descriptive <figcaption>.
/* apply class to parent element to self-clear its floated children */
.group:after {
content: "";
display: table;
clear: both;
}
Usage:
These blocks are used to show examples of html, css, or other types of coding. The <figcaption> provides a quick reference/description of what the code does.
Markup
<figure class="butlerWebDev__codeFig">
<pre class="butlerWebDev__code">
example code here
</pre>
<figcaption class="butlerWebDev__codeFigCap">
Caption describing the code above
</figcaption>
</figure>
Unordered List
Though there are no specific style rules for unordered lists, they are included in this pattern library to document updated BEM classes.
- a list item
- another list item
- an additional list item
Usage:
Unordered lists are used as part of multiple tutorials throughout the site. They are also used to organize links to all the various pages on the Web Developer Tutorials and Resources homepage.
Markup
<ul class="butlerWebDev__ul">
<li> content here </li>
</ul>
Ordered List
Again, there are no specific style rules for ordered lists. They are included in this pattern library to document updated BEM classes.
- a numbered list item
- another numbered list item
- a third numbered list item
Usage:
Ordered lists are used as part of multiple tutorials throughout the site.
Markup
<ol class="butlerWebDev__ol">
<li> content here </li>
</ol>
Description List
Defined lists have specific style rules to make each <dt> bold, and also add margin space under each <dd>. Again, the html tags have been updated with BEM classes for organizational purposes.
- Term
- Definition of the above term
- Another Term
- Definition of the above term
Usage:
Description lists are used as part of multiple tutorials and/or educational resources throughout the site.
Markup
<dl class="butlerWebDev__dl">
<dt class="butlerWebDev__dt"> term here </dt>
<dd class="butlerWebDev__dd"> definition here </dd>
<dt class="butlerWebDev__dt"> term here </dt>
<dd class="butlerWebDev__dd"> definition here </dd>
</dl>
Articles
Each <article> contains its own <header> and <footer>. The content of any article could include headings, lists, paragraphs, images, etc. The article's header and footer also use <i> elements with special classes to display icons like calendars and tags from Font-Awesome.
Usage:
These articles are used to contain the information on each page linked from the Web Developer Tutorials and Resources page.
Markup
To use icons from Font-Awesome, place the following tag in the <head> of each page.
< link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
The following code is for the articles themselves.
<article class="butlerWebDev__article">
<header class="butlerWebDev__artHeader">
<h2 class="butlerWebDev__h2">Article Title</h2>
<p>
By B Lingafelter
<i class="butlerWebDev__fa fa fa-calendar"></i>
<time datetime="2020-08-05">Updated Aug 5, 2020</time>
<i class="butlerWebDev__fa fa fa-tag"></i>
testserver, workflow
</p>
</header>
<h3 class="butlerWebDev__h3">Article Content</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<footer class="butlerWebDev__artFooter">
<div class="butlerWebDev__artFooterDisclaimers clearfix">
<p>
Disclaimers: <a href="https://www.butlercc.edu/">Butler Community College</a> is an “Equal Opportunity Employer/Program” and “Auxiliary Aids and Services are available upon request.”
</p>
<p>
<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<img
src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"
alt="Creative Commons License"
class="butlerWebDev__cclicense">
</a>
This work is licensed under a
<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
</a>
.
</p>
</div>
</footer>
</article>