Cellular is designed to make things as simple as they can be, but no simpler.
/src is where all development happens.
Cellular uses nodejs/npm to simplify building and optimizing theme assets. If you don't have it already, install NodeJS (version ^16 is required)
Open a terminal and use these commands to get set up running:
cd path/to/desired/directory
git clone https://github.com/ablank/cellular.git cellular
cd cellular
npm install
After the project is installed, there are several commands exposed in npm to make development easy: npm run obeyMyCommand.
A list of all available commands is found in the package.json file scripts: {} object.
style-dictionary is a great solution for sharing variables across multiple technologies- the same configuration can be exported to multiple formats (ie. sass, json, yaml).
Set the variables using the files from /style-dictionary/variables/*.json, or add your own myVariable.json to create a new variable.
The files generated by style-dictionary will be replaced with every build from the current style-dictionary variables, so use it!
Cellular UI uses jQuery to handle events and structure html so that designs may be implemented simply by focusing on sass.
To facilitate this, javascript object state is updated and classes are added to elements that reflect the state of interaction. A configuration object may be passed to customize plugins where appropriate, ie:
$(".myListClass").jScrolli({
transition: {
background: "img:first", // Selector for applying background image
pause: 8, // Time (seconds) to pause between slides.
speed: 500 // Animation speed (milliseconds).
},
autodim: true, // Dim the slider if not active/focused.
delay: 1.4, // Time (seconds) to wait before dimming.
});
Styling is done with Sass (/src/sass) and broken into partials loaded by ___index.scss.
Add new libraries to /src/sass/libs and import the main file/entry point in /_libs/___index.scss