Getting Started

Jellyfish is a lightweight SCSS and JS framework to add to the ever-growing list.

Jellyfish is mobile-first, flexible and scalable - providing browser-consistent styles for default HTML elements, along with some useful components and modifiers. Jellyfish uses SASS variables throughout, with a handful of variables being converted and exposed as CSS custom properties to allow for in-browser modification. Jellyfish also ships swims with a small handful of helpful Javascript functions and utilities.

Using Jellyfish in your project

Jellyfish is intended to be used as a dependency, via npm. The HTML/php starter repo provides a good example of use.

$ npm install jellyfish-ui

SASS 7-1 Pattern

Jellyfish is built with the SASS 7-1 pattern at it's core. In order to preserve this in your project's output CSS, you should import the SCSS files in the appropriate order:

      
        @charset "UTF-8";

        @import "jellyfish-ui/src/scss/abstracts/__all";
        @import "PROJECT_SCSS_DIR/abstracts/__all";

        @import "jellyfish-ui/src/scss/base/__all";
        @import "PROJECT_SCSS_DIR/base/__all";

        @import "jellyfish-ui/vendors/hamburgers/hamburgers";
        @import "PROJECT_SCSS_DIR/vendors/__all";

        @import "jellyfish-ui/src/scss/layout/__all";
        @import "PROJECT_SCSS_DIR/layout/__all";

        @import "jellyfish-ui/src/scss/components/__all";
        @import "PROJECT_SCSS_DIR/components/__all";

        @import "PROJECT_SCSS_DIR/pages/__all";

        @import "jellyfish-ui/src/scss/themes/__all";
        @import "PROJECT_SCSS_DIR/themes/__all";

        @import "jellyfish-ui/src/scss/utilities/__all";
        @import "PROJECT_SCSS_DIR/utilities/__all";

      
    

Javascript

You should also include the Javascript files - either by importing the src files into your build process or by including the dist file /dist/js/jellyfish.min.js in your project's markup.