{"id":15112250,"url":"https://github.com/matteobertoldo/renderkit","last_synced_at":"2025-09-27T15:30:22.784Z","repository":{"id":57353502,"uuid":"74076686","full_name":"matteobertoldo/renderkit","owner":"matteobertoldo","description":"Definitely the light way for start new front-end web projects.","archived":true,"fork":false,"pushed_at":"2018-11-19T12:26:18.000Z","size":1610,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-20T18:23:21.891Z","etag":null,"topics":["foundation","framework","light","scss","uikit"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matteobertoldo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-17T23:31:24.000Z","updated_at":"2023-01-28T16:42:16.000Z","dependencies_parsed_at":"2022-09-13T02:52:28.636Z","dependency_job_id":null,"html_url":"https://github.com/matteobertoldo/renderkit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobertoldo%2Frenderkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobertoldo%2Frenderkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobertoldo%2Frenderkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteobertoldo%2Frenderkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matteobertoldo","download_url":"https://codeload.github.com/matteobertoldo/renderkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219872010,"owners_count":16554482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["foundation","framework","light","scss","uikit"],"created_at":"2024-09-26T00:43:16.186Z","updated_at":"2025-09-27T15:30:20.401Z","avatar_url":"https://github.com/matteobertoldo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RenderKit\n\n\u003e \"Definitely 👌🏽 the light way for start new front-end web projects.\"\n\nFrom a `UI-Kit` up in `production`. A light way for start new front-end web project.\nRenderKit 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.\n\nRenderKit can also be used as styleguide and visual tester for the various `@mixins` installed with sections already ready for use.\n\n[![npm](https://img.shields.io/npm/v/renderkit.svg)](https://www.npmjs.com/package/renderkit)\n[![npm](https://img.shields.io/npm/l/renderkit.svg)](https://www.npmjs.com/package/renderkit)\n\n## Getting started\n\nInstall via NPM\n\n```bash\nnpm install renderkit\n```\n\n## SCSS Package\n\nThe following tools are included in the `scss` package:\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eCROSS BROWSING\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://github.com/necolas/normalize.css\"\u003e\n              Normalize v.8.0.0\n            \u003c/a\u003e\n            Extended and rewritten in \u003ccode\u003escss\u003c/code\u003e. Configurable, in complete safety.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eBREAKPOINTS\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://foundation.zurb.com/sites/docs/media-queries.html#changing-the-breakpoints\"\u003e\n                Foundation Breakpoint\n            \u003c/a\u003e\n            with \u003ccode\u003eemless\u003c/code\u003e output. (For pixel lovers).\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eGRID SYSTEM\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u0026middot;\n            \u003ca href=\"https://foundation.zurb.com/sites/docs/xy-grid.html\"\u003e\n                Foundation XY-Grid\n            \u003c/a\u003e\n            with \u003ccode\u003eremless\u003c/code\u003e output for the gutters, with all mixin for \u003ca href=\"https://foundation.zurb.com/sites/docs/xy-grid.html#building-semantically\"\u003ebuilding semantically\u003c/a\u003e. \u003cbr /\u003e\n            \u0026middot;\n            \u003ca href=\"https://foundation.zurb.com/sites/docs/grid.html\"\u003e\n                Foundation Float Grid\n            \u003c/a\u003e\n            with \u003ccode\u003eremless\u003c/code\u003e output for the gutters, with all mixin for \u003ca href=\"https://foundation.zurb.com/sites/docs/grid.html#building-semantically\"\u003ebuilding semantically\u003c/a\u003e.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eTYPOGRAPHY\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u0026middot;\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-global-fonts\"\u003e\n                Mixin\n            \u003c/a\u003e\n            for \u003ccode\u003e@font-face\u003c/code\u003e rules \u0026 Google Fonts. \u003cbr/\u003e\n            \u0026middot;\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#typography-mixin-headers-style-bp\"\u003e\n                Headers responsive\n            \u003c/a\u003e\n            with a \u003ccode\u003escss\u003c/code\u003e map to draw up every single header in every \u003ccode\u003ebreakpoint\u003c/code\u003e.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eFLEXBOX\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://foundation.zurb.com/sites/docs/flexbox-utilities.html\"\u003e\n                Foundation Flexbox Utilities\n            \u003c/a\u003e\n            (The ability to enable or disable \u003ccode\u003eflex-source-ordering\u003c/code\u003e has been added.)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eFORM\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u0026middot;\n            Powerful \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-form-style\"\u003emixin\u003c/a\u003e to styling up all cross browsing fields. \u003cbr /\u003e\n            \u0026middot;\n            Powerful \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-checkbox-radio-classes\"\u003emixin\u003c/a\u003e to styling up checkbox \u0026 radio without \u003ccode\u003ejs\u003c/code\u003e. Available with \u003cstrong\u003ebuilding semantically\u003c/strong\u003e.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eACCESSIBILITY\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u0026middot;\n            Accessibility \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#mixin-accessibility-classes\"\u003eclasses\u003c/a\u003e \u003cbr/\u003e\n            \u0026middot;\n            Layout \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#layout-mixin\"\u003emixins\u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003ePALETTE\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-colors-palette\"\u003e\n                Mixin\n            \u003c/a\u003e\n            for manage all palette colors via \u003ccode\u003escss\u003c/code\u003e map.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003eSHAPES\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#shapes-mixin\"\u003eMixins\u003c/a\u003e\n            with \u003cstrong\u003ebuilding semantically\u003c/strong\u003e \u0026amp; \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-shape-classes\"\u003eclasses\u003c/a\u003e to generate shapes without images.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003ePROTOTYPING\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u0026middot;\n            \u003ca href=\"https://foundation.zurb.com/sites/docs/visibility.html\"\u003e\n                Foundation visibility classes\n            \u003c/a\u003e \u003cbr /\u003e\n            \u0026middot;\n            \u003ca href=\"https://foundation.zurb.com/sites/docs/typography-helpers.html#text-alignment\"\u003e\n                Foundation text alignment\n            \u003c/a\u003e \u003cbr /\u003e\n            \u0026middot;\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#typography-mixin-text-transform-classes\"\u003eText transformation classes\u003c/a\u003e \u003cbr /\u003e\n            \u0026middot;\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-float-classes\"\u003eFloat classes\u003c/a\u003e \u003cbr /\u003e\n            \u0026middot;\n            \u003ca href=\"https://matteobertoldo.github.io/renderkit/sassdoc/index.html#_global%20renderkit-mixin-clearfix-classes\"\u003eClearfix classes\u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cstrong\u003ePRINT\u003c/strong\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003ca href=\"https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css\"\u003eMedia Print\u003c/a\u003e\n            from original \u003ccode\u003eHTML5\u003c/code\u003e boilerplate.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n**Important notes:**\nall 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.\n\nIf you want to completely use all the accessibility features present, you need to install [what-input](https://github.com/ten1seven/what-input).\nFor all `scss` **documentation** visit [this](https://matteobertoldo.github.io/renderkit/sassdoc/index.html) page.\n\nEach `scss` RenderKit file is fully compatible with [sass-doc](http://sassdoc.com). You can also install the complete documentation locally!.\n\n## SCSS Quickly install\nCreate your `scss` file\n\n```scss\n@import 'path/to/renderkit/scss/renderkit';\n@include scss-renderkit;\n```\nImport 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).\n\n## CSS Quickly install\n\nYou can basic [download](https://raw.github.com/matteobertoldo/renderkit/dist/css/renderkit.css) the RenderKit `css` file.\n-   The default `css` RenderKit includes Foundation `XY-Grid` and `Flexbox Utilities` in less than `95KB`.\n-   For a minify version [download](https://raw.github.com/matteobertoldo/renderkit/dist/css/renderkit.css) this file, less than `70KB`.\n\nIf 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.\n\n## License\n\nRenderKit is released under the [MIT](https://opensource.org/licenses/MIT) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobertoldo%2Frenderkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatteobertoldo%2Frenderkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteobertoldo%2Frenderkit/lists"}