{"id":15259720,"url":"https://github.com/vitto/a-pollo","last_synced_at":"2025-10-06T03:31:17.992Z","repository":{"id":57171576,"uuid":"44392351","full_name":"vitto/a-pollo","owner":"vitto","description":":art: The visual CSS style guide for teams","archived":true,"fork":false,"pushed_at":"2017-09-08T13:44:04.000Z","size":16284,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-14T19:23:36.001Z","etag":null,"topics":["less","sass","style-guide"],"latest_commit_sha":null,"homepage":"http://vitto.github.io/a-pollo/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vitto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-16T15:01:02.000Z","updated_at":"2023-01-28T17:25:42.000Z","dependencies_parsed_at":"2022-08-24T14:42:26.643Z","dependency_job_id":null,"html_url":"https://github.com/vitto/a-pollo","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitto%2Fa-pollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitto%2Fa-pollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitto%2Fa-pollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitto%2Fa-pollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vitto","download_url":"https://codeload.github.com/vitto/a-pollo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235486757,"owners_count":18998080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["less","sass","style-guide"],"created_at":"2024-09-30T03:09:15.798Z","updated_at":"2025-10-06T03:31:11.509Z","avatar_url":"https://github.com/vitto.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![][a-pollo-logo]\n\n# a-pollo\n\n[![Version](http://img.shields.io/:version-1.18.99-B79769.svg)][release] [![TravisCI](https://travis-ci.org/vitto/a-pollo.svg?branch=master)](https://travis-ci.org/vitto/a-pollo/builds) [![Built with nodejs 4.2.2](http://img.shields.io/:nodejs-4.2.2-80BD01.svg)](https://nodejs.org/en/) [![NPM](http://img.shields.io/:NPM-package-C12127.svg)](https://www.npmjs.com/package/a-pollo) [![Built with hexo 3.2.0](http://img.shields.io/:hexo-3.2.0-0E83CD.svg)](https://hexo.io/) [![MIT licence](http://img.shields.io/:license-MIT-00AFFF.svg)](https://github.com/ideatosrl/frontsize-sass/blob/master/LICENSE.md)\n\nA-pollo generates **CSS style guide documentation** from your [code comments][apollo_code_docs].\n\nIt's been written for teams who need to check CSS widgets with examples, copy html related code with no pain to go through browser HTML debugger.\n\n--------------------------------------------------------------------------------\n\n## Release notes\n\n- Documentation annotations support\n- Remove use_markdown var from config\n- Add data-style snippet attribute to ease snippet specific examples\n- Change named widgets to snippets\n- Update snippet style\n- Add new font icons\n\n![a-pollo preview][a-pollo-preview]\n\n--------------------------------------------------------------------------------\n\n## Roadmap\n\n- Default style guide articles for CSS\n- Default style guide articles for HTML\n- Single widget tests with CSSlint\n- Single widget StyleStats report\n- Documentation tags for SASS\n- Documentation tags for LESS\n\n--------------------------------------------------------------------------------\n\nThe module works with [Hexo], an easy to use and powerful blog framework, so if you'd like to [write your own theme][apollo_theme] you'll have the power this nice tool in your fingers.\n\n--------------------------------------------------------------------------------\n\n## To install a-pollo in your project\n\n```\nnpm install --save a-pollo\n```\n\n--------------------------------------------------------------------------------\n\n## To create a config file\n\nFrom `package.json` where you have installed `node_modules` folder\n\n```\n./node_modules/.bin/a-pollo init\n```\n\nIt will start a process will help you to build the first one.\n\n--------------------------------------------------------------------------------\n\n## To run a-pollo\n\nFrom `package.json` where you have installed `node_modules` folder\n\n```\n./node_modules/.bin/a-pollo\n```\n\n--------------------------------------------------------------------------------\n\n## Doc style guide example\n\nThis will be placed on `style.docs` files defined in the YAML configuration.\n\n```\n/*@pollo\n    @name:  Icon\n    @icon:  fa-star\n    @auth:  [Vittorio Vittori](http://vit.to)\n    @category:  Icons\n    @date:  2016-01-11\n    @text:  This is an icons set composet by an SVG sprite, the single icon is `48px` size.\n    @html:  \u003ci class=\"icon icon--head\"\u003e\u003c/i\u003e\n*/\n```\n\n--------------------------------------------------------------------------------\n\nPlace a `a-pollo.yml` in the root folder of your project, this is the default config:\n\n```yaml\ntitle: 'Client project'                                           # [required] Will be listened on head's title tag\nclient: '[Client name](http://github.com/vitto/a-pollo#readme)'\ndevelopers: '[Vittorio Vittori](http://vit.to), [Pietro Campagnano](https://twitter.com/fain182)'     # [required] Who's managing the style guide\ndesigners: '[Vittorio Vittori](http://vit.to)'      # [required] Who's desining the style guide\ndate: 2015-11-01                 # [required] When the style guide project was started\ndate_format: dddd D MMMM YYYY    # [optional] Default from hexo config YYYY-MM-DD\n\npublic_dir: ./public        # [required] Where the style guide will be genarated\nurl: http://localhost:7777  # [optional] HTTP server URL\npages: example_source/a-pollo/*       # [optional] Additional static documentation pages you want to add, (markdown or html)\nhttp_server: true           # [optional] HTTP server with port number\nuse_markdown: true          # [optional] This will be removed soon, it's used for development\ntheme: a-pollo              # [optional] The a-pollo theme folder\n\nlibs:\n    bower: bower.json   # [optional] Link the bower.json file to display Bower used libraries in the index page\n    node: package.json  # [optional] Link the package.json file to display NodeJS used libraries in the index page\n\nstyle:\n    docs: example_source/frontsize/themes/default/widgets/        # [required] Where a-pollo comments and tags are placed\n    css: example_source/frontsize/test/frontsize-theme.min.css    # [required] This is the CSS will be loaded by a-pollo to show rendered widgets\n    images: example_source/frontsize/themes/default/img/*         # [optional] Where the CSS images are stored\n    fonts: example_source/frontsize/themes/default/fonts/*        # [optional] Where the CSS fonts are stored\n\nheader:\n    logo: a-pollo-logo--gold.svg # [optional] The logo image you'll se on every page, it must be stored in style.images\n    link: / # [optional] The link on the logo image\n    description: A-POLLO / The visual CSS style guide for teams    # [optional] A description under the logo image\n\nfooter:\n    logo: a-pollo-logo.svg # [optional] The logo image you'll se on every page, it must be stored in style.images\n    link: http://vitto.github.io/a-pollo/  # [optional] The link on the logo image\n    description: A-POLLO / The visual CSS style guide for teams # [optional] A description under the logo image\n```\n\n--------------------------------------------------------------------------------\n\n### Configuration\n\nProperty             | Hexo's shared config | Description\n-------------------- | -------------------- | -----------------------------------------------------------------------------------------\n`title`              | **yes**              | Will be shown on HTML page title\n`author`             | **yes**              | Will be shown around the pages\n`date`               | **yes**              | Not yet used\n`public_dir`         | **yes**              | The target path the site will be generated\n`url`                | **yes**              | HTTP server URL\n`theme`              | **yes**              | Theme folder name, you can [write your own theme][apollo_theme]\n`pages`              | _no_                 | The customized markdown pages will be published from Hexo\n`http_server`        | _no_                 | If the generated guide will be served by the HTTP server\n`use_markdown`       | _no_                 | Which method will be used to render the HTML template pages\n`style.docs`         | _no_                 | The path where the documentation files are\n`style.css`          | _no_                 | The path where the CSS for the documentation is, this is not the CSS of the a-pollo theme\n`style.images`       | _no_                 | Image assets for the CSS you are using\n`style.fonts`        | _no_                 | Fonts assets for the CSS you are using\n`header.logo`        | _no_                 | An image inside `style.images` to be used as image header inside a-pollo theme\n`header.description` | _no_                 | The header description inside a-pollo theme\n`header.link`        | _no_                 | The header logo href link\n`footer.logo`        | _no_                 | An image inside `style.images` to be used as image footer inside a-pollo theme\n`footer.description` | _no_                 | The footer description inside a-pollo theme\n`footer.link`        | _no_                 | The footer logo href link\n`libs.bower`         | _no_                 | Location of the `bower.json` file to display Bower used libraries in the index page\n`libs.node`          | _no_                 | Location of the `package.json` file to display NodeJS used libraries in the index page\n\n--------------------------------------------------------------------------------\n\n#### Development utils\n\nPrepare environment\n\n```\nnpm install \u0026\u0026 ./node_modules/.bin/bower install \u0026\u0026 cd test \u0026\u0026 npm install \u0026\u0026 ./node_modules/.bin/bower install\n```\n\n--------------------------------------------------------------------------------\n\nTo build theme\n\n```\n./node_modules/.bin/gulp -s\n```\n\n--------------------------------------------------------------------------------\n\nGenerate test CSS\n\n```\n./node_modules/.bin/gulp -s \u0026\u0026 cd ./test \u0026\u0026 ./node_modules/.bin/gulp frontsize:css \u0026\u0026 ../ \u0026\u0026 node index.js --config a-pollo.test.yml\n```\n\nGenerate website example CSS\n\n```\n./node_modules/.bin/gulp -s \u0026\u0026 cd ./test \u0026\u0026 ./node_modules/.bin/gulp frontsize:css \u0026\u0026 ../ \u0026\u0026 node index.js --config a-pollo.example.yml\n```\n\n--------------------------------------------------------------------------------\n\nTo test the HTML results\n\n```\n./node_modules/.bin/gulp -s \u0026\u0026 node index.js\n./node_modules/.bin/gulp -s \u0026\u0026 node index.js --config a-pollo.test.yml\n./node_modules/.bin/gulp -s \u0026\u0026 node index.js --config a-pollo.example.yml\n```\n\n--------------------------------------------------------------------------------\n\nGenerate website\n\n```\n./node_modules/.bin/gulp -s \u0026\u0026 cd ./hexo \u0026\u0026 ../node_modules/.bin/hexo --config _site_config.yml generate \u0026\u0026 cd ../ \u0026\u0026 php -S localhost:8000 -t ./_site\n```\n\nCoded with love by [Vittorio Vittori][vitto] and [Pietro Campagnano][pietro] @ [ideato srl][ideato]\n\n[a-pollo-logo]: https://github.com/vitto/a-pollo/raw/master/frontend/frontsize/a-pollo/img/a-pollo-logo.png\n[a-pollo-preview]: https://github.com/vitto/a-pollo/raw/master/frontend/frontsize/a-pollo/img/apollo-example.png\n[apollo_code_docs]: https://github.com/vitto/a-pollo/blob/master/example_source/frontsize/themes/default/widgets/button-social.scss\n[apollo_theme]: https://github.com/vitto/a-pollo/tree/master/hexo/themes/a-pollo\n[hexo]: https://hexo.io\n[ideato]: http://www.ideato.it\n[pietro]: https://twitter.com/fain182\n[release]: https://github.com/vitto/a-pollo/releases/tag/1.18.99\n[vitto]: https://twitter.com/vttrx\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitto%2Fa-pollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitto%2Fa-pollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitto%2Fa-pollo/lists"}