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 inside a q element example

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

1. list item 1
2. list item 1
   1. list item 2
   2. list item 2
      1. list item 3
      2. list item 3
   3. list item 2
   4. list item 2
3. list item 1
4. 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

Primary

Secondary

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.

Messages

Icons

Please see Magento iconography documentation here.

'\e600'

'\e601'

'\e602'

'\e603'

'\e604'

'\e605'

'\e606'

'\e607'

'\e608'

'\e609'

'\e60a'

'\e60b'

'\e60c'

'\e60d'

'\e60e'

'\e60f'

'\e610'

'\e611'

'\e612'

'\e613'

'\e614'

'\e615'

'\e616'

'\e617'

'\e618'

'\e619'

'\e61a'

'\e61b'

'\e61c'

'\e61d'

'\e61e'

'\e61f'

'\e620'

'\e621'

'\e622'

'\e623'

'\e624'

'\e625'

'\e626'

CoastIPC Colors

Colors taken from

app/design/frontend/XDEV/CoastIPC/web/css/source/core/_variables.less

#1a79c2

#9bcb54

Colors

Colors taken from

lib/web/css/source/lib/variables/_colors.less

#008bdb

#333333

#fff

#000

#8a837f

#303030

#333

#575757

#5e5e5e

#666

#6d6d6d

#757575

#858585

#8c8c8c

#8f8f8f

#999

#9e9e9e

#a3a3a3

#adadad

#c2c2c2

#c7c7c7

#c9c9c9

#ccc

#d1d1d1

#d4d4d4

#e3e3e3

#e5e5e5

#e8e8e8

#ebebeb

#f0f0f0

#f2f2f2

#cccccc

#cacaca

#666

#f5f5f5

#efefef

#f8f8f8

#f6f6f6

#f4f4f4

#e5efe5

#bbb

#aeaeae

#cecece

#c1c1c1

#c5c5c5

#e4e4e4

#c6c6c6

#7e807e

#6e716e

#707070

#eee

#e2e2e2

#cdcdcd

#555

#494949

#ff0101

#e02b27

#b30000

#d10029

#ff5501

#ff5601

#ff5700

#fc5e10

#006400

#1979c3

#006bb4

#00699D

#68a8e0

#fae5e5

#800080

#514943

#736963

#6f4400

#c07600

#fdf0d5

#ffee9c

#d6ca8e

#ff0