Close menu Menu
Overlay close menu

Technical Documentation Page (Guideline)

This is a project exercise from freeCodeCamp to get the certification to Responsive Web Design, Build a Technical Documentation Page.

A

999 999<!DOCTYPE html> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae, cupiditate illum? Esse nesciunt corrupti illo totam consequatur incidunt dolorem blanditiis et est recusandae, impedit beatae eius facilis at cumque perspiciatis? 


<!-- Comment -->
<pre class="gl html" contenteditable="true"><code class="gl" contenteditable="false">
	<span class="gl line-number"></span><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil porro error est ipsa deserunt id veniam. Amet odit repellat tempora laborum! Doloribus repudiandae optio quibusdam illum voluptates aliquam inventore eveniet!</p>
	<span class="gl gl-line-number gl-highlight"></span><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil porro error est ipsa deserunt id veniam. Amet odit repellat tempora laborum! Doloribus repudiandae optio quibusdam illum voluptates aliquam inventore eveniet!</p>
</code></pre>

Lorem

Lorem

Lorem

Lorem

Lorem

Lorem

Lorem

Lorem

Lorem

Lorem

  1. A
  2. B
  3. C
  4. D

/* Comment */
.gl.menu::before:hover {
  background-color: var(--gl-background);
  background-image: var(--gl-background-stage);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  border-right: var(--gl-border);
  content: "\eae8";
  height: 100%;
  left: calc(var(--gl-menu-width) * -1);
  max-width: var(--gl-menu-width);
  position: fixed;
  top: 0;
  transition: left 0.3s ease;
  -moz-z-index: var(--modal);
  z-index: var(--modal);
}



  html
  nkn mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm



	.css



999	javascript();
Example

Design tokens of TDP

Design Tokens for colors and themes

This values can be configured in the file fcc-projects/fcc-assets/css/guideline/guideline-tokens.css

Primitive token values

The numerical nomenclature was chosen to facilitate the maintenance if was necessary add new values. Thinking in the premise that the primitive values are not allowed to be used directly in the compoments. And because of this the color values will receive a generic number name.

  • --gl-colors-01: black;
  • --gl-colors-02: white;
  • --gl-colors-03: lightgray;
  • --gl-colors-04: gray;
  • --gl-colors-05: mediumorchid;
  • --gl-colors-06: darkgoldenrod;
  • --gl-colors-07: darkorange;
  • --gl-colors-08: lightsalmon;
  • --gl-colors-09: yellow;
  • --gl-colors-10: lemonchiffon;
  • --gl-colors-11: chartreuse;
  • --gl-colors-12: lightgreen;
  • --gl-colors-13: darkseagreen;
  • --gl-colors-14: cornflowerblue;
  • --gl-colors-15: cyan;
  • --gl-color-16: 255, 0, 0;
Attention
  1. In case of change the values respect the type. Hexadecimal code colors and color names are compatible in the place where is used but not for the other cases. For the example tokens with RBG values require other RGB values to substitution other wise your code will broke.
Color samples

Component code theme tokens

These are the base theme color tokens of the component "code" for the modes inline and block.


  --gl-color-code-bg: var(--gl-colors-01);
  --gl-color-code-tab-border: var(--gl-color-code-bg);
  --gl-color-code-tab-bg: var(--gl-colors-02);
  --gl-color-code-tab-text: var(--gl-color-code-bg);
  --gl-color-code-tab-bg-active: var(--gl-color-code-tab-text);
  --gl-color-code-tab-text-active: var(--gl-color-code-tab-bg);
  --gl-color-line-number-text: var(--gl-colors-04);
  --gl-color-line-number-bg-highlight: var(--gl-colors-16);
  --gl-color-line-number-text-highlight: var(--gl-colors-02);
  --gl-color-line-number-bg-pin-count: var(--gl-colors-16);
  --gl-color-line-number-text-pin-count: var(--gl-colors-02);

Component code theme tokens for HTML

This are the color theme tokens for HTML code.


  --gl-color-html-tag: var(--gl-colors-06);
  --gl-color-html-property: var(--gl-colors-03);
  --gl-color-html-property-value: var(--gl-colors-12);
  --gl-color-html-comment: var(--gl-colors-04);
  --gl-color-html-content: var(--gl-colors-02);

Component code theme tokens for CSS

This are the color theme tokens for CSS code.


  --gl-color-css: var(--gl-colors-03);
  --gl-color-css-class-selector: var(--gl-colors-06);
  --gl-color-css-property: var(--gl-colors-05);
  --gl-color-css-property-value: var(--gl-colors-07);
  --gl-color-css-string: var(--gl-colors-10);
  --gl-color-css-function: var(--gl-colors-14);
  --gl-color-css-math: var(--gl-colors-11);
  --gl-color-css-custom-property: var(--gl-colors-15);
  --gl-color-css-comment: var(--gl-colors-04);
  --gl-color-css-behavior: var(--gl-colors-09);
  --gl-color-css-pseudo-class: var(--gl-colors-08);
  --gl-color-css-prefix: var(--gl-colors-08);

Component code theme tokens for Javascript

This will be done with more details in the future.


  --gl-color-javascript: var(--gl-colors-14);

General Design Tokens

This tokens control general aspects of TDP components.


  --gl-color-text: var(--gl-colors-01);
  --gl-color-text-decoration: var(--gl-colors-05);
  --gl-background: var(--gl-colors-02);
  --gl-background-stage: var(--gl-colors-03);
  --gl-background-stage-texture: linear-gradient(
    45deg,
    var(--gl-background-stage) 25%,
    transparent 25%,
    transparent 75%,
    var(--gl-background-stage) 75%,
    var(--gl-background-stage)
   ),
   linear-gradient(
    45deg,
    var(--gl-background-stage) 25%,
    transparent 25%,
    transparent 75%,
    var(--gl-background-stage) 75%,
    var(--gl-background-stage)
   );
  --gl-background-mark: var(--gl-colors-03);
  --gl-text-font: Verdana, Geneva, Tahoma, sans-serif;
  --gl-code-font: 'Courier New', Courier, monospace;
  --gl-title-base-font-size: 18px;
  --gl-border: solid var(--gl-border-size) var(--gl-colors-01);
  --gl-border-size: 5px;
  --gl-menu-width: 300px;
  --gl-gutter: 10px;
  --gl-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.75);
  --gl-transition: 0.3s ease;
  --gl-menu-title-font-size: 20px;
  --gl-menu-title-box-size: calc((var(--gl-menu-title-font-size) * 3) + var(--gl-border-size) + (var(--gl-gutter) * 2));
  /* Custom scroll */
  --gl-scroll-thumb-background: var(--gl-colors-03);
  --gl-scroll-thumb-background-hover: var(--gl-colors-04);
  --gl-scroll-bar-background: var(--gl-colors-01);
  --gl-scroll-bar-width-firefox: thin;
  --gl-scroll-bar-width-chromium: 8px;
  /* Z-index */
  --gl-behind: 1;
  --gl-content: 5;
  --gl-above: 10;
  --gl-modal: 15;

Components of TDP

...

Design tokens of FCC projects

...

Tribute Page

...

Survey form

...

Product landing page

...

Personal portifolio webpage

...