Css

Eppard CSS

Eppard Css is a free html styling framework that provide ready to use styled css classes you can use on your html or markup elements to build mordern and responsive user interfaces.

Easy to use for css novices and advanced developers and you can build your own custom components.

To use Eppard Css you need to include below HTML attributes on your html link tag in your html head.

href="https://library.halleppardwebsolutions.co.za/eppardcss1/eppard.min.css" integrity="sha256-9XgURVUvICiXggZgQjI8iC17s8Vm9EhHiHFCDRQSEKE=" crossorigin="anonymous"

Colors

Eppard Color-set

primary

secondary

error

info

stream

aqua

blue

cfblue

dcyan

ablue

dsblue

lsblue

sblue

red

ired

tomato

fbrick

yellow

sgreen

green

dsgreen

amarine

orange

brown

sbrown

teal

beige

csilk

slblue

violet

plum

dsgray

gray

sgrey

silver

lgray

lavender

black

white

fwhite

gwhite

ivory

wheat

gold

peru

salmon

lcoral

indigo

hpink

Text Colors

To access the libray text colors you use the class: ( text-$color ).

When styling text all colors comes with 7 shades each of dark and light.

Example: text-$color-light-1, text-$color-dark-5.

Default Text Colors

This text is blue.

<p class="text-error">This text color represent error color.</p>

This text color represent error color.

Light Text Shades

<p class="text-blue-light-5"> This text color represents the 4th light shade of color blue. </p>

This text color represents the 4th light shade of color blue.

Dark Text Shades

<p class="text-blue-dark-4"> This text color represents the 4th dark shade of color blue. </p>

This text color represents the 4th dark shade of color blue.

Content

Font style

To access the libray fonts style you use the ( fonts-$value ) class.

Style values you have are: "norm" for normal, "ital" for italic, "obliq" for oblique.

<p class="fonts-ital">Font Styles</p>

Font Styles

Font Weight

To access the libray fonts style you use the ( fontw-$value ) class.

Weight values you have are: "norm" for normal, "bold" for bold, "bolder" for bolder, "lighter" for lighter, 4 for 400, 5 for 500, 6 for 600, 7 for 700, 8 for 800, 9 for 900.

<p class="fontw-bold">Font Weight</p>

Font Weight

Normal Text Size

To access the libray normal text size styles you use the ( font-$value ) class.

Normal Text Size values you have are - "sm": .75em, "md": 1.2em, "lg": 1.8em, "xl": 2.4em, "xxl": 3em, "xxxl": 3.6em.

Normal Text Size sm

Normal Text Size md

Header Text Size

To access the libray header text size styles you use the ( header-font-$value ) class.

Header Text Size values you have are: "sm": 3em, "md": 3.5em, "lg": 4em, "xl": 4.5em, "xxl": 5em, "xxxl": 6.5em.

<p class="header-font-sm">Header Text Size sm</p>

Header Text Size sm

Header Text Size md

Text Align & Text align last

To access the libray text aligning styles you use the ( text-$value & textl-$value ) class.

Text aligning values you have are: "center", "left", "right".

<p class="text-left">This text is aligned left.</p>

This text is aligned left.

<p class="text-center">This text is aligned center.</p>

This text is aligned center.

<p class="text-right">This text is aligned right.</p>

This text is aligned right.

Text Decorations

To access the libray Text decoration styles you use the ( textd-$value ) class.

Text Decoration values you have are: "o" for overline, "l" for line-through, "u" for underline, "uo" for underline overline.

This text is string.

This text is string.

This text is string.

Text Decoration Color

To access the libray Text Text Decoration Color you use the ( texttc-$color ) class.

Text decoration color values are all the colors available in the library's color pallete.

This text is string.

Text Transform

To access the libray Text Transform styles you use the ( textt-$value ) class.

Text Transform values you have are: "u" for uppercase, "l" for lowercase, "c" for capitalize.

This text is string.

This text is string.

This text is string.

Word Break

To access the libray Word Break styles you use the ( wordb-$value ) class.

Word Break values you have are: "b" for break-word, "s" for break-all, "n" for normal.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, suscipit? Nihil iusto dignissimos voluptatem dolor, quidem sapiente non ratione. Quibusdam est, iure ab in non aut velit quod harum earum recusandae quam reprehenderit quia qui doloribus nemo laboriosam ipsum animi libero? Obcaecati, ipsa libero veniam odio nulla facilis culpa corporis harum aliquam aliquid laudantium laboriosam eligendi fugiat est architecto? Odit provident ea modi consectetur ipsum nisi asperiores velit ducimus temporibus, aut laudantium unde dolorem quis saepe quisquam ut, tenetur quia excepturi illum nostrum a sequi! Nesciunt quo nihil voluptatibus. Voluptatem vero in soluta ex sunt consequuntur laborum quae voluptates ut.

Word Wrap

To access the libray Word Wrap styles you use the ( wordw-$value ) class.

Word Wrap values you have are: "u" for uppercase, "l" for lowercase, "c" for capitalize..

Text Writing Mode

To access the libray Text Text Decoration Color you use the ( write-mod-$value ) class.

Text Writing Mode values you have are: "tb" for horizontal-tb, "rl" for vertical-rl, "lr" for vertical-lr.

This text is string.

This text is string.

This text is string.

Letter Spacing

To access the libray Letter Spacing styles you use the ( letter-spacing-$value ) class.

Letter Spacing values you have are - "0": 0, "1": ".1em", "2": ".2em", "3": ".3em", "4": ".4em", "5": ".5em", "6": ".6em", "7": ".7em", "8": ".8em", "9": ".9em", "10": "1em", "11": "1.2em", "12": "1.4em", "13": "1.6em", "14": "1.8em", "15": "2em", "16": "3em",.

Letter Spacing

To access the libray Letter Spacing styles you use the ( letter-spacing-$value ) class.

Line Height

To access the libray Line Height styles you use the ( line-height-$value ) class.

Line Height values you have are: "0": 0em to "60": 6em.
Eg - "1": 1em, "27": 2.7em, "31": 3.1em, "55": 5.5em,

Images

By default all images are width: 100% and height: 100%.

You give the image container implicite width and height and it will responsively scale to fit current screen size, since images are auto styled to width and height 100%.

Utilities

Borders

To access the libray border styles you use the ( border-$value ) class.

You can use all colors available in color pelet.

border-stream

border-red

border-blue

border-green

border-indigo

border-dsgray

border-sbrown

border-amarine

Border Top

To access the libray border-top styles you use the ( bordert-$value ) class.

bordert-stream

bordert-red

bordert-blue

bordert-green

bordert-indigo

bordert-dsgray

bordert-sbrown

bordert-amarine

Border Bottom

To access the libray border-bottom styles you use the ( borderb-$value ) class.

borderb-stream

borderb-red

borderb-blue

borderb-green

borderb-indigo

borderb-dsgray

borderb-sbrown

borderb-amarine

Border Left

To access the libray border-left styles you use the ( borderl-$value ) class.

borderl-stream

borderl-red

borderl-blue

borderl-green

borderl-indigo

borderl-dsgray

borderl-sbrown

borderl-amarine

Border Right

To access the libray border-right styles you use the ( borderr-$value ) class.

borderr-stream

borderr-red

borderr-blue

borderr-green

borderr-indigo

borderr-dsgray

borderr-sbrown

borderr-amarine

Outline

To access the libray outline styles you use the ( outline-$value ) class.

outline-stream

outline-red

outline-blue

outline-green

outline-indigo

outline-dsgray

outline-sbrown

outline-amarine

Border Radius

To access the libray Border Radius classes you use the ( br-$value ) class.

Border radius values are 1-6.

Opacity

To access the libray Opacity class you use the ( o-$value ) class.

Border radius values are 1-10.

Z-index

To access the libray Z-index class you use the ( zindex$value ) class.

Z-index classes are zindex0 for -5, zindex for 0, zindex1 for 5, zindex2 for 10.

Margin

Margin has 5 classes you can use and values are from 1-12.

To access the libray margin classes you use the ( m-$Value ) class.

To access the libray margin-left classes you use the ( ml-$Value ) class.

To access the libray margin-right classes you use the ( mr-$Value ) class.

To access the libray margin-top classes you use the ( mt-$Value ) class.

To access the libray margin-bottom classes you use the ( mb-$Value ) class.

<p class="ml-5">Margin value testing.</p>

Margin value testing.

<p class="mt-3">Margin-top value testing.</p>

Margin-top value testing.

Padding

Padding has 5 classes you can use and values are from 1-12.

To access the libray padding classes you use the ( p-$Value ) class.

To access the libray padding-left classes you use the ( pl-$Value ) class.

To access the libray padding-right classes you use the ( pr-$Value ) class.

To access the libray padding-top classes you use the ( pt-$Value ) class.

To access the libray padding-bottom classes you use the ( pb-$Value ) class.

<p class="pl-5">Padding value testing.</p>

Padding value testing.

<p class="pb-3">Padding-top value testing.</p>

Padding-bottom value testing.

Margin

To access the libray margin classes you use the ( ) class.

Display

To access the libray display styles you use the ( display-$value ) class.

Display values you have are: "n": none, "b": block, "f": flex, "i": inline, "i-b": inline-block, "g": grid.

Overflow

Overflow values you have are: "s": scroll, "h": hidden, "a": auto, "v": visible, "ini": initial, "inh": inherit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, deleniti. Corporis enim, at reprehenderit, quas magnam quos molestias earum officiis quibusdam nobis neque ipsa id, aperiam beatae voluptates molestiae eos accusantium? Quia sequi porro recusandae. Voluptates, et vel? Quae aut harum reiciendis incidunt! Perferendis esse cupiditate minima sunt animi quae eveniet architecto, temporibus eum soluta et ipsum fugiat culpa atque voluptatum quo? Numquam sit optio nesciunt dolor. Sapiente laborum ducimus dignissimos omnis nam, est inventore perferendis. Quia repudiandae optio repellat dolorem nam molestiae labore autem. Odit, incidunt sint labore esse possimus, necessitatibus eaque explicabo quos pariatur debitis voluptatibus obcaecati totam.

Corporis enim, at reprehenderit, quas magnam quos molestias earum officiis quibusdam nobis neque ipsa id, aperiam beatae voluptates molestiae eos accusantium? Quia sequi porro recusandae. Voluptates, et vel? Quae aut harum reiciendis incidunt! Perferendis esse cupiditate minima sunt animi quae eveniet architecto, temporibus eum soluta et ipsum fugiat culpa atque voluptatum quo? Numquam sit optio nesciunt dolor. Sapiente laborum ducimus dignissimos omnis nam, est inventore perferendis. Quia repudiandae optio repellat dolorem nam molestiae labore autem. Odit, incidunt sint labore esse possimus, necessitatibus eaque explicabo quos pariatur debitis voluptatibus obcaecati totam.

Overflow-wrap

Overflow-wrap values you have are: "n": normal, "s": break-word, "i": initial, "inh": inherit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, deleniti. Corporis enim, at reprehenderit, quas magnam quos molestias earum officiis quibusdam nobis neque ipsa id, aperiam beatae voluptates molestiae eos accusantium? Quia sequi porro recusandae. Voluptates, et vel? Quae aut harum reiciendis incidunt! Perferendis quas magnam quos molestias earum officiis quibusdam nobis neque ipsa id, aperiam beatae voluptates molestiae eos accusantium? Quia sequi porro recusandae. Voluptates, et vel? Quae aut harum reiciendis incidunt! Perferendis

Overflow-x

Overflow-X values you have are: "s": scroll, "h": hidden, "a": auto, "v": visible, "ini": initial, "inh": inherit.

One

Two

Three

Four

Overflow-y

Overflow-Y values you have are: "s": scroll, "h": hidden, "a": auto, "v": visible, "ini": initial, "inh": inherit.

One

Two

Three

Four

Box Shadow

To access the box shadow class you use: bs-$color.

For the color value you can use any of the colors in library pallete.

Position

To access position class you use : (position-$value).

Position values you have are: static, absolute, fixed, relative, stick, initial, inherit.

Sizing ( Height & Width )

To access the libray sizing styles you use the ( wdth$value / hvw$value ) class.

All measurements are from 1-100.

Sizing width the library has 5 measurement types percent(wdth), viewport width(vw), smallest viewport width(svw), largest viewport width(lvw) dynamic viewport width(dvw).

Sizing width the library has 5 measurement types percent(hvw), viewport height(vh), smallest viewport height(svh), largest viewport height(lvh) dynamic viewport height(dvh).

Layout

Container

The container class wrap is responsive and flexible by default, width is 100% and height is max-content on any device.

Breakpoints

Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user.

CSS breakpoints are also called media query breakpoints, as they are used with media query. There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device.

Each of this library's breakpoints can span from 1 to 12 columns depending on your needs.

To keep things simple we target five groups:

xs - <= 480px;

sm - <= 620px;

md - <= 768px;

lg - <= 992px;

xl - > 1200px;

Grid (Row)

To layout elements inside a wrapper with grid display you can use the class ( layoutG-row ).

wrap 1

wrap 2

wrap 3

wrap 4

Columns Layout

To layout elements inside a wrapper column direction display you have 7 classes to choose from depending on your design requirements.

layoutG-column - min-width for the elements inside this container is 50px max-width is 1fr.

layoutG-column1 - min-width for the elements inside this container is 100px max-width is 1fr.

layoutG-column2 - min-width for the elements inside this container is 200px max-width is 1fr.

layoutG-column3 - min-width for the elements inside this container is 320px max-width is 1fr.

layoutG-column4 - min-width for the elements inside this container is 460px max-width is 1fr..

layoutG-column5 - min-width for the elements inside this container is 540px max-width is 1fr..

row - class row is build around display flex and is reponsive by default. To give width to the elements inside this container you can use the breakpoint class ( col-{1-12}-$device ), height is max-content by default.

Column Examples

wrap 1

wrap 2

wrap 3

wrap 4

wrap 1

wrap 2

wrap 3

wrap 4

wrap 1

wrap 2

wrap 3

wrap 4

Alignment gap

To adjust row-gap size you use class ( gap-row-$value ). Values start from 0 which is equal to 0em upto 60 which is equal to 6.0em.

wrap 1

wrap 2

wrap 3

wrap 4

To adjust column-gap size you use class ( gap-col-$value ). Values start from 0 which is equal to 0em upto 60 which is equal to 6.0em.

wrap 1

wrap 2

wrap 3

wrap 4

You can also use gap size shorthand to target column and row gaps evenly you use class ( gap-$value ). Values start from 0 which is equal to 0em upto 60 which is equal to 6.0em.

wrap 1

wrap 2

wrap 3

wrap 4

wrap 1

wrap 2

wrap 3

wrap 4

For alignment items inside the grid container horizontal. you use class ( justify-item-$value ).

Justify-item values you have are: flex-start, flex-end, center, left, right, space-between, space-around, self-start, self-end.

wrap 1

wrap 2

wrap 3

wrap 4

For alignment items inside the grid container Vertical. you use class ( align-item-$value ).

Justify-item values you have are: flex-start, flex-end, center, left, right, space-between, space-around, self-start, self-end.

wrap 1

wrap 2

wrap 3

wrap 4

Components

Alerts

To use the alert components. you use class ( alert-$color ) with inside elements structure like below.

                                
                                    <div class="alert-error" id="info-error">
                                        <div class="alert-wrap">
                                            <button class="closebtn bg-error text-white" onclick="this.parentElement.style.display='none';">
                                                <i class="eppard-cancel-circle">  </i>
                                            </button>
                                            <div class="alert-body">
                                                <p class="eppard-cancel-circle">  
                                                    <i class="eppard-warning">  </i>
                                                    Error: Upload failed, Server error ...
                                                </p>
                                            </div>
                                        </div>
                                    </div>

Error: Upload failed, Server error ...

Notification: Upload Successful ...

Label

To use the badge components. you use class ( alert-$color ) with inside elements structure like below.

<span class="label-red wdth"> <i class="eppard-warning"> </i> Error </span>

Error Alert Warning

<span class="label-blue wdth "> <i class="eppard-integration font-lg pr-1 borderr-white"> </i> <p class="display-i pl-1"> The library has various types of button styles. </p> </span>

The library has various types of button styles.

Task clean files complete ...

The service failed at start-up ...

Buttons

The library has various types of button styles, to use the default styles. you use class ( btn || btn-pill || btn-rect ).

To use buttons with icons, first add the Icons library in your project.

Class btn ( btn-$color ).

<button class="btn">btn</button>
<button class="btn-primary">btn-primary</button>
<button class="btn-secondary">btn-secondary</button>
<button class="btn-info">btn-info</button>
<button class="btn-error">btn-error</button>
<button class="btn-aqua">btn-aqua</button>
<button class="btn-ired">btn-ired</button>
<button class="btn-dsblue">btn-dsblue</button>

Class ( btn-outline-$color ).

<button class="btn-outlined">btn-outlined</button>
<button class="btn-outlined-primary text-hover-white">btn-outlined-primary</button>
<button class="btn-outlined-secondary text-hover-white">btn-outlined-secondary</button>
<button class="btn-outlined-info text-hover-white">btn-outlined-info</button>
<button class="btn-outlined-error text-hover-white">btn-outlined-error</button>
<button class="btn-outlined-aqua text-hover-white">btn-outlined-aqua</button>
<button class="btn-ired">btn-ired text-hover-white</button>
<button class="btn-outlined-dsblue text-hover-white">btn-outlined-dsblue</button>

Class ( btn-compliment-$color ).

<button class="btn-complement">btn-complement</button>
<button class="btn-complement-primary">btn-complement-primary</button>
<button class="btn-complement-secondary">btn-complement-secondary</button>
<button class="btn-complement-info">btn-complement-info</button>
<button class="btn-complement-error">btn-complement-error</button>
<button class="btn-complement-aqua ">btn-complement-aqua</button>
<button class="btn-complement-ired">btn-complement-ired text-hover-white</button>
<button class="btn-outlined-dsblue">btn-complement-dsblue</button>

Class ( btn-rnd-$color ).

<button class="btn-rnd text-secondary">btn-rnd</button>
<button class="btn-rnd-primary text-white">btn-rnd-primary</button>
<button class="btn-rnd-secondary text-white">btn-rnd-secondary</button>
<button class="btn-rnd-info">btn-rnd-info</button>
<button class="btn-rnd-error text-white">btn-rnd-error</button>
<button class="btn-rnd-aqua text-primary">btn-rnd-aqua</button>
<button class="btn-rnd-ired text-white">btn-rnd-ired text-hover-white</button>
<button class="btn-rnd-dsblue">btn-rnd-dsblue</button>

Class ( btn-rect-$color ).

<button class="btn-rect text-secondary">btn-rect</button>
<button class="btn-rect-primary text-white">btn-rect-primary</button>
<button class="btn-rect-secondary text-white">btn-rect-secondary</button>
<button class="btn-rect-info">btn-rect-info</button>
<button class="btn-rect-error text-white">btn-rect-error</button>
<button class="btn-rect-aqua text-primary">btn-rect-aqua</button>
<button class="btn-rect-ired text-white">btn-rect-ired text-hover-white</button>
<button class="btn-rect-dsblue">btn-rect-dsblue</button>

Class ( btn-pill-$color ).

<button class="btn-pill text-secondary p-1">btn-pill <i class="eppard-d-modeling font-lg"></i> </button> <button class="btn-pill-primary text-white p-1">btn-pill-primary <i class="eppard-days text-white font-lg"></i> </button> <button class="btn-pill-secondary text-white p-1">btn-pill-secondary <i class="eppard-locked_icon text-white font-lg"></i> </button> <button class="btn-pill-info">btn-pill-info p-1 <i class="eppard-more-info text-white font-lg"></i> </button> <button class="btn-pill-error text-white p-1">btn-pill-error <i class="eppard-pause-button text-primary font-lg"></i> </button> <button class="btn-pill-aqua text-primary p-1">btn-pill-aqua <i class="eppard-share-round-line text-white font-lg"></i> </button> <button class="btn-pill-ired text-white p-1">btn-pill-ired text-hover-white <i class="eppard-instagram text-ired font-lg"></i> </button> <button class="btn-pill-dsblue p-1">btn-pill-dsblue <i class="eppard-google text-ired font-lg"></i> </button>

Class ( btn-pills-$color ).

<button class="btn-pills text-secondary p-1">btn-pills <i class="eppard-d-modeling font-lg"></i> </button> <button class="btn-pills-primary text-white p-1">btn-pills-primary <i class="eppard-days text-white font-lg"></i> </button> <button class="btn-pills-secondary text-white p-1">btn-pills-secondary <i class="eppard-locked_icon text-white font-lg"></i> </button> <button class="btn-pills-info">btn-pills-info p-1 <i class="eppard-more-info text-white font-lg"></i> </button> <button class="btn-pills-error text-white p-1">btn-pills-error <i class="eppard-pause-button text-primary font-lg"></i> </button> <button class="btn-pills-aqua text-primary p-1">btn-pills-aqua <i class="eppard-share-round-line text-white font-lg"></i> </button> <button class="btn-pills-ired text-white p-1">btn-pills-ired text-hover-white <i class="eppard-instagram text-ired font-lg"></i> </button> <button class="btn-pills-dsblue p-1">btn-pills-dsblue <i class="eppard-google text-ired font-lg"></i> </button>

Other Button Classes.

Button Animated

<button class="btn-anim-stream font-md"> <span>animated</span> </button>

Button Animated Flash

<button class="btn-anim-ired font-md">animated1</button>

Button Animated Flash2

<button class="btn-anim2-stream font-md">animated2</button>

Button notification class ( btn-notif-$color )

<a href="#" class="btn-notif-stream"> <span>Inbox</span> <span class="bagde">10</span> </a>

Inbox 10

Button notification1class ( btn-notif1-$color )

<a href="#" class="btn-notif1-ired"> <span>Inbox</span> <span class="bagde">3</span> </a>

Inbox 3

Button with icons

<button class="btn-icon-stream font-md wdth"> <i class="eppard-home-button pr-1"></i> Home </button>

Button link

<button class="btn-warn font-md">Warning</button>

Tooltips

To use the tooltip component. you use class ( tooltip-$color ).

<div class="tooltip> <p class="p-1"> <span class="tooltiptext">Tooltip text</span> </p> </div>

Form

<div class="wdth100 row gap-row-20 justify-center border-ablue br-2 p-2">
<div class="col-12-xs col-12-sm col-9-md col-9-lg hvw row gap-row-20 justify-center">
<form action="#" class="col-12-xs col-12-sm col-10-md col-9-lg hvw row gap-row-20 justify-center"> <div class="col-12-xs col-12-sm col-10-md col-10-lg text-center text-gray"> <p>Enter Your Account Login Details Email and Password Below.</p> </div> <div class="col-12-xs col-12-sm col-12-md col-12-lg row gap-row-20 gap-col-10 justify-center"> <div class="col-12-xs col-12-sm col-10-md col-9-lg layoutG-row gap-row-3"> <label for="email" class="text-blue">Email</label> <input type="email" name="email" class="inputf-silver"> </div> <div class="col-12-xs col-12-sm col-10-md col-9-lg layoutG-row gap-row-3"> <label for="password" class="text-blue">Password</label> <input type="password" name="password" class="inputf-silver"> </div> </div> <div class="col-12-xs col-12-sm col-10-md col-10-lg row gap-row-20 justify-center"> <button type="submit" class="btn-rect-blue text-white wdth100">SUBMIT</button> </div> </form>
<div class="col-12-xs col-12-sm col-10-md col-9-lg hvw text-center"> <p class="text-gray"> Forgot your password ? <a href="#" class="text-blue text-hover-gray">Password Reset</a> </p> </div>
</div>
<div class="col-12-xs col-12-sm col-3-md col-3-lg layoutG-row gap-row-20 justify-item-center borderl-ablue p-1"> <div class="wdth100 text-center text-gray"> <p>Login with your socials</p> </div> <div class="wdth100 text-center layoutG-row gap-row-20 justify-item-center"> <a href="#" class="btn wdth80 text-gray"> <i class="eppard-facebook2 pr-1 text-blue"></i>Facebook </a> <a href="#" class="btn wdth80 text-gray"> <i class="eppard-instagram pr-1 text-ired"></i>Instagram </a> <a href="#" class="btn wdth80 text-gray"> <i class="eppard-google pr-1 text-red"></i>Google </a> <a href="#" class="btn wdth80 text-gray"> <i class="eppard-linkedin pr-1 text-blue"></i>Linkedin </a> </div> </div>

Forgot your password ? Password Reset

Facebook Instagram Google Linkedin