This repository has been archived by the owner on Mar 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
templates.json
19 lines (19 loc) · 21.4 KB
/
templates.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"templates": [{
"id": "Welcome",
"template": true,
"gjs-html": "<div class=\"panel\"><h1 class=\"welcome\">Welcome to</h1><div class=\"big-title\"><svg class=\"logo\" viewBox=\"0 0 100 100\"><path d=\"M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2\" /></svg><span>GrapesJS</span></div><div class=\"description\">This is a demo content from index.html. For the development, you shouldn't edit this file, instead you cancopy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.</div></div>",
"gjs-css": ".panel {\n width: 90%;\n max-width: 700px;\n border-radius: 3px;\n padding: 30px 20px;\n margin: 150px auto 0px;\n background-color: #d983a6;\n box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);\n color: rgba(255, 255, 255, 0.75);\n font: caption;\n font-weight: 100;\n }\n\n .welcome {\n text-align: center;\n font-weight: 100;\n margin: 0px;\n }\n\n .logo {\n width: 70px;\n height: 70px;\n vertical-align: middle;\n }\n\n .logo path {\n pointer-events: none;\n fill: none;\n stroke-linecap: round;\n stroke-width: 7;\n stroke: #fff\n }\n\n .big-title {\n text-align: center;\n font-size: 3.5rem;\n margin: 15px 0;\n }\n\n .description {\n text-align: justify;\n font-size: 1rem;\n line-height: 1.5rem;\n }",
"gjs-components": "",
"gjs-style": ""
},
{
"id": "Demo",
"template": true,
"gjs-html": "<header class=\"header-banner\">\n <div class=\"container-width\">\n <div class=\"logo-container\">\n <div class=\"logo\">GrapesJS\n </div>\n </div>\n <nav class=\"menu\">\n <div class=\"menu-item\">BUILDER\n </div>\n <div class=\"menu-item\">TEMPLATE\n </div>\n <div class=\"menu-item\">WEB\n </div>\n </nav>\n <div class=\"clearfix\">\n </div>\n <div class=\"lead-title\" id=\"i38mi\">Build your templates without coding\n </div>\n <div class=\"sub-lead-title\">All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel\n </div>\n <div class=\"lead-btn\">Hover me\n </div>\n </div>\n</header>\n<section class=\"flex-sect\">\n <div class=\"container-width\">\n <div class=\"flex-title\">Flex is the new black\n </div>\n <div class=\"flex-desc\">With flexbox system you're able to build complex layouts easily and with free responsivity\n </div>\n <div class=\"cards\">\n <div class=\"card\">\n <div class=\"card-header\">\n </div>\n <div class=\"card-body\">\n <div class=\"card-title\">Title one\n </div>\n <div class=\"card-sub-title\">Subtitle one\n </div>\n <div class=\"card-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-header ch2\">\n </div>\n <div class=\"card-body\">\n <div class=\"card-title\">Title two\n </div>\n <div class=\"card-sub-title\">Subtitle two\n </div>\n <div class=\"card-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-header ch3\">\n </div>\n <div class=\"card-body\">\n <div class=\"card-title\">Title three\n </div>\n <div class=\"card-sub-title\">Subtitle three\n </div>\n <div class=\"card-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-header ch4\">\n </div>\n <div class=\"card-body\">\n <div class=\"card-title\">Title four\n </div>\n <div class=\"card-sub-title\">Subtitle four\n </div>\n <div class=\"card-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-header ch5\">\n </div>\n <div class=\"card-body\">\n <div class=\"card-title\">Title five\n </div>\n <div class=\"card-sub-title\">Subtitle five\n </div>\n <div class=\"card-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n </div>\n </div>\n </div>\n <div class=\"card\">\n <div class=\"card-header ch6\">\n </div>\n <div class=\"card-body\">\n <div class=\"card-title\">Title six\n </div>\n <div class=\"card-sub-title\">Subtitle six\n </div>\n <div class=\"card-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n<section class=\"am-sect\">\n <div class=\"container-width\">\n <div class=\"am-container\">\n <img onmousedown=\"return false\" src=\"./img/phone-app.png\" class=\"img-phone\"/>\n <div class=\"am-content\">\n <div class=\"am-pre\">ASSET MANAGER\n </div>\n <div class=\"am-title\">Manage your images with Asset Manager\n </div>\n <div class=\"am-desc\">You can create image blocks with the command from the left panel and edit them with double click\n </div>\n <div class=\"am-post\">Image uploading is not allowed in this demo\n </div>\n </div>\n </div>\n </div>\n</section>\n<section class=\"blk-sect\">\n <div class=\"container-width\">\n <div class=\"blk-title\">Blocks\n </div>\n <div class=\"blk-desc\">Each element in HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style\n </div>\n <div class=\"price-cards\">\n <div class=\"price-card-cont\">\n <div class=\"price-card\">\n <div class=\"pc-title\">Starter\n </div>\n <div class=\"pc-desc\">Some random list\n </div>\n <div class=\"pc-feature odd-feat\">+ Starter feature 1\n </div>\n <div class=\"pc-feature\">+ Starter feature 2\n </div>\n <div class=\"pc-feature odd-feat\">+ Starter feature 3\n </div>\n <div class=\"pc-feature\">+ Starter feature 4\n </div>\n <div class=\"pc-amount odd-feat\">$ 9,90/mo\n </div>\n </div>\n </div>\n <div class=\"price-card-cont\">\n <div class=\"price-card pc-regular\">\n <div class=\"pc-title\">Regular\n </div>\n <div class=\"pc-desc\">Some random list\n </div>\n <div class=\"pc-feature odd-feat\">+ Regular feature 1\n </div>\n <div class=\"pc-feature\">+ Regular feature 2\n </div>\n <div class=\"pc-feature odd-feat\">+ Regular feature 3\n </div>\n <div class=\"pc-feature\">+ Regular feature 4\n </div>\n <div class=\"pc-amount odd-feat\">$ 19,90/mo\n </div>\n </div>\n </div>\n <div class=\"price-card-cont\">\n <div class=\"price-card pc-enterprise\">\n <div class=\"pc-title\">Enterprise\n </div>\n <div class=\"pc-desc\">Some random list\n </div>\n <div class=\"pc-feature odd-feat\">+ Enterprise feature 1\n </div>\n <div class=\"pc-feature\">+ Enterprise feature 2\n </div>\n <div class=\"pc-feature odd-feat\">+ Enterprise feature 3\n </div>\n <div class=\"pc-feature\">+ Enterprise feature 4\n </div>\n <div class=\"pc-amount odd-feat\">$ 29,90/mo\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n<section class=\"bdg-sect\">\n <div class=\"container-width\">\n <h1 class=\"bdg-title\">The team\n </h1>\n <div class=\"badges\">\n <div class=\"badge\">\n <div class=\"badge-header\">\n </div>\n <img src=\"img/team1.jpg\" class=\"badge-avatar\"/>\n <div class=\"badge-body\">\n <div class=\"badge-name\">Adam Smith\n </div>\n <div class=\"badge-role\">CEO\n </div>\n <div class=\"badge-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit\n </div>\n </div>\n <div class=\"badge-foot\">\n <span class=\"badge-link\">f</span>\n <span class=\"badge-link\">t</span>\n <span class=\"badge-link\">ln</span>\n </div>\n </div>\n <div class=\"badge\">\n <div class=\"badge-header\">\n </div>\n <img src=\"img/team2.jpg\" class=\"badge-avatar\"/>\n <div class=\"badge-body\">\n <div class=\"badge-name\">John Black\n </div>\n <div class=\"badge-role\">Software Engineer\n </div>\n <div class=\"badge-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit\n </div>\n </div>\n <div class=\"badge-foot\">\n <span class=\"badge-link\">f</span>\n <span class=\"badge-link\">t</span>\n <span class=\"badge-link\">ln</span>\n </div>\n </div>\n <div class=\"badge\">\n <div class=\"badge-header\">\n </div>\n <img src=\"img/team3.jpg\" class=\"badge-avatar\"/>\n <div class=\"badge-body\">\n <div class=\"badge-name\">Jessica White\n </div>\n <div class=\"badge-role\">Web Designer\n </div>\n <div class=\"badge-desc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit\n </div>\n </div>\n <div class=\"badge-foot\">\n <span class=\"badge-link\">f</span>\n <span class=\"badge-link\">t</span>\n <span class=\"badge-link\">ln</span>\n </div>\n </div>\n </div>\n </div>\n</section>\n<footer class=\"footer-under\">\n <div class=\"container-width\">\n <div class=\"footer-container\">\n <div class=\"foot-lists\">\n <div class=\"foot-list\">\n <div class=\"foot-list-title\">About us\n </div>\n <div class=\"foot-list-item\">Contact\n </div>\n <div class=\"foot-list-item\">Events\n </div>\n <div class=\"foot-list-item\">Company\n </div>\n <div class=\"foot-list-item\">Jobs\n </div>\n <div class=\"foot-list-item\">Blog\n </div>\n </div>\n <div class=\"foot-list\">\n <div class=\"foot-list-title\">Services\n </div>\n <div class=\"foot-list-item\">Education\n </div>\n <div class=\"foot-list-item\">Partner\n </div>\n <div class=\"foot-list-item\">Community\n </div>\n <div class=\"foot-list-item\">Forum\n </div>\n <div class=\"foot-list-item\">Download\n </div>\n <div class=\"foot-list-item\">Upgrade\n </div>\n </div>\n <div class=\"clearfix\">\n </div>\n </div>\n <div class=\"form-sub\">\n <div class=\"foot-form-cont\">\n <div class=\"foot-form-title\">Subscribe\n </div>\n <div class=\"foot-form-desc\">Subscribe to our newsletter to receive exclusive offers and the latest news\n </div>\n <input name=\"name\" placeholder=\"Name\" class=\"sub-input\"/>\n <input name=\"email\" placeholder=\"Email\" class=\"sub-input\"/>\n <button type=\"button\" class=\"sub-btn\">Submit</button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"copyright\">\n <div class=\"container-width\">\n <div class=\"made-with\">\n made with GrapesJS\n </div>\n <div class=\"foot-social-btns\">facebook twitter linkedin mail\n </div>\n <div class=\"clearfix\">\n </div>\n </div>\n </div>\n</footer>",
"gjs-css": "* {\n box-sizing: border-box;\n}\nbody {\n margin: 0;\n}\n.clearfix{\n clear:both;\n}\n.header-banner{\n padding-top:35px;\n padding-bottom:100px;\n color:#ffffff;\n font-family:Helvetica, serif;\n font-weight:100;\n background-image:url(\"//grapesjs.com/img/bg-gr-v.png\"), url(\"//grapesjs.com/img/work-desk.jpg\");\n background-attachment:scroll, scroll;\n background-position:left top, center center;\n background-repeat:repeat-y, no-repeat;\n background-size:contain, cover;\n}\n.container-width{\n width:90%;\n max-width:1150px;\n margin:0 auto;\n}\n.logo-container{\n float:left;\n width:50%;\n}\n.logo{\n background-color:#fff;\n border-radius:5px;\n width:130px;\n padding:10px;\n min-height:30px;\n text-align:center;\n line-height:30px;\n color:#4d114f;\n font-size:23px;\n}\n.menu{\n float:right;\n width:50%;\n}\n.menu-item{\n float:right;\n font-size:15px;\n color:#eee;\n width:130px;\n padding:10px;\n min-height:50px;\n text-align:center;\n line-height:30px;\n font-weight:400;\n}\n.lead-title{\n margin:150px 0 30px 0;\n font-size:40px;\n}\n.sub-lead-title{\n max-width:650px;\n line-height:30px;\n margin-bottom:30px;\n color:#c6c6c6;\n}\n.lead-btn{\n margin-top:15px;\n padding:10px;\n width:190px;\n min-height:30px;\n font-size:20px;\n text-align:center;\n letter-spacing:3px;\n line-height:30px;\n background-color:#d983a6;\n border-radius:5px;\n transition:all 0.5s ease;\n cursor:pointer;\n}\n.lead-btn:hover{\n background-color:#ffffff;\n color:#4c114e;\n}\n.lead-btn:active{\n background-color:#4d114f;\n color:#fff;\n}\n.flex-sect{\n background-color:#fafafa;\n padding:100px 0;\n font-family:Helvetica, serif;\n}\n.flex-title{\n margin-bottom:15px;\n font-size:2em;\n text-align:center;\n font-weight:700;\n color:#555;\n padding:5px;\n}\n.flex-desc{\n margin-bottom:55px;\n font-size:1em;\n color:rgba(0, 0, 0, 0.5);\n text-align:center;\n padding:5px;\n}\n.cards{\n padding:20px 0;\n display:flex;\n justify-content:space-around;\n flex-flow:wrap;\n}\n.card{\n background-color:white;\n height:300px;\n width:300px;\n margin-bottom:30px;\n box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2);\n border-radius:2px;\n transition:all 0.5s ease;\n font-weight:100;\n overflow:hidden;\n}\n.card:hover{\n margin-top:-5px;\n box-shadow:0 20px 30px 0 rgba(0, 0, 0, 0.2);\n}\n.card-header{\n height:155px;\n background-image:url(\"//placehold.it/350x250/78c5d6/fff/image1.jpg\");\n background-size:cover;\n background-position:center center;\n}\n.card-header.ch2{\n background-image:url(\"//placehold.it/350x250/459ba8/fff/image2.jpg\");\n}\n.card-header.ch3{\n background-image:url(\"//placehold.it/350x250/79c267/fff/image3.jpg\");\n}\n.card-header.ch4{\n background-image:url(\"//placehold.it/350x250/c5d647/fff/image4.jpg\");\n}\n.card-header.ch5{\n background-image:url(\"//placehold.it/350x250/f28c33/fff/image5.jpg\");\n}\n.card-header.ch6{\n background-image:url(\"//placehold.it/350x250/e868a2/fff/image6.jpg\");\n}\n.card-body{\n padding:15px 15px 5px 15px;\n color:#555;\n}\n.card-title{\n font-size:1.4em;\n margin-bottom:5px;\n}\n.card-sub-title{\n color:#b3b3b3;\n font-size:1em;\n margin-bottom:15px;\n}\n.card-desc{\n font-size:0.85rem;\n line-height:17px;\n}\n.am-sect{\n padding-top:100px;\n padding-bottom:100px;\n font-family:Helvetica, serif;\n}\n.img-phone{\n float:left;\n}\n.am-container{\n display:flex;\n flex-wrap:wrap;\n align-items:center;\n justify-content:space-around;\n}\n.am-content{\n float:left;\n padding:7px;\n width:490px;\n color:#444;\n font-weight:100;\n margin-top:50px;\n}\n.am-pre{\n padding:7px;\n color:#b1b1b1;\n font-size:15px;\n}\n.am-title{\n padding:7px;\n font-size:25px;\n font-weight:400;\n}\n.am-desc{\n padding:7px;\n font-size:17px;\n line-height:25px;\n}\n.am-post{\n padding:7px;\n line-height:25px;\n font-size:13px;\n}\n.blk-sect{\n padding-top:100px;\n padding-bottom:100px;\n background-color:#222222;\n font-family:Helvetica, serif;\n}\n.blk-title{\n color:#fff;\n font-size:25px;\n text-align:center;\n margin-bottom:15px;\n}\n.blk-desc{\n color:#b1b1b1;\n font-size:15px;\n text-align:center;\n max-width:700px;\n margin:0 auto;\n font-weight:100;\n}\n.price-cards{\n margin-top:70px;\n display:flex;\n flex-wrap:wrap;\n align-items:center;\n justify-content:space-around;\n}\n.price-card-cont{\n width:300px;\n padding:7px;\n float:left;\n}\n.price-card{\n margin:0 auto;\n min-height:350px;\n background-color:#d983a6;\n border-radius:5px;\n font-weight:100;\n color:#fff;\n width:90%;\n}\n.pc-title{\n font-weight:100;\n letter-spacing:3px;\n text-align:center;\n font-size:25px;\n background-color:rgba(0, 0, 0, 0.1);\n padding:20px;\n}\n.pc-desc{\n padding:75px 0;\n text-align:center;\n}\n.pc-feature{\n color:rgba(255,255,255,0.5);\n background-color:rgba(0, 0, 0, 0.1);\n letter-spacing:2px;\n font-size:15px;\n padding:10px 20px;\n}\n.pc-feature:nth-of-type(2n){\n background-color:transparent;\n}\n.pc-amount{\n background-color:rgba(0, 0, 0, 0.1);\n font-size:35px;\n text-align:center;\n padding:35px 0;\n}\n.pc-regular{\n background-color:#da78a0;\n}\n.pc-enterprise{\n background-color:#d66a96;\n}\n.footer-under{\n background-color:#312833;\n padding-bottom:100px;\n padding-top:100px;\n min-height:500px;\n color:#eee;\n position:relative;\n font-weight:100;\n font-family:Helvetica,serif;\n}\n.copyright{\n background-color:rgba(0, 0, 0, 0.15);\n color:rgba(238, 238, 238, 0.5);\n bottom:0;\n padding:1em 0;\n position:absolute;\n width:100%;\n font-size:0.75em;\n}\n.made-with{\n float:left;\n width:50%;\n padding:5px 0;\n}\n.foot-social-btns{\n display:none;\n float:right;\n width:50%;\n text-align:right;\n padding:5px 0;\n}\n.footer-container{\n display:flex;\n flex-wrap:wrap;\n align-items:stretch;\n justify-content:space-around;\n}\n.foot-list{\n float:left;\n width:200px;\n}\n.foot-list-title{\n font-weight:400;\n margin-bottom:10px;\n padding:0.5em 0;\n}\n.foot-list-item{\n color:rgba(238, 238, 238, 0.8);\n font-size:0.8em;\n padding:0.5em 0;\n}\n.foot-list-item:hover{\n color:rgba(238, 238, 238, 1);\n}\n.foot-form-cont{\n width:300px;\n float:right;\n}\n.foot-form-title{\n color:rgba(255,255,255,0.75);\n font-weight:400;\n margin-bottom:10px;\n padding:0.5em 0;\n text-align:right;\n font-size:2em;\n}\n.foot-form-desc{\n font-size:0.8em;\n color:rgba(255,255,255,0.55);\n line-height:20px;\n text-align:right;\n margin-bottom:15px;\n}\n.sub-input{\n width:100%;\n margin-bottom:15px;\n padding:7px 10px;\n border-radius:2px;\n color:#fff;\n background-color:#554c57;\n border:none;\n}\n.sub-btn{\n width:100%;\n margin:15px 0;\n background-color:#785580;\n border:none;\n color:#fff;\n border-radius:2px;\n padding:7px 10px;\n font-size:1em;\n cursor:pointer;\n}\n.sub-btn:hover{\n background-color:#91699a;\n}\n.sub-btn:active{\n background-color:#573f5c;\n}\n.bdg-sect{\n padding-top:100px;\n padding-bottom:100px;\n font-family:Helvetica, serif;\n background-color:#fafafa;\n}\n.bdg-title{\n text-align:center;\n font-size:2em;\n margin-bottom:55px;\n color:#555555;\n}\n.badges{\n padding:20px;\n display:flex;\n justify-content:space-around;\n align-items:flex-start;\n flex-wrap:wrap;\n}\n.badge{\n width:290px;\n font-family:Helvetica, serif;\n background-color:white;\n margin-bottom:30px;\n box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.2);\n border-radius:3px;\n font-weight:100;\n overflow:hidden;\n text-align:center;\n}\n.badge-header{\n height:115px;\n background-image:url(\"//grapesjs.com/img/bg-gr-v.png\"), url(\"//grapesjs.com/img/work-desk.jpg\");\n background-position:left top, center center;\n background-attachment:scroll, fixed;\n overflow:hidden;\n}\n.badge-name{\n font-size:1.4em;\n margin-bottom:5px;\n}\n.badge-role{\n color:#777;\n font-size:1em;\n margin-bottom:25px;\n}\n.badge-desc{\n font-size:0.85rem;\n line-height:20px;\n}\n.badge-avatar{\n width:100px;\n height:100px;\n border-radius:100%;\n border:5px solid #fff;\n box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2);\n margin-top:-75px;\n position:relative;\n}\n.badge-body{\n margin:35px 10px;\n}\n.badge-foot{\n color:#fff;\n background-color:#a290a5;\n padding-top:13px;\n padding-bottom:13px;\n display:flex;\n justify-content:center;\n}\n.badge-link{\n height:35px;\n width:35px;\n line-height:35px;\n font-weight:700;\n background-color:#fff;\n color:#a290a5;\n display:block;\n border-radius:100%;\n margin:0 10px;\n}\n@media (max-width: 768px){\n .foot-form-cont{\n width:400px;\n }\n .foot-form-title{\n width:autopx;\n }\n}\n@media (max-width: 480px){\n .foot-lists{\n display:none;\n }\n}\n",
"gjs-components": "",
"gjs-style": ""
}
]
}