Getting Started
A living style guide is a great tool to promote visual consistency, unify UX designers and front-end developers, as well as speed up development times. Add some documentation here on how to get started with your new style guide and start customizing this boilerplate to your liking.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius turpis. Donec malesuada ac nisi sit amet pellentesque. Aenean imperdiet tincidunt porttitor. Nunc ut laoreet justo, placerat elementum nulla. Duis maximus dapibus elementum. Nulla facilisis feugiat lectus non blandit. Donec vel lacus nec dui tincidunt feugiat ac ut tellus. In vitae purus viverra, congue eros quis, feugiat urna. Donec lacus justo, consequat a congue vestibulum, viverra at libero. Sed dui nibh, vestibulum eu erat et, condimentum volutpat eros. Morbi vel felis tincidunt, elementum tellus ac, varius risus.
Pellentesque a imperdiet urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris dapibus, nisi commodo euismod semper, nisi magna vestibulum lectus, et interdum odio felis vitae enim. Integer tincidunt erat eu urna condimentum, sit amet sagittis ligula congue. Suspendisse eu nisi nec nisl dictum viverra non et lorem. Ut tristique cursus maximus. Quisque eget pretium mi. Cras in eros pharetra, ullamcorper leo at, maximus lorem. Pellentesque porttitor eu dui sed sagittis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Praesent fermentum lorem venenatis elit ultrices, at semper orci placerat. Quisque non condimentum metus. Vestibulum et metus porttitor, pretium risus vitae, convallis nisi. Vestibulum sit amet massa quis enim aliquet vehicula. Donec placerat, odio ac eleifend facilisis, ligula ligula interdum quam, non feugiat metus mauris at felis.
Text Elements
The a element example
The abbr element and an abbr element with title examples
The b element example
The cite element example
The code element
example
The em element example
The del element example
The dfn element and dfn element with title examples
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example
The q element
exampleinside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example
Lists
List Definition
- Description name
- Description value
- Description name
- Description value
- Description value
- Description name
- Description name
- Description value
List Ordered
- list item 1
- list item 1
- list item 2
- list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
List Unordered
- list item 1
- list item 1
- list item 2
- list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
Buttons
Misc.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Praesent fermentum lorem venenatis elit ultrices, at semper orci placerat. Quisque non condimentum metus. Vestibulum et metus porttitor, pretium risus vitae, convallis nisi. Vestibulum sit amet massa quis enim aliquet vehicula. Donec placerat, odio ac eleifend facilisis, ligula ligula interdum quam, non feugiat metus mauris at felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non varius turpis. Donec malesuada ac nisi sit amet pellentesque. Aenean imperdiet tincidunt porttitor. Nunc ut laoreet justo, placerat elementum nulla. Duis maximus dapibus elementum. Nulla facilisis feugiat lectus non blandit. Donec vel lacus nec dui tincidunt feugiat ac ut tellus. In vitae purus viverra, congue eros quis, feugiat urna. Donec lacus justo, consequat a congue vestibulum, viverra at libero. Sed dui nibh, vestibulum eu erat et, condimentum volutpat eros. Morbi vel felis tincidunt, elementum tellus ac, varius risus.
Pellentesque a imperdiet urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris dapibus, nisi commodo euismod semper, nisi magna vestibulum lectus, et interdum odio felis vitae enim. Integer tincidunt erat eu urna condimentum, sit amet sagittis ligula congue. Suspendisse eu nisi nec nisl dictum viverra non et lorem. Ut tristique cursus maximus. Quisque eget pretium mi. Cras in eros pharetra, ullamcorper leo at, maximus lorem. Pellentesque porttitor eu dui sed sagittis.
Messages
Icons
Please see Magento iconography documentation here.
'\e600'@icon-wishlist-full
'\e601'@icon-wishlist-empty
'\e602'@icon-warning
'\e603'@icon-update
'\e604'@icon-trash
'\e605'@icon-star
'\e606'@icon-settings
'\e607'@icon-pointer-down
'\e608'@icon-next
'\e60a'@icon-location
'\e60b'@icon-list
'\e60c'@icon-info
'\e60d'@icon-grid
'\e60e'@icon-comment-reflected
'\e60f'@icon-collapse
'\e610'@icon-checkmark
'\e611'@icon-cart
'\e612'@icon-calendar
'\e613'@icon-arrow-up
'\e614'@icon-arrow-down
'\e615'@icon-search
'\e616'@icon-remove
'\e617'@icon-prev
'\e618'@icon-pointer-up
'\e619'@icon-pointer-right
'\e61a'@icon-pointer-left
'\e61b'@icon-flag
'\e61c'@icon-expand
'\e61d'@icon-envelope
'\e61e'@icon-compare-full
'\e61f'@icon-compare-empty
'\e620'@icon-comment
'\e621'@icon-up
'\e622'@icon-down
'\e623'@icon-arrow-up-thin
'\e624'@icon-arrow-right-thin
'\e625'@icon-arrow-left-thin
'\e626'@icon-arrow-down-thin
CoastIPC Colors
Colors taken from
app/design/frontend/XDEV/CoastIPC/web/css/source/core/_variables.less
#1a79c2@coastipc-color-primary
#9bcb54@coastipc-color-secondary
Colors
Colors taken from
lib/web/css/source/lib/variables/_colors.less
#008bdb@color-blue-dodger
#333333@color-black_dark
#fff@color-white
#000@color-black
#8a837f@color-darkie-gray
#303030@color-gray19
#333@color-gray20
#575757@color-gray34
#5e5e5e@color-gray37
#666@color-gray40
#6d6d6d@color-gray43
#757575@color-gray46
#858585@color-gray52
#8c8c8c@color-gray55
#8f8f8f@color-gray56
#999@color-gray60
#9e9e9e@color-gray62
#a3a3a3@color-gray64
#adadad@color-gray68
#c2c2c2@color-gray76
#c7c7c7@color-gray78
#c9c9c9@color-gray79
#ccc@color-gray80
#d1d1d1@color-gray82
#d4d4d4@color-gray83
#e3e3e3@color-gray89
#e5e5e5@color-gray90
#e8e8e8@color-gray91
#ebebeb@color-gray92
#f0f0f0@color-gray94
#f2f2f2@color-gray95
#cccccc@color-gray_light
#cacaca@color-lighter-grayish
#666@color-very-dark-gray
#f5f5f5@color-white-smoke
#efefef@color-white-dark-smoke
#f8f8f8@color-white-fog
#f6f6f6@color-gray-light0
#f4f4f4@color-gray-light01
#e5efe5@color-gray-light1
#bbb@color-gray-light2
#aeaeae@color-gray-light3
#cecece@color-gray-light4
#c1c1c1@color-gray-light5
#c5c5c5@color-gray-light6
#e4e4e4@color-gray-middle1
#c6c6c6@color-gray-middle2
#7e807e@color-gray-middle3
#6e716e@color-gray-middle4
#707070@color-gray-middle5
#eee@color-gray-darken0
#e2e2e2@color-gray-darken1
#cdcdcd@color-gray-darken2
#555@color-gray-darken3
#494949@color-gray-darken4
#ff0101@color-red9
#e02b27@color-red10
#b30000@color-red11
#d10029@color-red12
#ff5501@color-orange-red1
#ff5601@color-orange-red2
#ff5700@color-orange-red3
#fc5e10@color-orange-red4
#006400@color-dark-green1
#1979c3@color-blue1
#006bb4@color-blue2
#00699D@color-blue3
#68a8e0@color-sky-blue1
#fae5e5@color-pink1
#800080@color-dark-pink1
#514943@color-brownie
#736963@color-brownie-vanilla
#6f4400@color-brownie1
#c07600@color-brownie-light1
#fdf0d5@color-yellow-light1
#ffee9c@color-yellow-light2
#d6ca8e@color-yellow-light3
#ff0@color-yellow1