Overview

Introduction

Chimera is built from the components of the ionic supply and is tailored to suit our needs. The template consists of four main parts: the component has been customized. The interfaces are designed based on the custom component. Social networking sites provided API. The native of Ionic is used to interact with your device.

Text

The following are common classes that define text. font-weight classes, font-color classes, text-aligning classes, text-decoration, text-transform, letter-spacing, text-overflow. You can see the list below and how to use the template.

Class

Description

.text-black

Text color

.text-white

Text color

.text-white-1

Text color

.text-white-2

Text color

.text-grey-1

Text color

.text-grey-2

Text color

.text-grey-3

Text color

.text-grey-4

Text color

.text-grey-5

Text color

.text-red

Text color

.text-pink

Text color

.text-purple

Text color

.text-d-purple

Text color

.text-indigo

Text color

.text-blue

Text color

.text-l-blue

Text color

.text-cyan

Text color

.text-teal

Text color

.text-green

Text color

.text-l-green

Text color

.text-lime

Text color

.text-yellow

Text color

.text-amber

Text color

.text-orange

Text color

.text-d-orange

Text color

.text-brown

Text color

.text-blue-grey

Text color

.spacing-1

Text color

.spacing-2

Text color

.spacing-3

Text color

.spacing-4

Text color

.spacing-5

Text color

.uppercase

Text uppercase

.lowercase

Text lowercase

.capitalize

Text capitalize

.text-left

Text left

.text-center

Text center

.text-right

Text right

.text-ellipsis

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

.overline

Text overline

.line-throught

Text line throught

.underline

Text underline

.fw-100

font weight 100

.fw-200

font weight 200

.fw-300

font weight 300

.fw-400

font weight 400

.fw-500

font weight 500

.fw-600

font weight 600

.fw-700

font weight 700

.fw-800

font weight 800

.fw-900

font weight 900

.fs-5

font size 5px

.fs-6

font size 6px

.fs-7

font size 7px

.fs-8

font size 8px

.fs-9

font size 9px

.fs-10

font size 10px

.fs-11

font size 11px

.fs-12

font size 12px

.fs-13

font size 13px

.fs-14

font size 14px

.fs-15

font size 15px

.fs-16

font size 16px

.fs-17

font size 17px

.fs-18

font size 18px

.fs-19

font size 19px

.fs-20

font size 20px

.fs-21

font size 21px

.fs-22

font size 22px

.fs-23

font size 23px

.fs-24

font size 24px

.fs-25

font size 25px

.fs-26

font size 26px

.fs-27

font size 27px

.fs-28

font size 28px

.fs-29

font size 29px

.fs-30

font size 30px

.fs-32

font size 32px

.fs-34

font size 34px

.fs-36

font size 36px

.fs-38

font size 38px

.fs-40

font size 40px

.fs-42

size 42px

.fs-44

size 44px

.fs-46

size 46px

.fs-48

size 48px

.fs-50

size 50px

.fs-60

size 60px

.fs-70

size 70px

.fs-80

size 80px

.fs-90

size 90px

.fs-100

size 100px

+

Stroke

Stroke classes and their uses and combinations with colors.

Class

Description

.stroke

.stroke .stroke-1

.stroke .stroke-2

.stroke .stroke-3

.stroke .stroke-left .stroke-3

.stroke .stroke-right .stroke-3

.stroke .stroke-bottom .stroke-3

.stroke .stroke-top .stroke-3

.divider pink

.bdra-0

border radius 0px

.bdra-1

border radius 1px

.bdra-2

border radius 2px

.bdra-3

border radius 3px

.bdra-4

border radius 4px

.bdra-5

border radius 5px

.bdra-6

border radius 6px

.bdra-7

border radius 7px

.bdra-8

border radius 8px

.bdra-9

border radius 9px

.bdra-10

border radius 10px

.bdra-12

border radius 12px

.bdra-14

border radius 14px

.bdra-15

border radius 15px

.bdra-16

border radius 16px

.bdra-18

border radius 18px

.bdra-20

border radius 20px

.bdra-25

border radius 25px

.bdra-30

border radius 30px

.circle

.stroke .stroke-2 .stroke-red

.stroke .stroke-2 .stroke-purple

.stroke .stroke-2 .stroke-blue

.stroke .stroke-2 .stroke-green

.stroke .stroke-2 .stroke-orange

.stroke .stroke-2 .stroke-

name color of list variable color

+

Shadow

Shadow has shadow outer and shadow inner. There are 3 different strengths. You can see the specific explanations below.

Class

Description

.shadow-0

boxshadow 0

.shadow-1

shadow 1

.shadow-2

shadow 2

.shadow-3

shadow 3

.shadow-inset-1

shadow inset 1

.shadow-inset-2

shadow inset 2

.shadow-inset-3

shadow inset 3

+

Opacity

The black and white opacity is composed of three levels. you can see in detail below.

Class

Description

.black-opct

black opacity 0.3

.black-opct-1

black opacity 0.6

.black-opct-2

black opacity 0.9

.white-opct

white opacity 0.3

.white-opct-1

white opacity 0.6

.white-opct-2

white opacity 0.9

In addition, the classes define the general opacity as follows.

Class

Description

.opct-0

opacity 0

.opct-1

opacity 0.1

.opct-2

opacity 0.2

.opct-3

opacity 0.3

.opct-4

opacity 0.4

.opct-5

opacity 0.5

.opct-6

opacity 0.6

.opct-7

opacity 0.7

.opct-8

opacity 0.8

.opct-9

opacity 0.9

.opct-10

opacity 1

+

Margin

Classes define common margin for quick use.

Class

Description

.mg-0

margin 0px

.mg-auto

margin left auto & margin-right auto

.mg-5

margin left 5px

.mg-10

margin left 10px

.mg-15

margin left 15px

.mg-20

margin left 20px

.mg-25

margin left 25px

.mg-30

margin left 30px

.mg-35

margin left 35px

.mg-40

margin left 40px

.mg-45

margin left 45px

.mg-50

margin left 50px

.mg-70

margin left 70px

.mg-90

margin left 90px

Below are the classes that define the common margin.

Margin top (px)

Margin right (px)

Margin bottom (px)

Margin left (px)

.mgt-0

.mgr-0

.mgb-0

.mgl-0

.mgt-5

.mgr-5

.mgb-5

.mgl-5

.mgt-10

.mgr-10

.mgb-10

.mgl-10

.mgt-15

.mgr-15

.mgb-15

.mgl-15

.mgt-20

.mgr-20

.mgb-20

.mgl-20

.mgt-25

.mgr-25

.mgb-25

.mgl-25

.mgt-30

.mgr-30

.mgb-30

.mgl-30

.mgt-35

.mgr-35

.mgb-35

.mgl-35

.mgt-40

.mgr-40

.mgb-40

.mgl-40

.mgt-45

.mgr-45

.mgb-45

.mgl-45

.mgt-50

.mgr-50

.mgb-50

.mgl-50

.mgt-70

.mgr-70

.mgb-70

.mgl-70

.mgt-90

.mgr-90

.mgb-90

.mgl-90

In addition, you can subtract the distance by the margin class back to the corresponding side you need.

Margin top (px)

Margin right (px)

Margin bottom (px)

Margin left (px)

.mgt--5

.mgr--5

.mgb--5

.mgl--5

.mgt--10

.mgr--10

.mgb--10

.mgl--10

.mgt--15

.mgr--15

.mgb--15

.mgl--15

.mgt--20

.mgr--20

.mgb--20

.mgl--20

.mgt--25

.mgr--25

.mgb--25

.mgl--25

.mgt--30

.mgr--30

.mgb--30

.mgl--30

.mgt--35

.mgr--35

.mgb--35

.mgl--35

.mgt--40

.mgr--40

.mgb--40

.mgl--40

.mgt--45

.mgr--45

.mgb--45

.mgl--45

.mgt--50

.mgr--50

.mgb--50

.mgl--50

.mgt--70

.mgr--70

.mgb--70

.mgl--70

.mgt--90

.mgr--90

.mgb--90

.mgl--90

+

Padding

Here are the common definition padding classes for you to use quickly. You can view the listing and usage below.

Class

Description

.pd-0

padding 0px

.pd-1

padding 1px

.pd-2

padding 2px

.pd-3

padding 3px

.pd-4

padding 4px

.pd-5

padding 5px

.pd-6

padding 6px

.pd-7

padding 7px

.pd-8

padding 8px

.pd-9

padding 9px

.pd-10

padding 10px

.pd-11

padding 11px

.pd-12

padding 12px

.pd-13

padding 13px

.pd-14

padding 14px

.pd-15

padding 15px

.pd-16

padding 16px

.pd-17

padding 17px

.pd-18

padding 18px

.pd-19

padding 19px

.pd-20

padding 20px

.pd-25

padding 25px

.pd-30

padding 30px

.pd-35

padding 35px

.pd-40

padding 40px

.pd-45

padding 45px

.pd-50

padding 50px

You also have specific classes defining the padding you need.

padding top (px)

padding right (px)

padding bottom (px)

padding left (px)

.pdt-0

.pdr-0

.pdb-0

.pdl-0

.pdt-1

.pdr-1

.pdb-1

.pdl-1

.pdt-2

.pdr-2

.pdb-2

.pdl-2

.pdt-3

.pdr-3

.pdb-3

.pdl-3

.pdt-4

.pdr-4

.pdb-4

.pdl-4

.pdt-5

.pdr-5

.pdb-5

.pdl-5

.pdt-6

.pdr-6

.pdb-6

.pdl-6

.pdt-7

.pdr-7

.pdb-7

.pdl-7

.pdt-8

.pdr-8

.pdb-8

.pdl-8

.pdt-9

.pdr-9

.pdb-9

.pdl-9

.pdt-10

.pdr-10

.pdb-10

.pdl-10

.pdt-11

.pdr-11

.pdb-11

.pdl-11

.pdt-12

.pdr-12

.pdb-12

.pdl-12

.pdt-13

.pdr-13

.pdb-13

.pdl-13

.pdt-14

.pdr-14

.pdb-14

.pdl-14

.pdt-15

.pdr-15

.pdb-15

.pdl-15

.pdt-16

.pdr-16

.pdb-16

.pdl-16

.pdt-17

.pdr-17

.pdb-17

.pdl-17

.pdt-18

.pdr-18

.pdb-18

.pdl-18

.pdt-19

.pdr-19

.pdb-19

.pdl-19

.pdt-20

.pdr-20

.pdb-20

.pdl-20

.pdt-25

.pdr-25

.pdb-25

.pdl-25

.pdt-30

.pdr-30

.pdb-30

.pdl-30

.pdt-35

.pdr-35

.pdb-35

.pdl-35

.pdt-40

.pdr-40

.pdb-40

.pdl-40

.pdt-45

.pdr-45

.pdb-45

.pdl-45

.pdt-50

.pdr-50

.pdb-50

.pdl-50

+

Skin

To change the color of the toolbar and the sidebar first you need to use the '.skin' class then associate it with the class '.skin-dark' or the class '.skin-light' so that the highlight on the background and the end Select colors with '.skin-blue' or '.skin-red' ... etc ...

Add those classes to the tag like < ion-tabs > or < ion-menu > or < ion-toolbar >

Class

.skin .skin-dark .skin blue

.skin .skin-dark .skin-pink-vs-indigo

.skin .skin-dark .skin-indigo-vs-purple

.skin .skin-dark .skin-pink-vs-red

.skin .skin-dark .skin-pink-vs-yellow

.skin .skin-dark .skin-lama-vs-coban

.skin .skin-dark .skin-green-vs-yellow

.skin .skin-dark .skin-tim-vs-datroi

.skin .skin-dark .skin-hong-vs-lanon

.skin .skin-light .skin-lot-vs-phan

.skin .skin-dark .skin-transparent

.skin .skin-light .skin-transparent

.skin .skin-light .skin-white

.skin .skin-light .skin-white-1

.skin .skin-light .skin-white-2

.skin .skin-light .skin-grey-1

.skin .skin-light .skin-grey-2

.skin .skin-light .skin-grey-3

.skin .skin-light .skin-grey-4

.skin .skin-light .skin-grey-5

.skin .skin-dark .skin-black

.skin .skin-dark .skin-red

.skin .skin-dark .skin-pink

.skin .skin-dark .skin-purple

.skin .skin-dark .skin-d-purple

.skin .skin-dark .skin-indigo

.skin .skin-dark .skin-blue

.skin .skin-light .skin-l-blue

.skin .skin-dark .skin-cyan

.skin .skin-dark .skin-teal

.skin .skin-dark .skin-green

.skin .skin-light .skin-l-green

.skin .skin-light .skin-lime

.skin .skin-light .skin-yellow

.skin .skin-light .skin-amber

.skin .skin-dark .skin-orange

.skin .skin-dark .skin-d-orange

.skin .skin-dark .skin-brown

.skin .skin-dark .skin-blue-grey

+

Other

There are also other classes that define blocks. See the list below and how to use them

Class

Description

.pull-left

Float left

.pull-right

Float right

.pst-relative

position relative

.pst-absolute

position absolute

.pst-fixed

position fixed

.block

display block

.inline-block

display inline block

.full-width

display block & width 100%

Components

Lazy Loading

All our components and page are design to support lazy loading. To learn about lazy loading just reading here. But you can still use component without lazy loading like normal, just import component to app.module.ts file