a-pollo
Index
  

a-pollo

A sharing tool for your team's CSS styles

CSS style guide

A-pollo generates a default documentation of the CSS best practices taken from the best front-end developers with their relative sources and shows your CSS theme default base styles, everything is ready to be used as is or to be customized.

Organized snippets

With a-pollo doc tags, you can manage your front-end styles and split them into groups of widgets to easily find the style you need to create new HTML templates with a wide view of what you already have in your CSS.

Copy and paste the code you need

If you need a static documentation generated from your code with all the CSS widgets you have in your theme with HTML code blocks ready to be copied, a-pollo is probably the tool for you.

Nice for teams

It's perfect to leave your CSS hard work to the rest of your team and let them view what's inside and reduce one page styles, through to be reused but forgotten in the code.

CSS stats

Checkout front-end development duration, how much material is inside your theme, the people who worked on the project, and other useful stats you can use to check your team performance.

Customizable theme

There is Hexo behind a-pollo, a fast, simple & powerful blog framework, perfect to create static websites and their relative themes.

A showcase for your CSS styles

You know how much can be hard maintaining a solid design in your CSS and HTML templates, especially if you work with huge, continuously changing and scalable websites.

How it works?

You write code doc blocks in your CSS widgets:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/@pollo
    @name:  Twitter
    @auth:  Vittorio Vittori
    @category: Buttons
    @date:  2015-12-02
    @text:  This twitter version has also button-social<span class="comment">--with-effects modifier to show drop shadow effects
    @html:  <a href=“#” class=“button-social button-social–twitter button-social–with-effects”>
                <div class=“button-socialicon”>
                    <i class=“fa fa-twitter”></i>
                </div>
                <div class=“button-socialnetwork”>
                    twitter
                </div>
            </a>
/

You generate your style guide with this node command

1
./node_modules/.bin/a-pollo

That’s it.

An example

This is what you can expect from the default theme of a-pollo.

Why use it?