Never Push Mistakes

    ntheme

    1.11.0 • Public • Published
    npm install -g ntheme
    

    ntheme lets you generate and compile Neto themes!

    Commands

    - generate|g [options] <themeName>  Generates a Neto theme based on a Skeletal branch
    - compile|c [options]               Compiles a Neto theme for the theme store
    - migrate|m [options]               Migrates a Neto theme so it can use the other Theme Starter Kit scripts based on a Skeletal branch
    

    Note that you need Node.js installed, and gulp.js installed globally to run these scripts successfully.

    Generate a theme

    ntheme generate themeName
    

    Note: You would replace themeName with the name of your new theme.

    Options

    -b 'branch'

    Instead of generating your theme off the master branch of Skeletal, you can target a branch or release tag. E.g if you wanted to use the v3 branch, you could generate your theme like the following:

    ntheme generate themeName -b "v3"
    

    Note: When you compile your theme you will want to also target this branch/tag. Compiling should automatically take the generated theme into account.

    Compile a theme

    cd themeName
    ntheme compile
    

    For a theme to be published to the Neto theme store, it has to be compiled in a certain way which this module takes care of. In order for the compile script to work correctly, your theme will need:

    1. Theme info file

    Either your theme can have a THEME_NAME-netohemeinfo.txt file which is in the templates directory:

    themeName
    └── src
        └── templates
            └── THEME_NAME-netohemeinfo.txt
    

    You can follow the Skeletal file as a template:

    Or if you do not want to include this file, you can adjust your package.json to include a theme_names array of theme names. In most cases you will just have the one theme, so it would be:

    "theme_names": [ "THEME_NAME" ]
    

    2. Stylesheet

    Ensure you have a stylesheet in ./css called THEME_NAME-style.css. This file should contain all your theme editor styles.

    Options

    -u

    Compiles a theme as if it was installed from theme store, useful for the followings workflows:

    • If you want to place your theme up via FTP. This can be useful for starting a theme, as you don't have to install Skeletal on your development site, then sync your theme on top of it. That workflow doesn't work if your master theme is a different branch to Skeletal master.
    • Useful while in development because the stylesheet will be renamed from THEME_NAME-style.css to style.css, which the header template is referencing.
    • And useful because this compiled version is the outputted version Neto merchants will get, so it will give you a better understanding of the final product.
    ntheme compile -u
    

    -b 'branch'

    Instead of compiling your theme off the master branch of Skeletal, you can target a branch or release tag. E.g if you generated your theme with the v3 branch, you would compile with the following command:

    ntheme compile -b "v3"
    

    Note: When you compile your theme you will have wanted to generated your theme with this branch/tag. If you are compiling a theme that has been generated with this module then the script will take care of the branch version.

    Migrate a theme

    cd themeName
    ntheme migrate
    

    If you have an older theme, its package.json might not be setup correctly, this script will update it so it has;

    • A compile script so you can run npm run compile,
    • Install Skeletal and ntheme as dependencies,
    • Add a generated_themes object.

    Options

    -b 'branch'

    Instead of migrating your theme to the master branch of Skeletal, you can target a branch or release tag. E.g if you migrate your theme with the v3 branch, you would migrate with the following command:

    ntheme migrate -b "v3"
    

    Set up git

    Now, you just need to set up git. If you're not experienced with git, We recommend you install GitHub Desktop and set up the repository using the app.

    Customising templates

    It's important to know that your themes repository should only contain the templates which are different to the templates on Skeletal. This is why your new theme only contains the header, footer and homepage by default:

    themeName
    ├── README.md
    ├── bin
    │   └── compile
    ├── gulpfile.js
    ├── node_modules
    ├── package.json
    └── src
        ├── scss
        │   └── app.scss
        ├── css
        │   └── THEME_NAME-style.css
        └── templates
            ├── cms
            │   └── home.template.html
            ├── footers
            │   └── template.html
            └── headers
                └── template.html
    

    This means that if there are any templates that you wish to customise in your theme which are not included by default, you just need to copy them from the latest version of Skeletal into your theme.

    Upload your customisations

    To actually develop your theme, you need to install the latest version of Skeletal on your Neto website from the theme builder. From here, you need to upload the contents of your theme's src directory over the top of Skeletal's templates.

    You will need to configure your FTP application to upload your files without removing any files that are on the server and not in your local directory. This way, your Neto website will be using all of the default Skeletal templates for any templates that are missing from your theme.

    Compile your styles

    Any custom styles which you add to your theme should be done in src/scss/app.scss. This file can be compiled into app.css by running the gulp command in your theme:

    cd themeName
    gulp
    

    This will prompt gulp to watch any changes you make to src/scss/app.scss and automatically compile them. You can add in new build task in the gulpfile.js.

    Keywords

    none

    Install

    npm i ntheme

    DownloadsWeekly Downloads

    41

    Version

    1.11.0

    License

    ISC

    Unpacked Size

    21.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • phillycheese