- reset.css
- stylisation-guide.css
- font-import.css
- template-essentials.css (original code) Commented, Assessed & Validated
- nav.css (original code) Commented, Assessed & Validated
- burger-button.css (original code) Commented, Assessed & Validated
- list.css
- gallery-layers.css (original code) Commented, Assessed & Validated
- bespoke-graphs.css (original code) Requires update.
- swing.css
S
C
saulcross.com
stylisation
CSS Scripts
jQuery Scripts
- sub-menu.js (original code) Commented, Assessed & Validated
- toggle-id.js (original code) Commented, Assessed & Validated
- I've not combined the two scripts, because of editing and adjusting stylisation.
- publish-menu-options (original code) Commented, Assessed & Validated
- image-gallery-layers.js (original code) Commented, Assessed & Validated
- brow.js (original code) Commented, Assessed & Validated
- simple-graphs (original code) Commented, Assessed & Validated
- focus-selection-show-hide.js (original code) Commented, Assessed & Validated
- dynamic-table-design.js (original code) Requires updating
Order of elements.
- Name of HTML element
- Name of Attributes, listed as: (essential architecture layout)
- <body>
- <header>
- <nav>
- <ul>
- <div>
- <form>
- <table>
- <footer>
- Name of HTML element
- Name of Attribute, listed: Text and content.
- <a>
- <p>
- <h1>
- <h2>
- <span>
Example of wireframe architecture: Ordered attributes.
- height:80%;
- min-height:725px;
- width:80%;
- float: left;
- position: fixed; top:11px; left: 14px;
- /** text-align: center; used for positioning --> <nav> <-- **/
- z-index: 2;
- display: inline-block;
- padding:0px;
- margin:auto;
Implementation shortcut
- height:0%;
- min-height;
- width:0%;;
- float:none;
- position: fixed; top:0px; left:0px;
- /** text-align: center; used for positioning --> <nav> <-- **/
- z-index: 0;
- display: none;
- padding:0px;
- margin:auto;
Example of wireframe architecture: Ordered attributes.
- height:80%;
- min-height:725px;
- width:80%;
- float: left;
- position: fixed; top:11px; left: 14px;
- /** text-align: center; used for positioning --> <nav> <-- **/
- z-index: 2;
- display: inline-block;
- padding:0px;
- margin:auto;
Borders.
- border: solid 1px rgba(255, 193, 7, 0.23);
- border-radius: 9px;
- box-shadow: 3px 2px 49px rgba(0, 0, 0, 0.8);
Fonts.
- font-size: 3em;
- font-family: sans-serif;
- font-family: 'Calligraffitti', cursive;
- font-weight: 100;
- text-decoration: none;
- color:#fbb651;
- line-height: 54px;
- vertical-align: bottom;
- vertical-align: baseline;
- vertical-align: text-bottom;
Background Colours.
- opacity: .3;
- background-color:rgb(113, 112, 112);
- background: linear-gradient(to right, #dadada, #eaeae9);
- background:radial-gradient(circle, rgba(255, 221, 124, .1), rgba(255, 221, 124, .2), rgba(255, 221, 124, .3));
- background-color: rgba(255, 252, 250, 0.75);
Background Images.
- background-image: url(img/tick.png);
- background-repeat: no-repeat;
- background-repeat: repeat-y;
- background-position: center;
- background-size: 100%;
- background-size: contain;
Miscellaneous.
- list-style-type: none;
- li:before { content: counters(item, ".") " "; counter-increment: item }
- overflow-x: hidden;
- border-collapse: collapse;
- display: flex;
- display: table-cell; decent for content alignment
- justify-content: flex-end;
- ul.employment-list li.info-line:nth-child(odd)
- @media only screen and (max-width: 1600px) {.grid {margin: 2% 0% 2% 0.1%;} }
Header 1
Header 1
Header 2
Header 3
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
de Finibus Bonorum et Malorum
Written by Cicero in 45 BC
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."