{"id":15112003,"url":"https://github.com/leecheneler/easy-css","last_synced_at":"2025-09-27T14:31:40.974Z","repository":{"id":57218365,"uuid":"77554809","full_name":"LeeCheneler/easy-css","owner":"LeeCheneler","description":"A simple ITCSS \u0026 BEM CSS framework written in Sass","archived":true,"fork":false,"pushed_at":"2017-07-24T21:50:56.000Z","size":188,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-15T09:40:53.406Z","etag":null,"topics":["bem","itcss","sass","sass-framework"],"latest_commit_sha":null,"homepage":"https://leecheneler.github.io/easy-css/demo/","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/LeeCheneler.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-12-28T19:00:57.000Z","updated_at":"2024-12-14T16:07:20.000Z","dependencies_parsed_at":"2022-08-28T21:01:59.352Z","dependency_job_id":null,"html_url":"https://github.com/LeeCheneler/easy-css","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeCheneler%2Feasy-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeCheneler%2Feasy-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeCheneler%2Feasy-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeeCheneler%2Feasy-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeeCheneler","download_url":"https://codeload.github.com/LeeCheneler/easy-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234443999,"owners_count":18833643,"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":["bem","itcss","sass","sass-framework"],"created_at":"2024-09-26T00:40:54.357Z","updated_at":"2025-09-27T14:31:40.582Z","avatar_url":"https://github.com/LeeCheneler.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# easy-css\n![Travis CI build status](https://travis-ci.org/LeeCheneler/easy-css.svg?branch=master)\n![Latest npmjs version](https://badge.fury.io/js/easy-css.svg)\n\neasy-css is a simple, layout only ITCSS and BEMIT SASS framework. It does not extend beyond the object layer in ITCSS and so has no visual styling.\n\n#### Demo\n[https://leecheneler.github.io/easy-css/demo/](https://leecheneler.github.io/easy-css/demo/)\n\n## Getting Started\n\neasy-css is designed to be extended, not consumed. If you just compiled and used it in your site you will find that you hit specificity issues when placing your own CSS beneath it.\n\n#### Install easy-css\n```\nnpm install easy-css --save\n```\n\n#### Setup ITCSS Folders\nYou need to set up your own ITCSS architecture within your app. Then import each layer of easy-css into each of your layers one by one to serve as the bedrock of you ITCSS project.\n\n##### src/sass/_base.scss\n```\n@import 'easy-css/base';\n```\n\n##### src/sass/_objects.scss\n```\n@import 'easy-css/objects';\n```\n\n##### src/sass/_resets.scss\n```\n@import 'easy-css/resets';\n```\n\n##### src/sass/_settings.scss\n```\n@import 'easy-css/settings';\n```\n\n##### src/sass/_tools.scss\n```\n@import 'easy-css/tools';\n```\n\n##### src/sass/_utilities.scss\n```\n@import 'easy-css/utilities';\n```\n\n##### src/sass/main.scss\n```\n@import 'settings';\n@import 'tools';\n@import 'resets';\n@import 'base';\n@import 'objects';\n@import 'utilities';\n```\n\n#### Compiling You SASS\nThis library won't have widespread use so I'm going to assume you're familiar with webpack and how to load CSS via it. (I recommend css-loader/postcss-loader/sass-loader).\n\nHere is some example config to configure webpack:\n```\n{\n  // Load .scss and .css files through the following loaders:\n    // - sass-loader (compiles sass to css)\n    // - postcss-loader (applies autoprefixer plugin to css)\n    // - css-loader\n    // - loads css as plain text\n  // Then the ExtractTextPlugin swallows the output and injects it as a css file on the web page\n  test: /\\.s?css$/,\n  use: ExtractTextPlugin.extract({\n    fallback: 'style-loader',\n    use: [\n      {\n        loader: 'css-loader'\n      },\n      {\n        loader: 'postcss-loader',\n        options: {\n          plugins: () =\u003e [\n            autoprefixer({\n              browsers: ['last 2 versions', 'ie 9-11']\n            })\n          ]\n        }\n      },\n      {\n        loader: 'sass-loader',\n        options: {\n          includePaths: [\n            path.resolve(__dirname, './node_modules/easy-css')\n          ]\n        }\n      }\n    ]\n  })\n},\n```\n\n## Inspiration\nGreat inspiration was taken from the [nebula-css](https://github.com/rbrtsmith/nebula-css) framework written by a great CSS author Robert Smith. He's been a great mentor throughout its development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecheneler%2Feasy-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleecheneler%2Feasy-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecheneler%2Feasy-css/lists"}