{"id":18533472,"url":"https://github.com/xfiveco/xcorner","last_synced_at":"2026-02-08T16:31:40.139Z","repository":{"id":147033105,"uuid":"596187618","full_name":"xfiveco/xcorner","owner":"xfiveco","description":"BigCommerce Starter Theme ","archived":false,"fork":false,"pushed_at":"2024-06-20T07:57:26.000Z","size":45535,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"xcorner-v2","last_synced_at":"2025-07-29T02:59:22.660Z","etag":null,"topics":["bigcommerce","bigcommerce-theme","framework-agnostic","itcss","no-jquery","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/xfiveco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2023-02-01T16:47:49.000Z","updated_at":"2024-10-24T18:12:32.000Z","dependencies_parsed_at":"2023-12-25T17:38:42.125Z","dependency_job_id":"ab4e0c92-e8fc-4286-b489-7f42cf6d4746","html_url":"https://github.com/xfiveco/xcorner","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/xfiveco/xcorner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fxcorner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fxcorner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fxcorner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fxcorner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xfiveco","download_url":"https://codeload.github.com/xfiveco/xcorner/tar.gz/refs/heads/xcorner-v2","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xfiveco%2Fxcorner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29236898,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T14:18:14.570Z","status":"ssl_error","status_checked_at":"2026-02-08T14:18:14.071Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["bigcommerce","bigcommerce-theme","framework-agnostic","itcss","no-jquery","vanilla-javascript","vanilla-js"],"created_at":"2024-11-06T19:11:43.676Z","updated_at":"2026-02-08T16:31:40.122Z","avatar_url":"https://github.com/xfiveco.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xCorner\n\nXfive stencil's Cornerstone theme for BigCommerce theme developers.\n\n## JS API\n\nWhen writing theme JavaScript (JS) there is an API in place for running JS on a per page basis. To properly write JS for your theme, the following page types are available to you:\n\n-   \"pages/account/addresses\"\n-   \"pages/account/add-address\"\n-   \"pages/account/add-return\"\n-   \"pages/account/add-wishlist\"\n-   \"pages/account/recent-items\"\n-   \"pages/account/download-item\"\n-   \"pages/account/edit\"\n-   \"pages/account/return-saved\"\n-   \"pages/account/returns\"\n-   \"pages/account/payment-methods\"\n-   \"pages/auth/login\"\n-   \"pages/auth/account-created\"\n-   \"pages/auth/create-account\"\n-   \"pages/auth/new-password\"\n-   \"pages/blog\"\n-   \"pages/blog-post\"\n-   \"pages/brand\"\n-   \"pages/brands\"\n-   \"pages/cart\"\n-   \"pages/category\"\n-   \"pages/compare\"\n-   \"pages/errors\"\n-   \"pages/gift-certificate/purchase\"\n-   \"pages/gift-certificate/balance\"\n-   \"pages/gift-certificate/redeem\"\n-   \"global\"\n-   \"pages/home\"\n-   \"pages/order-complete\"\n-   \"pages/page\"\n-   \"pages/product\"\n-   \"pages/search\"\n-   \"pages/sitemap\"\n-   \"pages/subscribed\"\n-   \"pages/account/wishlist-details\"\n-   \"pages/account/wishlists\"\n\nThese page types will correspond to the pages within your theme. Each one of these page types map to an ES6 module that extends the base `PageManager` abstract class.\n\n```javascript\nexport default class Auth extends PageManager {\n    constructor() {\n        // Set up code goes here; attach to internals and use internals as you would 'this'\n    }\n}\n```\n\n### JS Template Context Injection\n\nOccasionally you may need to use dynamic data from the template context within your client-side theme application code.\n\nTwo helpers are provided to help achieve this.\n\nThe inject helper allows you to compose a JSON object with a subset of the template context to be sent to the browser.\n\n```\n{{inject \"stringBasedKey\" contextValue}}\n```\n\nTo retrieve the parsable JSON object, just call `{{jsContext}}` after all of the `{{@inject}}` calls.\n\nFor example, to setup the product name in your client-side app, you can do the following if you're in the context of a product:\n\n```html\n{{inject \"myProductName\" product.title}}\n\n\u003cscript\u003e\n    // Note the lack of quotes around the jsContext handlebars helper, it becomes a string automatically.\n    var jsContext = JSON.parse({{jsContext}}); // jsContext would output \"{\\\"myProductName\\\": \\\"Sample Product\\\"}\" which can feed directly into your JavaScript\n\n    console.log(jsContext.myProductName); // Will output: Sample Product\n\u003c/script\u003e\n```\n\nYou can compose your JSON object across multiple pages to create a different set of client-side data depending on the currently loaded template context.\n\nThe stencil theme makes the jsContext available on both the active page scoped and global PageManager objects as `this.context`.\n\n## Static assets\n\nSome static assets in the Stencil theme are handled with Grunt if required. This\nmeans you have some dependencies on grunt and npm. To get started:\n\nFirst make sure you have Grunt installed globally on your machine:\n\n```\nnpm install -g grunt-cli\n```\n\nand run:\n\n```\nnpm install\n```\n\nNote: package-lock.json file was generated by Node version 14 and npm version 6.14.17. The app supports Node 10 as well as multiple versions of npm, but we should always use those versions when updating package-lock.json, unless it is decided to upgrade those, and in this case the readme should be updated as well. If using a different version for node OR npm, please delete the package-lock.json file prior to installing node packages and also prior to pushing to github.\n\nIf updating or adding a dependency, please double check that you are working on Node version 14 and npm version 6.14.17 and run `npm update \u003cpackage_name\u003e` or `npm install \u003cpackage_name\u003e` (avoid running npm install for updating a package). After updating the package, please make sure that the changes in the package-lock.json reflect only the updated/new package prior to pushing the changes to github.\n\n### Icons\n\nIcons are delivered via a single SVG sprite, which is embedded on the page in\n`templates/layout/base.html`. It is generated via a grunt task `grunt svgstore`.\n\nThe task takes individual SVG files for each icon in `assets/icons` and bundles\nthem together, to be inlined on the top of the theme, via an ajax call managed\nby svg-injector. Each icon can then be called in a similar way to an inline image via:\n\n```\n\u003csvg\u003e\u003cuse xlink:href=\"#icon-svgFileName\" /\u003e\u003c/svg\u003e\n```\n\nThe ID of the SVG icon you are calling is based on the filename of the icon you want,\nwith `icon-` prepended. e.g. `xlink:href=\"#icon-facebook\"`.\n\nSimply add your new icon SVG file to the icons folder, and run `grunt svgstore`,\nor just `grunt`.\n\n## Features\n\n### Naked templates\n\nWe cleaned all template files for a trully customizable canvas.\n\n### Style guide\n\nOn the SASS side, we got rid of all legacy styling which sometimes forced us to use `!important` early when starting a new theme project. In contrast, we're now using [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) methodology which helps to organize our styling rules from broad to specific in scope.\n\nSince we mostly add new component and utility SCSS rules, we created a couple of small scripts which can be run as `npm run createComponent \u003ccomponent-name\u003e` and `npm run createUtility \u003cutility-name\u003e` which create the scss file inside `asstes/scss` and adds a new line inside the corresponding `_components.scss` or `_utilities.scss` file for importing the new SCSS rule.\n\nAll code linters follow [Chisel](https://github.com/xfiveco/generator-chisel) conventions.\n\n### Swiper\n\nHere, we're using [Swiper](https://swiperjs.com/) which is a library agnostic carrousel implementation.\n\n### No more jQuery\n\nThis theme tries to be as close to the browser as possible, and so, we replace jQuery with native function calls, leaving its use to very special use cases like the file tree in Search page.\n\nSince there are some niceties from jQuery like `#parents()` or `#trigger()`, we extracted these as native equivalents in the following files:\n\n-   `assets/js/theme/global/selector.js`: here we have `$()` as a shorthand for `document.querySelector`. We have `$$()` as a shorthand for `document.querySelectorAll` but it returns a proper Array, so we can use `filter`, `map`, etc. `parents()` to select a HTMLElement which satisfies the selector provided and `prev()` which tries to get the previous HTMLElement that matches the selector if provided.\n-   `assets/js/theme/global/toggle.js`: the `toggle()` function hides or shows the HTMLElement based on current visibility.\n-   `assets/js/theme/common/utils/trigger.js`: the `trigger()` function dispatches an event or custom event depending if details are provided using browser native function calls.\n-   `assets/js/theme/common/utils/is-visible.js`: here we have a native equivalent of `jQuery#is(':visible')`.\n\nAlong with jQuery, Foundation is gone, we recommend using newer ways to work with layouts and native component implementations.\n\n### Utility scripts\n\nWe recommend creating new (custom) templates and JS files inside `templates/components/custom` and `assets/js/theme/custom` respectively. To make this step a little easier, we created a script for creating a custom template script running `npm run addTemplate \u003ctemplate-name\u003e` and another for creating a JS file running `npm run addCode \u003cjavascript-name\u003e`.\n\n### Thank you\n\nThis starter theme is heavily based on the [Cornerstone](https://github.com/bigcommerce/cornerstone) theme done by [BigCommerce](https://sweetydeals.com/) team \u0026 contributors. Our sincere grettings 🙏♥️ goes to everyone who contributed to [Cornerstone](https://github.com/bigcommerce/cornerstone) in the past.\n\n#### License\n\n(The MIT License)\nCopyright (C) 2015-present BigCommerce Inc.\nAll rights reserved.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxfiveco%2Fxcorner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxfiveco%2Fxcorner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxfiveco%2Fxcorner/lists"}