jellyfish-ui

Jellyfish is a front end SCSS and JS framework for creating modern and performant websites. It has similar class names and components as Bootstrap, but without the bloat. Jellyfish also comes with some useful helpers in JS for common project requirements.

Usage no npm install needed!

<script type="module">
  import jellyfishUi from 'https://cdn.skypack.dev/jellyfish-ui';
</script>

README

🎐 Jellyfish SCSS Framework

TODO: The docs need rewriting now that we are on npm

Jellyfish is yet another front-end design framework for developing responsive, browser-consistent web projects. Jellyfish has a few stings in it's tail:

  • NPM is used to manage packages
  • Grunt.js is used to run tasks to make compile easier
  • Sass (SCSS) is used to compartmentalise components and organise css into digestible parts
  • BrowserSync opens up a new window in your default browser and live reloads whenever changes are detected to your project's javascript, css or HTML
  • Jellyfish is hugely customisable with a large settings file to quickly theme the base styles to your project. Jellyfish differs from most grid systems in that you can change the amount of columns in your grid and the breakpoint names - the logic built into sass will automatically compile the appropriate code

View documentation

Installation

Make sure that you have npm, browsersync and grunt installed on your system following the guides on their respective websites. Then, clone the project into your required folder with git:

git clone https://github.com/unofficialmatt/jellyfish.git
cd jellyfish

Install the dev dependencies:

npm install

And start:

grunt

Your project is now up and running, and you can begin extending the code to suit your project - and editing the variables in /assets/scss/_settings.scss.

Do we really need another SCSS framework?

Good question! No, we probably don't. Jellyfish has been built over the course of many years by Matt Weet to gain a better understanding of, and adapt to, modern front-end development techniques and to understand how a responsive CSS framework works from scratch. It has also helped Matt to learn more about git.

Matt uses the framework as a basis for all of his web projects, and as you can see from the commit history there have been many trials and tribulations along the way!

Feel free to take Jellyfish for a spin on any of your web projects and let me know if you have any feedback or use it on a live site.

Acknowledgements

A special thanks to all of the developers who's existing frameworks have provided inspiration and pointers:

Contributing

Please feel free to fork, comment, critique, or submit a pull request.

Author

License

This project is open source and available under the MIT License.