Welcome to angelCSS

A simple css library by DynoStorm.

Toggle Day/Night:

Using angelCSS you can create lovely webarcologies with easy to use classes.

Your Template

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="angel.css">
        <script type="text/javascript" src="angel.js"></script>
        <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <nav class="bgd_white">
            <h2 style="font-family:'dublino';"  class="still">aC </h2>
            <label for="toggle">&Lambda;
            </label><input type="checkbox" id="toggle"/>
            <div class="menu bgd_white">
                <a href="#">Home</a>
                <a href="#">Link</a>
            </div>
        </nav>
        <div class="container bgd_white">
            <!--Your angelCSS site-->
        </div>
    </body>
</html>
            

To use code snippets like this on your angelCSS site, simply place your code in <pre> tags. Then replace all the < symbols with " &lt; " .

Download angel.css

Manual

Use multiple of these in the class list to have your element take effect.

class="button bgd_red shake"

<nav> tag

<nav></nav>
(Use this for your navbar)

menu
(place <a> links inside a menu div)

.container

container
(classic container)

container_wide
(fills the entire width of thee viewport)

container_break
(use for quotes and testimonials)

hug_top
(use with container after a break to remove margins)

.bgd_[colour]

Automatically sets text colour as well as background colour for any asset.

bgd_red

bgd_orange

bgd_gold

bgd_yellow

bgd_green

bgd_teal

bgd_blue

bgd_purple

bgd_dark

bgd_light

bgd_black

bgd_gray

bgd_white

bgd_day

bgd_night

.button

Simply add 'button' to the classes to turn an <a> tag into a button.


button bgd_red
bgd_teal
button bgd_purple
button bgd_dark
button bgd_light

.alert

Coo coo~
You have some errors ~
Password invalid.
Username invalid.

class="alert bgd_red" to get this alert class. Then inside an img tag with an image sourced followed by a div with the class of 'msg' of which you can insert your message.

button animation

Simply add 'shake' or 'swing' to the class list to add the desired animations.


shake
swing
Download Now!

β€œIt is not a lack of love, but a lack of friendship that makes unhappy marriages.”

― Friedrich Nietzsche

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit faucibus orci, sed facilisis urna efficitur eu. Vivamus ut elit euismod tellus euismod ornare eget nec eros. Donec rhoncus augue eget ornare egestas. Pellentesque consectetur porta odio quis pellentesque. Nullam vestibulum placerat neque vel elementum. Fusce rhoncus aliquet venenatis. Morbi fringilla nunc ut erat mollis, et consequat ante elementum. Donec rutrum egestas risus at facilisis. Suspendisse mollis sem eros, sit amet ultrices sapien blandit vel. Sed vitae diam a lectus vulputate luctus vel ac quam. Aliquam auctor pretium eros vitae ornare. Nullam venenatis neque nisi, quis aliquam leo mattis vel.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis a turpis sed augue eleifend vestibulum. Ut vel lorem ut turpis mattis scelerisque vitae non dolor. Vestibulum ut tincidunt neque. Proin nulla nisi, luctus at convallis non, aliquet nec nibh. Nunc auctor tortor ut enim dignissim faucibus. Fusce augue ligula, rhoncus ut blandit vitae, lobortis vel felis. Ut fermentum, sapien at venenatis congue, tortor mauris consectetur leo, vehicula laoreet orci metus eu libero. Proin eu felis sit amet sem condimentum pulvinar eget vel sapien. Curabitur maximus lorem id elit mattis, non consectetur ipsum suscipit. Fusce eu vulputate lacus. Fusce vel tellus hendrerit, convallis justo id, aliquam dui. Proin finibus, augue quis venenatis commodo, justo nulla pellentesque sapien, sed commodo sem libero in sapien. Nulla facilisis luctus mauris, non vestibulum ligula aliquet eu.

Aliquam blandit, sem sit amet egestas facilisis, nunc elit tristique orci, sed hendrerit velit risus eu eros. Maecenas erat lectus, gravida eu nunc tincidunt, accumsan eleifend magna. Nulla ultrices semper arcu, vel tristique purus condimentum eget. Maecenas ullamcorper urna eu ex feugiat imperdiet. Aenean eu bibendum ligula, vitae fermentum augue. Pellentesque urna neque, lobortis non bibendum at, sodales id magna. Praesent ullamcorper dignissim lacus, vel fermentum magna iaculis a. Vivamus aliquet ac quam sed lobortis. Donec vulputate, sem sit amet luctus fringilla, ante lacus semper arcu, vel hendrerit ipsum nulla id lacus. Morbi finibus at mauris facilisis cursus. Morbi eleifend justo libero, sit amet pellentesque eros molestie nec. Fusce interdum suscipit eros et molestie. Nunc rutrum mi eros, in tristique leo pellentesque in. Nullam interdum tellus tristique, elementum est a, lacinia mauris. Duis orci dui, tincidunt at diam quis, sollicitudin gravida tellus.

Morbi eu viverra ante. Cras maximus eros eu magna cursus, sit amet facilisis urna feugiat. Sed condimentum urna ut risus hendrerit, vitae faucibus risus dapibus. Mauris fringilla erat eu eleifend mattis. Maecenas lacinia in est eget auctor. Vestibulum ac ante leo. Vivamus iaculis felis sit amet turpis aliquam consectetur. Nullam pretium feugiat nunc, at mattis massa porttitor lacinia.

Aliquam interdum finibus ornare. Aenean leo felis, sodales ac lacus at, molestie bibendum orci. Quisque tempus turpis sapien, eu condimentum tellus tincidunt eu. Integer sagittis condimentum interdum. Proin nulla dui, porta eleifend ante sodales, tristique rutrum arcu. Nulla convallis, quam posuere posuere pharetra, arcu magna sollicitudin erat, quis laoreet ex erat vel quam. Ut non tellus quis diam egestas eleifend. Integer ut velit nec arcu ornare eleifend ac ut neque. Duis in purus sed magna mattis tempus. Donec eget faucibus ante. Mauris tincidunt dignissim turpis maximus vulputate.