Documentation Page

Introduction

Get started with Aphro-CSS which is an easy to use CSS library, Aphro is used to write aesthetically beautiful production-ready code at a fast pace!

CSS

Copy paste the below mentioned stylesheet <link> to your code before all other stylesheets to load Aphro-CSS to your project.

 <link rel="stylesheet" href="https://aphro-css.netlify.app/css/aphro.css"/>

Javascript

Many components require the use of javascript to function. Place the following <script> just above the </body> tag.

 <script rel="stylesheet" href="#" integrity=" crossorigin="anonymous" />

Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>

<!-- Add this CSS link for before any other CSS file -->
<!-- CSS script link -->
<link rel="stylesheet" href="#" integrity=" crossorigin="anonymous" />
</head>
<body>



<!-- Add this Script file link  before the end of body tag for javascript functionality to work -->
<!-- script link for javascript functionality -->
<script rel="stylesheet" href="#" integrity=" crossorigin="anonymous" />

</body>

</html>

Box Sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine. On the rare occasion you need to override it, use something like the following:

.some-class {
    box-sizing: content-box;
}

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

<!DOCTYPE html>
<html lang="en">
    ....
</html>