Information


What is AA.css?

The framework 'AA.css' is a fork of Bootstrap 3. It contains everything as per Bootstrap 3 plus a few extras & total redesign. It is now easier to change the primar colors & adapt the framework as per your project. No skills required.

Why Bootstrap 3 and not 4?

First of all, we are fanboys of Bootstrap in general, 99% of our projects are built using Bootstrap. We feel like Bootstrap 4 is not at a good stage right now and is no where near compared to the previous version, Bootstrap 3. We will stick only to version 3 for now.

Getting Started


New Project

1. Download aa.min.css and aa.min.js.
2. Create the index.html file and paste this code.
<!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, user-scalable=no">
    <title>My Project</title>

    <link href="aa.css" rel="stylesheet">

</head>
<body>


    <h1>My first AA.css project</h1>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="aa.min.js"></script>

</body>
</html>
                                  
Besides our CSS and JS we will be needing jQuery aswell.

Replacing Bootstrap 3

1. Open Bootstrap's CSS and JS files.
2. Make sure you are using Bootstrap 3 and not some other.
3. Replace the code accordingly. CSS with CSS and JS with JS.

Example: aa.min.css with bootstrap.min.css

Components


How to use

AA.css framework runs on top of Bootstrap 3. Every component that bootstrap 3 has, you can use it here aswell.

We are going to show a preview of what is changed in this version, though for full documentation on how to use the components, refer to the Official Bootstrap 3 Site.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

The last navbar is made especially for your project's brand main colors and is added with the class "navbar-primary", replacing "navbar-default" or "navbar-inverse".

A longer block of help text that breaks onto a new line and may extend beyond one line.

$

Radios are used differently. Here's an example code:

<label class="radioc">One
    <input type="checkbox">
    <span class="checkmark"></span>
</label>

<label class="radioc">Two
    <input type="checkbox">
    <span class="checkmark"></span>
</label>
                                
<label class="radioc">Three
    <input type="checkbox">
    <span class="checkmark"></span>
</label>

Checkboxes are used differently. Here's an example code:

<label class="check">One
        <input type="checkbox" checked="checked">
        <span class="checkmark"></span>
</label>

<label class="check">Two
        <input type="checkbox">
        <span class="checkmark"></span>
</label>

<label class="check">Three
        <input type="checkbox">
        <span class="checkmark"></span>
</label>

Switch buttons are added differently. Here's an example code:

<div class="checkbox">
    <input type="checkbox" id="switch"/>
    <label class="switchy" for="switch"/>
</div>

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Labels

Default Primary Success Warning Danger Info

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

List groups


Panels


Basic panel
Panel heading
Panel content
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells


Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!

Extras


Night Mode!

Make your project totally dark-mode based by just adding a class to your body tag, "night".


<body class="night">              
You'll now have AA.css totally dark-focused theme for your project, this one is installed by default.

Shadow Effect

Add shadow effect to any div.

class="shadow-one"   class="shadow-two"  class="shadow-three"    

         

Rounded Effect

Add round effect to any element.

class="rounded-one"   class="rounded-two"  class="rounded-three"    

         

Pulse Effect

Add a pulsing effect to any element.

class="pulse-one"   class="pulse-two"  class="pulse-three"    

         

Customize


AA.css's main priority is to create everything ready for the developers & designers. We have in plan to release multiple skins & extra extensions for free that are the best fit for your current project.

Although, there are things that you might want to change. Starting with main framework's color.

Currently the default skin framework's color are:

  • Primary Color: #CA4A4A (Used for buttons, panel, menu... etc)

  • Secondary Color: #A24040 (Used for hover, active, focus states ..)



You can also find what main colors the framework is using by opening aa.min.css or aa.css, the first lines of the code show the framework version and the main colors, this section:
* Primary Color: [color code] - Secondary Color: [color code]


Now with your text editor of your liking, replace all those two codes with your brand's colors, entirely in that file.

That's it.

Credits


Most of the credits go to the Bootstrap 3 framework and ofcourse the guys behind it.

The rest of the credits to the AALayer Team.


Code is licensed under MIT license.