Introduction

AttriCSS is a classless css style sheet that style normal ugly html to beautiful representable website.

Why?

For faster prototyping of backend logic on front end without any use of classes and just using html.

1. For blogging website just add attricss to site and it will turn a ugly site into a beauty.
2. For backend developer who do not want to dig into css classes.
3. For faster prototyping.
4. No use of classes. still responsive and still have almost all the features you need.
5. Create your own theme by just changing some variables.

Available Themes

1. No Theme
2. Bright Light green
3. Midnight Green
4. Dark Forest Green
5. Dark Fairy Pink
6. Light Fairy Pink

Nav bar

Above navbar is responsive by wrapping ul in a div with overflow attribute.

NOTE We use font-awasome for icons.

<nav>
    <header>
        <a href="#">Hello World</a> 
        <label for="nav"><i class="fas fa-bars"></i></label>
    </header>
    <input type="checkbox" id="nav" hidden checked>
    <div overflow>
        <ul>
            <!--active link in navbar with active attribute-->
            <li active><a href="#">Home</a></li>
            <li><a href="#">Discover</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>
        

This is a H1 heading

This is just a now normal paragraph.

and below are the available lists

Unordered list (bold)

• This is an italic list item
• This is a small text list item
• Monospaced

Ordered list (bold)

1. striked out text
2. Underlined text here
3. highlighted text here

This is a H2 heading and below is a Quote

“If you knew what I know about the power of giving you would not let a single meal pass without sharing it in some way.”

<blockquote>
    <p>
        ...
    </p>
    <footer>Quote by <cite>Lord Buddha</cite></footer>
</blockquote>
        

This is a H3 heading and below is a code block

NOTE You can use prism.js for code highlighting.

        
# Python program to mail merger
# Names are in the file names.txt
# Body of the mail is in body.txt

# open names.txt for reading
with open("names.txt",'r',encoding = 'utf-8') as names_file:

# open body.txt for reading
with open("body.txt",'r',encoding = 'utf-8') as body_file:

    # read entire content of the body
    body = body_file.read()

    # iterate over names
    for name in names_file:
        mail = "Hello "+name+body

        # write the mails to individual files
        with open(name.strip()+".txt",'w',encoding = 'utf-8') as mail_file:
            mail_file.write(mail)
        
        

Horizontal line below

Headers

h1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

Tables

NOTE Tables become responsive if you wrap the table with a div and add overflow attribute to it.

Example

<div overflow>
    <table>
        ...
    </table>
</div>
        

Images

Forms

Normal inputs based elements like input, select, etc are style based on below structure.

<form>
    ...
    <div> 
        <label for="input">Input lable</label> 
        <input type="text" id="input"> 
    </div>
    ...
</form>
        

TextArea

Textarea looks like this and it is also responsive.

Buttons

NOTE Buttons are also modified based on attributes, for secondary use secondary & disabled for disabled button respectively.

<button>Primary</button>
<button secondary>secondary</button>
<button disabled>Disabled</button>
        

Global Attributes/class

1. overflow : wrapping an block with a div with attribute overflow make it responsive.
2. container : apply on section only to make a container wrapper.
3. secondary : apply on button to make secondary button.
4. active : add to li navbar to make it active