components.json

{"components":[{"category":"template","name":"blog","html":"<!--@doc\n# @category template\n# @name blog\n# @desc stylish blog theme\n-->\n\n<!--@template -->\n<%\nvar title = \"Horic Design\";\nvar lead = \"a-blog cmsやJavaScriptなどの情報を発信しています。\"\nvar cards = [\n  {title:'title'},\n  {title: 'title2'},\n  {title:'title3'},\n  {title: 'title4'},\n  {title:'title5'},\n  {title: 'title6'}\n]; \n%>\n<%- include ('../header/header.ejs', {title: title}) %>\n<%- include ('../hero/hero.ejs', {title: title, lead: lead}) %>\n<main class=\"uc-content content\">\n  <div class=\"uc-section\">\n    <div class=\"uc-grid _col-2 _small-col-full _gutter\">\n      <% cards.forEach(function(item) { %>\n      <div class=\"uc-grid-cell\">\n        <%- include ('../card/card.ejs', {title: item.title}) %>\n      </div> \n      <% }); %>\n    </div>\n  </div>\n</main>\n<%- include ('../footer/footer.ejs', {title: title}) %>\n<!--@/template -->\n\n<!--@preview\n<blog />\n-->\n\n<!--@note\nYou can write markdown here\n\n# h1\n\n## h2\n\n### h3 \n\n#### h4\n\n- list1\n- list2\n- list3\n\n```js\nconsole.log('you can write markdown here');\n```\n\n-->","itemId":1,"path":"/components/blog/blog.ejs"},{"category":"molecule","name":"uc-card","html":"<!--@doc\n# @category molecule\n# @name uc-card\n# @desc a simple card component\n-->\n\n<!--@template title=\"Simple card\" text=\"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!\"-->\n<div class=\"uc-card\">\n  <div class=\"uc-card-title\"><%= title %></div>\n  <p><%= text %></p>\n  <%- include('../button/button.ejs', {text:'Button', modifier:'_primary'}) %>\n</div>\n<!--@/template -->\n\n<!--@preview\n<uc-card />\n-->","itemId":2,"path":"/components/card/card.ejs"},{"category":"atom","name":"uc-btn","html":"<!--@doc\n# @category atom\n# @name uc-btn\n# @desc just a simple button with various colors\n-->\n\n<!--@template text=\"Button\" modifier=\"\" -->\n<div class='uc-btn <%= modifier %>'><a href=\"#\"><%= text %></a></div>\n<!--@/template -->\n\n\n<!--@preview\n<uc-btn text=\"Primary\" modifier=\"_primary\" />\n-->\n","itemId":3,"path":"/components/button/button.ejs"},{"category":"organism","name":"uc-footer","html":"<!--@doc\n# @category organism\n# @name uc-footer\n# @desc a common site footer\n-->\n\n<!--@template title=\"Blog\" -->\n<footer class=\"uc-footer _dark\">\n<div class=\"uc-footer-menu\">\n    <a href=\"#\">About</a>\n    <a href=\"#\">Contact</a>\n</div>\n<div class=\"uc-footer-logo\"><cite><%= title %></cite></div>\n<p>This page was made using <a href=\"http://unitscss.com\" target=\"_blank\">UNITS</a>.</p>\n<small>&copy; 2017 <%= title %></small>\n</footer>\n<!--@/template -->\n\n<!--@preview\n<uc-footer title=\"Horic Design\" />\n-->","itemId":4,"path":"/components/footer/footer.ejs"},{"category":"atom","name":"uc-grid","html":"<!--@doc\n# @category atom\n# @name uc-grid\n# @desc grid system and clearfix\n-->\n\n<!--@preview\n<div class=\"uc-grid _gutter _col-3\">\n    <div class=\"uc-grid-cell\">\n        <div style=\"background-color:#e8e8e8;height:20px;\">\n        </div>\n    </div>\n    <div class=\"uc-grid-cell\">\n        <div style=\"background-color:#e8e8e8;height:20px;\">\n        </div>\n    </div>\n    <div class=\"uc-grid-cell\">\n        <div style=\"background-color:#e8e8e8;height:20px;\">\n        </div>\n    </div>\n</div>\n-->","itemId":5,"path":"/components/grid/grid.ejs"},{"category":"organism","name":"uc-header","html":"<!--@doc\n# @category organism\n# @name uc-header\n# @desc a common site header\n-->\n\n<!--@template title=\"Blog\" -->\n<header class=\"uc-header _black\">\n<div class=\"uc-header-logo\"><a href=\"/\"><%= title %></a></div>\n<div class=\"uc-header-menu _small-hidden\" role=\"navigation\">\n    <a href=\"#\">About</a>\n    <a href=\"#\">Portfolio</a>\n    <a href=\"#\">GitHub</a>\n</div>\n<div class=\"uc-menu-btn _medium-hidden _large-hidden\"><button><i class=\"uc-menu-btn-icon\"></i></button></div>\n</header>\n<!--@/template -->\n\n<!--@preview\n<uc-header title=\"Horic Design\" />\n-->","itemId":6,"path":"/components/header/header.ejs"},{"category":"atom","name":"uc-hero","html":"<!--@doc\n# @category atom\n# @name uc-hero\n# @desc hero area with background image\n-->\n\n<!--@template title=\"Title\" lead=\"\" -->\n<div class=\"uc-hero\">\n    <div class=\"uc-hero-bg\" style=\"background-image:url(https://source.unsplash.com/random)\"></div>\n    <div class=\"uc-hero-title\"><%= title %></div>\n    <% if (lead) { %>\n    <p><%= lead %></p>\n    <% } %>\n</div>\n<!--@/template -->\n\n\n<!--@preview\n<uc-hero title=\"Hero Area\" />\n-->\n\n","itemId":7,"path":"/components/hero/hero.ejs"},{"category":"atom","name":"uc-list","html":"<!--@doc\n# @category atom\n# @name uc-list\n# @desc just a simple list\n-->\n\n<!--@preview\n<ul class=\"uc-list\">\n    <li>List1</li>\n    <li>List2</li>\n</ul>\n-->","itemId":8,"path":"/components/list/list.ejs"}]}