Wee is a lightweight front-end framework for logically building complex, responsive web projects.
Features
Mobile-first CSS framework with configurable reset and mixin library ~ 3KB gzip
- Central configuration for style normalization
- Feature toggling to minimize build size
- Structured breakpoints to organize responsive logic
- Print styling to generate print-optimized pages
JavaScript toolset to build scalable, organized client logic ~ 15KB gzip
- Foundation of utilities, helpers, and controller structure
- Chainable DOM traversal and manipulation with familiar API
- Animation methods to tween CSS attributes and properties
- Touch support for directional swipe events
- Routing library to flexibly associate endpoints to actions
- Event handling to bind actions to elements
- Data loading for Ajax and JSON interaction
- HTML5 history and PJAX helper to create dynamic experiences
- Template rendering to parse complex data structures
- Data binding to sync data models to the DOM
- Resource loading for JavaScript, CSS, and images
- Breakpoint watching for efficient media query callbacks
JSON-configured build process to compile, optimize, and minify your project
- Built-in server for local static development
- Live reloading of assets and markup
- Ghost mode to mirror actions across multiple browsers
- Static site generator perfect for living style guides
- Sourcemap output to line match unminified JavaScript
- Validation of JavaScript against JSCS and JSHint rules
Structured foundation of markup, icons, and supporting files
Examples
Here are a few basic examples. There's much more so check out the documentation.
→
MixinsImproved organization and readability using Less along with Wee's powerful mixin library.
About Contact
.nav &__link .font@headingFont; 1.2; .spaced-block1; .uppercase; &:hover .backgrounddark; 5%; &.-is-active .borderbottom; @primary;
Becomes...
→
CoreThere are a couple dozen useful features and utilities in the core script. For instance, you can handle environment detection, loop through selections, serialize objects, and observe data models.
$; $; // "local"
$
→
DOMFamiliar chainable API and pre-cached references make DOM interaction quick and easy.
Button
;
→
ControllersControllers along with the automated build process create well-organized projects. There are public and private objects with constructors, destructors, and other helpful components.
Weefn;
→
RoutingCreate independence between markup and script using the powerful routing options. There are some helpful built-in filters and custom filters can also also be registered.
Weeroutes;
→
TemplatingThe template parser supports fallbacks, loops, helpers, partials, and more. It also powers the static site generator and data-binding apps.
Weeview;
Becomes...
"My name is John Smith"
→
AppsWee includes a powerful application framework for one-way data-binding. Simply call into one of the many data manipulation methods to update your model and watch the DOM update automatically.
var app = Weeapp; app;
→
BreakpointsSeamlessly combine and trigger breakpoint logic based on configured project media queries. Events can be setup to watch, initially fire, trigger only once, and more.
Weescreen;
→
EventsCreate organized interaction on your page with the simple event API. Custom events can also be registered as they are with the core Wee touch events.
Weeevents;
→
RequestsSubmit any type of request with a number of callback options. Supports advanced features like custom headers and JSONP handling.
Weedata;
→
Asset LoadingLoad what you need on demand to optimize page speed and preserve bandwidth. Assets can be grouped and checked against later for advanced usage.
Weeassets;
→
AnimationTween attributes and properties with granular control and callback functionality. Custom easing function can be registered for granular control of the motion.
Weeanimate;
→
HistoryCreate dynamic experiences through partial Ajax loading and the HTML5 History API. With one method static navigation can transform into a seamless, efficient user flow.
Weehistory;
Get Started
- Install the Wee CLI by running
npm install -g wee-cli
Then create a new Wee project using one of these methods:
- Download the latest release
- Clone the repository using
git clone git://github.com/weepower/wee.git
- Install with npm by running
npm install wee-framework
Now run npm install
from the project root to install the build dependencies followed by wee
to launch it.
Node.js 4.4+ is recommended for the build process.
Compatibility
Wee officially supports the following minimum browser versions:
Chrome | Edge | Firefox | IE | Safari |
---|---|---|---|---|
30 | 20 | 29 | 9 | 7.1 |
Bugs
Have a bug or a feature request? Open a new issue.
To view the working to-do list check out our public Trello board.
Automated testing generously provided by BrowserStack.
Versioning
Wee adheres to Semantic Versioning in the form of MAJOR.MINOR.PATCH.
Regardless of version we recommend thoroughly reviewing the release notes before updating.
Community
Keep track of development and news by following @weecss on Twitter.
License
Copyright 2016 Caddis Interactive, LLC. Licensed under the Apache License, Version 2.0.