kittenlogic/dmart.md

## dmart.md

      
    Raw
  

              dmart.md
            
          
    Dmart HTML and CSS guide 👌 💰 🏄

##Product Page
Code snippets and conventions for Product Page listing_0.html template. Includes: Extra fields, Legend Icons, Availability Icons, Image filename conventions, and options for styling tooltips.
🔑 Extra Field 1 - 5 (PDF Downloads)

Example:
<a href="path/to/file.pdf" target="_blank">Physical Properties</a>

🔑 Extra Field 6 - 10 (Tabs)

Field 6 - Material properties
Field 7 - Fabrication properties
Field 8 - Usage
Field 9 - [blank]
Field 10 - [blank]

🔑 Extra Field 11

Field 11 - [blank]

🔑 Extra Field 12 (Legend icons)

Front Engravable:
<span class="hint--top hint--rounded" data-hint="Front Engravable"><li class="legend legend-front"></li></span>
Indoor / Interior:
<span class="hint--top hint--rounded" data-hint="Indoor / Interior"><li class="legend legend-indoor"></li></span>
Laserable:
<span class="hint--top hint--rounded" data-hint="Laserable"><li class="legend legend-laserable"></li></span>
Outdoor / Weatherable:
<span class="hint--top hint--rounded" data-hint="Outdoor / Weatherable"><li class="legend legend-outdoor"></li></span>
Reverse Engravable:
<span class="hint--top hint--rounded" data-hint="Reverse Engravable"><li class="legend legend-reverse"></li></span>
Rotary Engravable:
<span class="hint--top hint--rounded" data-hint="Rotary Engravable"><li class="legend legend-rotary"></li></span>
UV Stable:
<span class="hint--top hint--rounded" data-hint="UV Stable"><li class="legend legend-uvstable"></li></span>
Obscures Fingerprint:
<span class="hint--top hint--rounded" data-hint="Obscures Fingerprints"><li class="legend legend-noprints"></li></span>
UL Approved:
<span class="hint--top hint--rounded" data-hint="UL Approved"><li class="legend legend-ulapproved"></li></span>
ADA Compliant:
<span class="hint--top hint--rounded" data-hint="ADA Compliant"><li class="legend legend-adacompliant"></li></span>
Print Receptive:
<span class="hint--top hint--rounded" data-hint="Print Receptive"><li class="legend legend-printreceptive"></li></span>
Premits Fine Engraving
<span class="hint--top hint--rounded" data-hint="Permits Fine Engraving"><li class="legend legend-fine"></li></span>

🔑 Extra Field 13 (Header and Subheader for item name)

<h1 class="page_headers2">Bur-Lane Microsurfaces, Matte Non-Glare Orange (.003") Surface/White Core</h1>
<h2 class="page_subheaders">2-Ply Microsurfaced ABS (24" x 48" x 1/16") Sheet</h2>

⌛ In Stock Message - Availability Icons

In Stock:
<img src="assets/images/1.png"><span class="hint--left" data-hint="In Stock"><img src="assets/images/q.png"></span>
50/50:
<img src="assets/images/2.png"><span class="hint--left" data-hint="Call to check availability"><img src="assets/images/q.png"></span>
Out of Stock:
<img src="assets/images/3.png"><span class="hint--left" data-hint="Sorry, no plastic for you"><img src="assets/images/q.png"></span>

🌄 Images - paths and filename conventions

Large image:
assets/images/large/bur-lane/micros/file-name.jpg
Thumbnail:
assets/images/thumbs/bur-lane/micros/file-name-thumb.jpg

💡 Tooltips - styling options:

"hint--rounded" adds rounded corners
"hint--info" adds blue background
"hint--top" tooltip pops up above the targeted item
e.g. this makes a blue tooltip with rounded corners that pops up above the targeted item :
<span class="hint--top hint--rounded hint--info" data-hint="UV Stable"><li class="legend legend-uvstable"></li></span>
Refer to hint.css docs for complete list of options.