{"id":15140787,"url":"https://github.com/webcyou/apbcss","last_synced_at":"2025-07-06T15:03:41.464Z","repository":{"id":68798781,"uuid":"48863767","full_name":"webcyou/apbcss","owner":"webcyou","description":"APB CSS - Atomic Parts Base CSS -","archived":false,"fork":false,"pushed_at":"2020-12-23T01:21:42.000Z","size":4328,"stargazers_count":41,"open_issues_count":0,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-06T18:52:13.342Z","etag":null,"topics":["apb-css","atomic-parts","button-icon","css","icons","molecule","oocss","oocss-smacss","skin","smacss"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcyou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-31T22:23:54.000Z","updated_at":"2024-04-19T18:40:32.000Z","dependencies_parsed_at":"2023-02-21T22:46:21.797Z","dependency_job_id":null,"html_url":"https://github.com/webcyou/apbcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webcyou/apbcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Fapbcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Fapbcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Fapbcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Fapbcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcyou","download_url":"https://codeload.github.com/webcyou/apbcss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcyou%2Fapbcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263922472,"owners_count":23530334,"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":["apb-css","atomic-parts","button-icon","css","icons","molecule","oocss","oocss-smacss","skin","smacss"],"created_at":"2024-09-26T08:41:20.628Z","updated_at":"2025-07-06T15:03:41.459Z","avatar_url":"https://github.com/webcyou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# APB CSS - Atomic Parts Base CSS -\n\n![screen_shot_ogp.png](http://apbcss.com/img/common/screen_shot_ogp.png)\n\nAPB CSS - Atomic Parts Base CSS -\n\n[http://apbcss.com/](http://apbcss.com/)\n\n*****\n\n## What is Atomic Parts Base CSS(APB CSS)\n\nAtomic Design + OOCSS + SMACSS =\n\n**Atomic Parts Base CSS (APB CSS)**\n\n![Atomic Parts Base CSS](http://apbcss.com/img/github/pic001.png)\n\n\n### Point\n\n- Simple\n- Predictable\n- General versatility\n- Reusable\n- Maintainable\n- Scalable\n- Interactive\n\n*****\n\n## Atoms Style Sheet\n\n**Atomic Design**\n\n![Atomic Design](http://apbcss.com/img/github/atomic-design.png)\n\n[AtomicDesign](http://bradfrost.com/blog/post/atomic-web-design/)\n\n### Atoms\n\n**Button**\n\n![Atoms](http://apbcss.com/img/github/atomic-design_atom.png)\n\n![button](http://apbcss.com/img/github/btn.png)\n\nHTML\n````\n\u003cp class=\"btn primary\"\u003e\u003ca href=\"#\"\u003eButton\u003c/a\u003e\u003c/p\u003e\n````\n\nCSS\n\n````\n.btn {\n  position: relative;\n  width: 200px;\n  height: 40px;\n  border-radius: 6px;\n  a {\n    display: block;\n    line-height: 40px;\n    text-align: center;\n    text-decoration: none;\n    color: #fff;\n    font-size: 18px;\n  }\n  \u0026.primary {\n    background: #404040;\n    @include background(linear-gradient(top, #404040, #282828));\n    \u0026:hover { background: #303030; }\n  }\n}\n````\n**Icon**\n\n![Atoms](http://apbcss.com/img/github/atomic-design_atom.png) \n\n![Icon](http://apbcss.com/img/github/github.png) \n\n\nHTML\n````\n\u003cp class=\"icon social github\"\u003e\u003c/p\u003e\n````\n\nCSS\n````\n.icon {\n  display: inline-block;\n  \u0026.social {\n    width: 34px;\n    height: 34px;\n    background: url(SpriteImagePath) no-repeat;\n    @include background-size(205px auto);\n    \u0026.github { background-position: -171px top; }\n  }\n}\n````\n\n![Properties of the layout style is not included.](http://apbcss.com/img/github/no_layout.png)\n\n*****\n\n## Molecules Style Sheet\n### Molecules\n\n![Molecules](http://apbcss.com/img/github/atomic-design_molecules.png)\n\n**Button + Icon**\n\n![Button + Icon](http://apbcss.com/img/github/btn_icon.png)\n\nHTML\n\n````\n\u003cp class=\"btn primary\"\u003e\u003ca href=\"#\"\u003e\u003cspan class=\"icon social github\"\u003e\u003c/span\u003eButton\u003c/a\u003e\u003c/p\u003e\n````\n\nCSS\n\n````\n.btn {\n    .icon {\n        \u0026.social {\n            margin: 0px 6px -11px -34px;\n        }\n    }\n}\n````\n\n![Molecules](http://apbcss.com/img/github/atomic-design_molecules.png)\n\n**Text + Icon**\n\n![Text + Icon](http://apbcss.com/img/github/icon_text.png)\n\nHTML\n````\n\u003cp class=\"text\"\u003e\u003cspan class=\"icon ban\"\u003e\u003c/span\u003etext\u003c/p\u003e\n````\n\nCSS\n````\n.text {\n  .icon.ban {\n    margin: 0 4px -10px 0;\n  }\n}\n````\n\n![Layout property is generated when you became a molecule.](http://apbcss.com/img/github/ok_layout.png)\n\n*****\n\n## Multi Class (object-oriented)\n### OOCSS + SMACSS\n\n![OOCSS + SMACSS](http://apbcss.com/img/github/pic002.png)\n\n**Excerpts from the 「OOCSS」,「SMACSS 」**\n\n### CSS Class Type\n\n![CSS Class Type](http://apbcss.com/img/github/css_class_type.png)\n\n- Atomic：Class name of atom\n- Module：UI package name\n- Skin：Class name of decoration\n- Number：Numbering of the class name\n- State：Class name that represents the state\n- Other：Other class name\n\n**Based on the atom name or module name,\nand grant the six types of class name.**\n\n\n### CSS Class Type ~ Atomic ~\n\n![Atomic](http://apbcss.com/img/github/css_class_type_001.png)\nexample Class Name\n- text\n- icon\n- btn\n- thumbnail\n- label\n- input\n- code\n- separate\n\n### CSS Class Type ~ Module ~\n\n![Module](http://apbcss.com/img/github/css_class_type_002.png)\nexample Class Name\n- header\n- footer\n- contents\n- mainLogo\n- title\n- column\n- thumbnailList\n- textList\n- detailBox\n- modalWindow\n\n### CSS Class Type ~ Skin ~\n\n![Skin](http://apbcss.com/img/github/css_class_type_003.png)\nexample Class Name\nSkin\n- red\n- blue\n- wide\n- high\n- low\n- stripe\n- subdued\n- small\n- middle\n- \n### CSS Class Type ~ Number ~\n\n![Number](http://apbcss.com/img/github/css_class_type_004.png)\nexample Class Name\nNumber\n- one\n- two\n- no[nth]\n- type[nth]\n- first\n- last\n- odd\n- even\n\n### CSS Class Type ~ State ~\n\n![State](http://apbcss.com/img/github/css_class_type_005.png)\nexample Class Name\nState\n- active\n- disable\n- tapped\n- success\n- error\n- highlight\n- checked\n- note\n- center\n- right\n\n\n### CSS Class Type ~ Other ~\n\n![Other](http://apbcss.com/img/github/css_class_type_006.png)\nexample Class Name\nOther\n- Semantic name\n- wrap\n- Service name\n- Page name\n- Controller name\n- Namespace\n\netc..\n\n*****\n\n## Directory structure\n### SCSS Directory\n\nSCSS\n````\nscss\n  |- base\n  |- pages\n  |- parts\n  _common_inc.scss\n  _parts.scss\n  style.scss\n````\n\n- _common_inc.scss: import base and pages\n- _parts.scss: import parts files\n\n### base Directory\n\nbase\n````\nscss\n  |- base\n    |- _base.scss\n    |- _mixin.scss\n    |- _reset.scss\n    |- _setting.scss\n````\n- _base.scss: Define -based style of application\n- _mixin.scss: Define mixin style\n- _reset.scss: Initialize the style\n- _setting.scss: Define such as variables and prefix\n\n### parts Directory\n\nparts\n````\nscss\n  |- parts\n    |- _button.scss\n    |- _icon.scss\n    |- _list.scss\n    |- _paragraph.scss\n    ....\n````\nFile group that defines the atom and modules.\n\n### pages Directory\n\npages\n````\nscss\n  |- pages\n    |- _top.scss\n    |- _info.scss\n    |- _profile.scss\n    |- _main_contents.scss\n    ....\n````\n\nDefines page-specific layout style.\n\n### name space\nHTML\n````\n\u003csection id=\"top\" class=\"top\"\u003e\n````\nID is the controller name(pages Directory name)\nThe class name is the action name, provide a name space.\n\n*****\n\n## Sample\nIt is this page.\n\n### OfficalPage\n[http://apbcss.com/](http://apbcss.com/)\n\n### Document\n[slideshare](http://www.slideshare.net/daisuketakayama75/apbcss-atomic-parts-base-css)\n\n### Blog\n[web帳](http://www.webcyou.com)\n\n*****\n\n## Other\n### Author\n\n**Name** :\nDaisuke Takayama\n\n**Country** :\nJapan\n\n**Job** :\nFrontEnd Engineer\n\n**twitter**\n\n[@webcyou](https://twitter.com/webcyou)\n[@panicdragon](https://twitter.com/panicdragon)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcyou%2Fapbcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcyou%2Fapbcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcyou%2Fapbcss/lists"}