.an-title component
choose one
FAQ why anole?
github project
Report bugs, contribute, or just get the code.
visit my website
anole framework demo (WIP)
What is Anole?
Anole is pure CSS framework for creating stylish, responsive web pages, and stunning, modern web-applications, without itself getting in the way. It's also light, fast, and easy to extend. By default, Anole uses the Lato font family, but you can override this with your own css. Anole is themed out the box, so you can drop it in your html and go.

Since it only uses CSS, Anole does have some limitations afforded to similar projects, such as Bootstrap or Foundation, but it seeks to shine on its on by leveraging the power of CSS for all that it's worth. And don't forget, if there's anything that Anole can't do, you can always mix it up with a little javascript of your own, or use it alongside Bootstrap or any other toolkit that provides the feature(s) you need.

If you're looking for fine-grained control over every detail, and a "building blocks" method of design, try my other pure CSS framework: passionfruit .
About this demo:
This page gives a demonstration of the
Some elements will come with tips, like this one.
See .an-tips for more.
and powers of Anole. It contains almost all of the components and animations of the framework. Anything that isn't included here will be covered in the documentation.

To navigate this demo page, use the
Menus and buttons behave differently depending on where they are located.
See .an-button for more.
at the top of the page.
Some elements, such as this one, and the mobile menu, are hidden until you're on a mobile device or until your screen is below a certain width. You can use Anole's an-hdn-mobile and an-shn-mobile for such responsive capabilities on any element.

If you're developing a site with an extensive menu, it is recommended that you place your menu on a separate page. Since Anole uses no Javascript, it is not easy to implement a menu that can be scrolled. Also, you cannot have any elements that overflow the width or height of the screen if hovered or active. Consider How you will layout your site before implementing your design.
Got more questions?
  • See the FAQ.
  • Visit Anole's github page.
  • Contact the developer.
  • .an-button