Narwhals Prolong Mischief

    catchify-core

    4.2.1 • Public • Published

    Catchify

    Build Status

    A solid and consistent starting point for CSS and JavaScript.

    Installation

    Jump to 'Usage' below for a quicker way to start or install using npm into your existing project like so:

    npm install catchify-core --save
    

    TODO: Update all the following lines

    Usage

    1. Copy the contents of the /example directory into your project
    2. Rename the example package.json file accordingly
    3. npm install to install dependencies
    4. Create things 💥

    💡 Usage is intended using source es6 JS and SCSS. The above steps will get you in a position to start using these core elements straight away.

    Event listeners

    Catchify provides a number of event listeners, so you can change or extend the behaviour of the components:

    • CatchifyTabsLoaded: Triggered when Tabs has been loaded.
    • CatchifyModalsLoaded: Triggered when Modals has been loaded.
    • CatchifyFormsLoaded: Triggered when Forms has been initiated.

    Scripts

    Scripts have been added and wired up in the example package.json file as long as you keep the same directory structure.

    To watch and build as you develop install this watcher utility:

    npm install -g watch
    

    With watch available globally, you can simply run any of the watch commands below

    CSS

    To build CSS once

    npm run build:css
    

    To watch and build CSS whilst developing

    watch 'npm run build:css' ./sass
    

    JS

    To build JS once

    npm run build:js
    

    To watch and build JS whilst developing

    watch 'npm run build:js' ./js
    

    Format

    To format JS once

    npm run format
    

    💡 Formatting code will change the source file to ensure all code is formatted similarly. This will affect committed code in most cases so it's a really good idea to run npm run format or npm run build prior to commiting to ensure that formatting changes won't require a follow up commit. See below for more info on formatting.

    Formatting / Linting

    Catchify now relies on Prettier which is an opinionated code formatter. Rather than simply flagging coding standard violations (quote styles, trailing commas, semi colons, line lengths etc) it simply goes in and changes them. It's strict and unforgiving at first, but it's the most frustration free way to ensure JS code is consistent across projects and developers.

    Running Fractal

    Running dev version

    We got a script to run fractal while developing catchify.

    Run npm run fractal:watch from the root to work on it.

    Running static version

    To test the static version of fractal and see how will it look once is deployed, you can do the following:

    • Build the static version of fractal: npm run fractal:build
    • Run it locally: docker run --rm -v $(pwd)/docroot:/usr/share/nginx/html:ro -p 80:80 nginx
    • You should see it your browser on http://localhost

    Keywords

    none

    Install

    npm i catchify-core

    DownloadsWeekly Downloads

    21

    Version

    4.2.1

    License

    MIT

    Unpacked Size

    2.18 MB

    Total Files

    83

    Last publish

    Collaborators

    • catchdigital