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 |
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 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 FoundationXY-Grid
andFlexbox Utilities
in less than95KB
. - 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.