Edit on GitHub

Snowboard.js - Winter JavaScript Framework

image

Introduction

Winter includes an optional JavaScript framework called Snowboard, which acts as an upgrade to the previous AJAX Framework and provides many new useful features in an extensible fashion, whilst dropping previous hard dependencies to supercharge your projects even further.

The framework takes advantage of the incredible enhancements made to the JavaScript ecosystem in recent years to provide a unique experience, available only on Winter.

Features

  • Rewritten AJAX and JavaScript framework, built from the ground-up using the latest JavaScript syntax (ES2015+) and functionality.
  • No dependency on jQuery, allowing the framework to be used across a wide variety of JavaScript projects.
  • Easy, comprehensive extensibility and event handling.
  • Small footprint and full control over which core functionalities to include ensures your website loads quick.

Including the framework

Before proceeding, please read the Migration Guide, especially if you intend to use this framework on an existing project.

Snowboard can be included in your CMS theme by placing the {% snowboard %} tag anywhere inside your page or layout where you would like the JavaScript assets to be loaded - generally, this should be at the bottom of the page before the closing </body> tag. You must use this tag before you load any assets that rely on the framework, such as plugins or event listeners, and it should also be located before the {% scripts %} tag to allow third party code (i.e. Winter Plugins) to provide Snowboard plugins if they wish.

By default, only the base Snowboard framework and necessary utilties are included by the {% snowboard %} token in order to allow for complete control over which additional features (such as the AJAX framework) are desired to be included in your themes.

You can specify further attributes to the tag to include optional additional functionality for the framework:

Attribute Includes
all Includes all available plugins
request The base JavaScript AJAX request functionality
attr The HTML data attribute request functionality
extras Several useful UI enhancements, including flash messages, loading states and transitions.

To add Snowboard to your theme with all of its features enabled, you would use the following:

{% snowboard all %}

To include the framework with just the JavaScript AJAX request functionality:

{% snowboard request %}

Or to include both the JavaScript AJAX and HTML data attribute request functionality:

{% snowboard request attr %}

Including the framework manually

The following asset aliases have been created so that the framework can easily be included using the asset combiner:

  • @snowboard.base
  • @snowboard.attr
  • @snowboard.request
  • @snowboard.extras
  • @snowboard.extras.css

You can use the asset combiner twig filter like this to include your stylesheets:

<link rel="stylesheet" href="{{ [
    '@snowboard.extras.css',
    [other assets here]
] | theme }}">

You can use the asset combiner twig filter like this to include your scripts:

<script src="{{ [
    '@snowboard.base',
    '@snowboard.attr',
    '@snowboard.request',
    '@snowboard.extras',
] | theme }}"></script>

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

Winter: 16 Months Later

Published July 14, 2022
With the first year of Winter behind us, let's take a look at what we were able to achieve in 2021.

View this post Read all posts

Latest Winter CMS release

v1.2.0

Released July 15, 2022
0 Dependencies, 0 Community Improvements, 0 First Party Plugins, 0 First Party Themes, 0 VSCode Extension, 0 CLI & Console Commands, 0 Autocompletion, 0 Improved Support for Laravel provided commands, 0 New Winter\Storm\Console\Command base class and helpers, 0 Scaffolding Improvements, 0 Bug Fixes, 0 Project Configuration & Helper Files, 0 Testing, 0 Plugin Manager, 0 Backend UI & UX, 0 Media Manager & Image Resizing, 0 Themes, 0 Twig, 0 Events, 0 Database, 0 Filesystem, 2 Modules, 0 Internals, 29 New Contributors

View details View all releases