Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matteobertoldo/renderkit
Definitely the light way for start new front-end web projects.
https://github.com/matteobertoldo/renderkit
foundation framework light scss uikit
Last synced: about 2 months ago
JSON representation
Definitely the light way for start new front-end web projects.
- Host: GitHub
- URL: https://github.com/matteobertoldo/renderkit
- Owner: matteobertoldo
- License: mit
- Archived: true
- Created: 2016-11-17T23:31:24.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-19T12:26:18.000Z (almost 6 years ago)
- Last Synced: 2024-09-20T18:23:21.891Z (about 2 months ago)
- Topics: foundation, framework, light, scss, uikit
- Language: CSS
- Homepage:
- Size: 1.54 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://www.npmjs.com/package/renderkit)
[](https://www.npmjs.com/package/renderkit)
## Getting started
Install via NPM
```bash
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](https://github.com/ten1seven/what-input).
For all `scss` **documentation** visit [this](https://matteobertoldo.github.io/renderkit/sassdoc/index.html) page.
Each `scss` RenderKit file is fully compatible with [sass-doc](http://sassdoc.com). You can also install the complete documentation locally!.
## SCSS Quickly install
Create your `scss` file
```scss
@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](https://matteobertoldo.github.io/renderkit/sassdoc/index.html).
## CSS Quickly install
You can basic [download](https://raw.github.com/matteobertoldo/renderkit/dist/css/renderkit.css) the RenderKit `css` file.
- The default `css` RenderKit includes Foundation `XY-Grid` and `Flexbox Utilities` in less than `95KB`.
- For a minify version [download](https://raw.github.com/matteobertoldo/renderkit/dist/css/renderkit.css) this file, less than `70KB`.
If you want the version without `flexbox` you can [download](https://raw.github.com/matteobertoldo/renderkit/dist/css/renderkit-float.css) the "float" version with Foundation Float Grid.
## License
RenderKit is released under the [MIT](https://opensource.org/licenses/MIT) License.