RenderKit

"Definitely 👌🏽 the light way for start new front-end web projects."

From a UI-Kit up in production. A light way for start new front-end web project. RenderKit is a lightweight scss framework that brings together the best front-end tools for cross browsing, accessibility and prototyping. With more than 150 configurations via scss it is the lightest way to start front-end projects.

RenderKit can also be used as styleguide and visual tester for the various @mixins installed with sections already ready for use.

Getting started

Install via NPM

npm install renderkit

SCSS Package

The following tools are included in the scss package:

CROSS BROWSING	Normalize v.8.0.0 Extended and rewritten in scss. Configurable, in complete safety.
BREAKPOINTS	Foundation Breakpoint with emless output. (For pixel lovers).
GRID SYSTEM	· Foundation XY-Grid with remless output for the gutters, with all mixin for building semantically. · Foundation Float Grid with remless output for the gutters, with all mixin for building semantically.
TYPOGRAPHY	· Mixin for @font-face rules & Google Fonts. · Headers responsive with a scss map to draw up every single header in every breakpoint.
FLEXBOX	Foundation Flexbox Utilities (The ability to enable or disable flex-source-ordering has been added.)
FORM	· Powerful mixin to styling up all cross browsing fields. · Powerful mixin to styling up checkbox & radio without js. Available with building semantically.
ACCESSIBILITY	· Accessibility classes · Layout mixins
PALETTE	Mixin for manage all palette colors via scss map.
SHAPES	Mixins with building semantically & classes to generate shapes without images.
PROTOTYPING	· Foundation visibility classes · Foundation text alignment · Text transformation classes · Float classes · Clearfix classes
PRINT	Media Print from original HTML5 boilerplate.

Important notes: all packages including the Foundation core have been revisited and customized without any rem output. If you want to install any additional Foundation package, full functionality is not guaranteed.

If you want to completely use all the accessibility features present, you need to install what-input. For all scss documentation visit this page.

Each scss RenderKit file is fully compatible with sass-doc. You can also install the complete documentation locally!.

SCSS Quickly install

Create your scss file

@import 'path/to/renderkit/scss/renderkit';
@include scss-renderkit;

Import the config/_config.scss file, change the default and enjoy!. The details of each variable can be found and searched on this page.

CSS Quickly install

You can basic download the RenderKit css file.

• The default css RenderKit includes Foundation XY-Grid and Flexbox Utilities in less than 95KB.
• For a minify version download this file, less than 70KB.

If you want the version without flexbox you can download the "float" version with Foundation Float Grid.

License

RenderKit is released under the MIT License.