Jelly-sass NPM

Jelly

Jelly is yet another CSS-Framework like Bootstrap. But instead of focusing too much on a Frame, we want to make it flexible and easily customizable. Get Jelly, individualize it by changing only small bits and let the magic happen!

Features

Some features are already explained above, but let's list them to make it pretty:

Focus on Style: Jelly aims mostly at providing an grouped and simple style so you don't have to do the work and can focus on the important stuff.
Convention over Configuration: You don't need to fine-tune every little bit in Jelly. Just tell what shall be changed and let everything else Jelly do.
Easy implementation: It's using the already present HTML-structure to style your Project properly. No annoying classes or special stuff, just valid simple HTML and you're done!
Up-to-date: We use up-to-date technology for Jelly to get the best advantage and performance of it.
Fine-Tuning: Jelly groups components together based on their styles. Change the layout and style with ease and powerful utility mixins and functions.

Installation

To get Jelly to work, you first of all need to install it into your Project/Website. Another thing to do is, to add this code into your HTML-Header to make everything work out as expected:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

When you don't add this to your Header, your Website can go quite crazy, so don't forget that!

Bower

If you need jelly only as a CSS-Library, Bower is probably the best choice. It only contains the compiled version of the styles and scripts, so you can put them into your Website without having to compile them yourself.

Use the Bower install-command in the root of your project like this:

bower install jelly

Now Jelly is installed in the bower_components-Folder with all it's dependencies and is ready to use.

npm

If you want to build on top of Jelly, you should use npm for it. It installs all developing-dependencies and already gives you a lot of tools to work with.

You can add jelly as a dependency to your project by simply running this command in the root of your project:

npm install jelly-sass

Git

If you want to build on top of jelly editing the source-code (For custom builds, own versions/types, or whatever you want to do), then clone this repository locally with:

git clone https://github.com/entailment/Jelly.git

Then install jelly's dependencies via npm using:

npm install

Now you're ready to edit it however you want. Read the Build & Tests Section to help you with the work.

Build & Tests

Jelly is using gulp to run all the builds and tests. These are the current tasks:

gulp / gulp build

Builds the entire project. First runs all linters, then the compiles the code and then minifies it. Everything is getting published to the dist directory.

gulp test

Runs all unit-tests for the browser and for node.

gulp watch

Watches all source files and runs in the background to lint, compile and minify your work on the fly. Very useful while developing.

gulp serve

Does the same as watch but also creates a server which serves all Files to http://localhost:3000. You can modify the files and they will automatically update in the browser.

gulp watch:test

Watches all source and tests files and runs them in the background. First it completes the build to then run the tests again.

Documentation

The Documentation for the configuration, functions, mixins and more can be found on the Jelly-Wiki.

License

This Projects Source-Code is published under the Apache License 2.0.

The included Fonts under the fonts-Directory are licensed by their respective owners. See more about the License in the included LICENSE.txt or OFL.txt Files.

All other content in this Project which is not covered by the above definitions is licensed under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) License.