Package: next-theme-kit
29 Next Theme KitTheme Kit is a cross-platform command line tool to build and maintain storefront themes withSass Processingsupport on the 29 Next platform.InstallationTheme Kit is a python package available onPyPiIf you already havepythonandpip, install with the following command:pip install next-theme-kitMac OSX RequirementsSee how to installpythonandpipwithHomeBrew. Once you have completed this step you can install using thepipinstructions above.Windows RequirementsOption 1 (Recommended)- Windows 10 and above feature WSL (Windows Subsystem for Linux) which provides a native Linux environment, see how toInstall WSL with Ubuntu. Once you have installed WSL, follow thebest practice guides to configure and use with VS Codeand then follow thepipinstructions above to install Theme Kit.Option 2- Installingpythonin Windows natively can be done with through theWindows App Store. Recommend usingWindows Powershell. This route is a little more tricky and some knowledge on how to manage python in windows will be required.Use Python Virtual Environments- For Mac, Windows, and Linux, it's a best practice to use a Python Virtual Environment to isolate python packages and dependecies to reduce potential conflicts or errors,more on creating a Python Virutal Environment.Updating Theme KitUpdate to the latest version of Theme Kit with the following command:pip install next-theme-kit --upgrade:warning:ImportantAs of version 1.0.2, the store authentication uses Oauth and requires creating a storeOauth Appwiththeme:readandtheme:writepermissions.UsageWith the package installed, you can now use the commands inside your theme directory and work on a storefront theme.Available Commandsntk init- initialize a new thementk list- list all available themesntk checkout- checkout an existing thementk pull- download existing theme or theme filentk push- push current theme state to storentk watch- watch for local changes and automatically push changes to storentk sass- process sass to css, seeSass ProcessingImportant- You must pass theapikeyandstoreparameters for all commandsifthere is not an existingconfig.ymlfile in your current directory.InitInitialize a new theme which will create the theme on a store and create an initial config.yml filentk init --name="<Theme Name>" --apikey="<api key>" --store="<https://storedomain.com>"Required flags without config.ymlShortLongDescription-a--apikeyAPI Key used to connect to the store.-s--storeFull domain of the store.-n--nameName of the new themeListList all themes installed on the theme.ntk list --apikey="<api key>" --store="<https://storedomain.com>"Required flags without config.ymlShortLongDescription-a--apikeyAPI Key used to connect to the store.-s--storeFull domain of the store.CheckoutCheckout a theme from your store to pull it into your directory.ntk checkout --theme_id=<id> --apikey="<api key>" --store="<https://storedomain.com>"Required flags without config.ymlShortLongDescription-a--apikeyAPI Key used to connect to the store.-s--storeFull domain of the store.-t--theme_idID of the theme.PullPull a theme from your store to into your directory.ntk pull --theme_id=<id> --apikey="<api key>" --store="<https://storedomain.com>"Required flags without config.ymlShortLongDescription-a--apikeyAPI Key used to connect to the store.-s--storeFull domain of the store.-t--theme_idID of the theme.PushPush all theme files from your local directory to the store.ntk push --theme_id=<id> --apikey="<api key>" --store="<https://storedomain.com>"Required flags without config.ymlShortLongDescription-a--apikeyAPI Key used to connect to the store.-s--storeFull domain of the store.-t--theme_idID of the theme.WatchWatch for file changes and additions in your local directory and automatically push them to the store.ntk watch --theme_id=<id> --apikey="<api key>" --store="<https://storedomain.com>"Required flags without config.ymlShortLongDescription-a--apikeyAPI Key used to connect to the store.-s--storeFull domain of the store.-t--theme_idID of the theme.SassProcesssassfiles to CSS files for inclusion in your storefront. SeeSass Processingfor more details.ntk sassOptional flagsShortLongDescription-sos--sass_output_styleOptions are nested, expanded, compact, or compressedSass ProcessingTheme kit includes support for Sass processing viaPython Libsass. Sass processing includes support for variables, imports, nesting, mixins, inheritance, custom functions, and more.How it worksPutscssfiles in top levelsassdirectory.Runntk sassorntk watchto process themesassfiles.Top levelscssfiles will be processed tocssfiles in the asset directory with the same name.Example Theme with Sass Structure├── assets
│   ├── styles.css // reference this asset file in templates
├── sass
│   ├── _base.scss
│   ├── _variables.scss
│   └── styles.scss // processed to assets/main.cssImportant- Sass processing is only supported on local, files in thesassdirectory are uploaded to your store for storage but cannot be edited in the store theme editor.Configure Default Output StyleChange the default sass output style inconfig.yml, example below.development:
  apikey: <api key>
  sass:
    output_style: compressed // options: nested, expanded, compact, or compressed
  store: <store url>
  theme_id: <theme id>