The frontend toolkit
that works for everyone.
Experts, professionals
and
new-comers...
Get started!
Take a quick features tour
Our clean
Datetime picker
Our datetime picker support all ISO formats,
disabling weekends or specific dates as well as min and max date...
All of this in a nice and clean package.
Read the doc
Our clean
Color picker
Out color picker support multiple color format like HSL(A), RGB(A) and HEX(A). All of this with a lot more control options.
Read the doc
Our clean
Icons management
Icons are often a pain to manage. Here's our clean solution to make use of Fontawesome icons, as well as SVG files. More sources can be added depending on the community needs...
Read the doc
Our clean
Forms
We have a lot of form components for your to discover but here's a simple example of a login/signin form with validations and responsive labels.
Read the doc
Our clean
Ranges
Ranges can be used for a lot of purposes. However, it often lacks of clear information about the value you are selecting. Here's our ranges that handle that problem:
Read the doc
A lot
of Helpers
Using Coffeekraken, you have access to a lot of helpers like:
CSS classes (postcss)
Margins Paddings Colors Flexbox Typography And more...
JS (browser)
querySelectorLive whenInViewport deepMerge deepProxy isMobile And more...
And a lot more...
Open Source
Note that this project is all open sourced. This mean it needs your support as well as your good thoughts. Don't hesitate to joins us make it even better!
We also want to thank all of the authors/contributors of the dependencies packages we use under the hood. Without them the web development wouldn't be so exciting...
Full premium UI
Components
library
As part of our ecosystem, you will have access to a nice list of fully customizable, themeing ready UI library. This gives you access to components like:
Keep in mind that all of these features are optional. This mean that you can work with the things you like and let the rest aside...
Get started!All the helpers
you ever
need
Helpers are a nice way to speed up your workflow as well as keeping your code organized. No need of a special [expandPleasantCssClassnames:6400c76a0ca62] for everything when a simple helper do the job!.
Keep in mind that all of these features are optional. This mean that you can work with the things you like and let the rest aside...
Get started!Frontend
Sugar
The goal of Coffeekraken is to help having a better development experience with a production ready quality grade. Here's some areas where we can help you:
CSS made
pleasant again
- Powerfull and pleasant classnames syntax
- Color management simplified
- Quick compilation through ViteJs
- Automatic icons integration from Fontawesome, filesystem and more...
Hello world
Hello world
Hello world
Theming made
As tasty as a donut
- Easy and Powerfull color management
- Based on powerfull configuration system
- Colors function to apply and tweak colors
- Easy dark mode support
Layout finally
Nice to work with
- No more pre-defined columns
- Auto-generated classes for your templates
- Powerfull layout system to handle simple and complex layouts
- Pre defined layouts as well as full custom capabilities
Discover
Our API
Everything in Coffeekraken is at your fingertips and everything is optional! A good start when you need something is to check if our ecosystem already gives it to you. If it doesn't, PLEASE let us know by joining us and we will integrate it if it fits our guidelines...
Here's a simple component that let you discover some of what Coffeekraken has to offer...
Sugar toolkit
to serve you
We all know as developer that a lot of our precious time is taken by searching a package that cover our needs, write our own or even copy/paste/update some code...
As all of our tools, Sugar is just a toolkit and you can use it if that suits your needs, or totally forget about it and import your own tools.
Discover what Sugar has to offer
A coherant CLI
with some cool features
The @coffeekraken/cli package is the one that provides
you these CLI features.
Some other packages are extending the CLI with new features like the "@coffeekraken/s-frontstack" that represent the
development stack that provide his features through the Sugar CLI.
querySelectorLive
This function allows you to do exactly the same as the querySelector but will listen for new element that match your selector in the DOM and execute your callback function with it as soon as it appears in your document.
Note that the __ at the start of our imports is just a convention that we follow. It helps to see what is an
imported item
in our code...
sha256,base64/etc...
These crypt functions allows you to encrypt strings with ease. Sugar support some encryption algorhytm like aes, base64, md5, sha256 and sha512.
is(Mobile,Color,PlainObject, etc...)
These functions are made to check if your user is on mobile, if your javascript is executed into a node environment, is the passed string is a URL, etc...
This is just a sneak peak of what you can leverage in the sugar
toolkit.
Don't be afraid, as usual you can take from it only what you need and learn
the rest step by step.
Nicely integrated
into VSCode
We provide a VSCode extension that let you enjoy the power of our tools like:
- Autocomplete and documentation for @coffeekraken/sugar and the other packages right in the editor.
- Autocomplete and documentation for sugar/@sugar functions and mixins of the @coffeekraken/s-postcss-sugar-plugin PostCSS plugin.
- Autocomplete and documentation for our twig filters and functions
- Automatic packages imports into JS/TS files
- And more...
Built-in
development
stack
Coffeekraken has a built-in development stack environment make to simplify and speed up your process.
Our development stack take care of a lot of things for your like the assets compilation, images optimisation/generation, template engines implementation (blade, twig) as well as full production ready build process so you can concentrate on your code. We have your back!
Speed up
your process
Create projects using our totally customizable recipes that let you start as soom as possible with production grade ready capabilities.
All the sugar power
ready to go!
Make use of the power of the Sugar toolkit to enhance your js/ts and node development experience as well as our powerfull postcss plugin to write nice and maintainable css!
Development
server
Start working as soon as possible with our development server that will gives you the power of the live assets compilation as well as the possibility for you to write your views using technologies like blade, twig, and even more to come...
Under
the hood
Our development server strategy is to make use of two different servers. See aside the explaination of this...
ViteJS
server
The ViteJs development server is used for the js/ts and css assets.
This gives us the power of live compilation and speed up considerably our workflow.
Internal
server
Our internal server based on Express is used to serve all the rest like views (blade and twig for now), static assets like images, json, etc...
Build
for production
Generate all the needed assets for production like bundling your css and javascript, as well as compressing your images, generating multiple resolutions for them if needed, generating favicons, etc...
Built-in
recipes
Recipe is our term to define project template.
You can check bellow the build-in and official Coffeekraken recipes available and ready to use. Each recipe comes with the development environment, the production testing environment and the full production build process.
This is just a sneak peak of what our built-in development stack has to offer. Don't be afraid, as usual you can take from it only what you need and learn the rest step by step.
Discover more on recipes!Why choosing
Coffeekraken
All our tools are built on well known technologies and all of our code is open-sourced without any exception.
Well known
technologies
Under the hood, our stack make uses of some AMAZING packages like ViteJs, Postcss, and more to discover on our dependencies page. This mean that all of the configurations for these packages are well known and easy to override.
Check our dependencies
100%
Open Source
We strongly believe in the power of open source. Every day you and we make uses of code that we take on the internet. The open source pattern allows you to contribute to this amazing team effort. Don't hesitate to join us in this story!
Browse our codebase
We are transparent!
With this little anoying panel (sorry for that), we just want you to know that we make use of optional analytics tools on this website.
We make use of Google analytics to follow the website evolution. You can reject this as well if you prefer not to be part of these usage statistics.
Welcome on