Anole Logo
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 compared 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 menuMenus 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.

A new menu system has been designed and is awaiting implementation!
Got more questions?
  • See the FAQ.
  • Visit Anole's github page.
  • Contact the developer.