Overview

Contents below is only using style from lightCSS. So you get the idea of what lightCSS is capable of. I tried to keep things simple, in term of look and usage.

Most of the time you don't need to call any classes.

---

Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque soluta earum libero harum ullam omnis inventore sunt assumenda expedita Modfaka tempora! Voluptate voluptatem repellendus exercitationem voluptas quae ab facilis, magni culpa?

Blockquote

If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success. - James Cameron

---

Buttons

Normal buttons, without any classes.

Normal button Disabled

Primary buttons with .primary-button class.

Primary no link Disabled primary button

To turn an a element to a buton, use .button or .primary-button class.

Normal button Primary button

---

Pre and Code

            This is a pre text
        

Lorem, ipsum dolor sudo rm -rf / sit amet consectetur adipisicing elit.

---

Summary and Details

Lorem eh?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aspernatur delectus reprehenderit consequatur distinctio accusamus repellendus ea? Id, enim! Odio neque aliquid quia esse velit optio totam voluptate nobis hic.

Another Lorem eh?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aspernatur delectus reprehenderit consequatur distinctio accusamus repellendus ea? Id, enim! Odio neque aliquid quia esse velit optio totam voluptate nobis hic.

---

Lists

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde molestias, nisi inventore vero aliquid aperiam necessitatibus ipsa ad quidem eaque consequatur ipsam doloribus magnam sed pariatur explicabo voluptatibus voluptates alias.

• item 1
• item 2

1. what?
2. why?
3. how?

---

Image and Video

By default, image and video will take the whole parent's width.

---

Embed and iFrame

By default, embed and iframe should not grow bigger than parent's width

---

Table

Table will take full parent's width by default.

ID	Name	Profession
1	Johnny Depp	Actor
2	Keanu Reeves	Actor
3	Serj Tankian	Singer

---

Forms

We're going with simple style and just works everywhere. If you want to adjust the size or grid, you can build your own.

Enter Password

If you want to make full screen, use .full class, it also works with buttons.

Long text here Optin 1 Option 2

Some more useful classes

• .full to turn anything full 100% width.
• .primary-color to turn element to primary color, work best with texts.
• .container use with a Div, to create big white space on each side, just like this document.
• .border to add border to an element. It has rounded corners by default
• .text-left .text-right .text-center to align text.
• .background to add light background color to an element, works best on div.