{"id":15041778,"url":"https://github.com/kornil/cssimply","last_synced_at":"2026-01-06T16:51:44.955Z","repository":{"id":85425985,"uuid":"102903975","full_name":"Kornil/cssimply","owner":"Kornil","description":"Lightweight css framework","archived":false,"fork":false,"pushed_at":"2017-10-15T23:07:08.000Z","size":58,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T01:22:21.963Z","etag":null,"topics":["css-framework","css3","scss","scss-framework","webpack"],"latest_commit_sha":null,"homepage":null,"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/Kornil.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-08T20:59:19.000Z","updated_at":"2017-12-17T19:18:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"e817220d-a1af-43d6-8e64-ce2112c72824","html_url":"https://github.com/Kornil/cssimply","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kornil%2Fcssimply","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kornil%2Fcssimply/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kornil%2Fcssimply/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kornil%2Fcssimply/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kornil","download_url":"https://codeload.github.com/Kornil/cssimply/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245822389,"owners_count":20678165,"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":["css-framework","css3","scss","scss-framework","webpack"],"created_at":"2024-09-24T20:46:28.200Z","updated_at":"2026-01-06T16:51:44.897Z","avatar_url":"https://github.com/Kornil.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simply\n## CSS framework\n\nCssimply is a really lightweight functional css framework I created to speed up developing my projects.\n\n\n## How to install\n\nTo install it is really simple, just add it from your package manager of choice\n\n```\n# for npm\nnpm i -S cssimply\n\n# for yarn\nyarn add cssimply\n```\n\nTO GET ONLY THE CLASSES\n\nImport the dependency on whatever JavaScript file you want, I suggest using a root file so every children will inherit the style from this package.\n\n`import 'cssimply';` is all that is required, really simple, this will import a minified `css` file with all the needed classes to jumpstart you project.\n\n\nTO GET VARIABLES AND CLASSES\n\nYou will need to have `scss` enabled on your project, from a `scss` file just add\n\n```\n@import '/path-to-root-folder/node_modules/cssimply/src/style.scss';`\n```\n\nthis will give you all the classes and the scss variables explained below.\n\n\n# Sections\n\nThis first implementation is divided into 4 main parts:\n\n\n\n## Reset\ncontains a small reset to make all browsers output the same default style, nothing worth mentioning, the style is attached to the base html elements.\n\n\n\n## Spacings\ncontains padding and margin classes, the base value is 8 and every other value used is multiplicative of this base value (or divided from this).\n\n\n### variables\n\nAll variables in /spacings are values in px, multiplicative starting from 8px\n\n- ***$spacing-1*** 8px\n- ***$spacing-2*** 16px\n\nand so on for ***4***, ***5***, ***6***, ***7***, ***10***, ***14***, special mentions:\n\n- ***$spacing-half*** 4px\n- ***$spacing-m1*** -8px\n- ***$spacing-m2*** -16px\n- ***$spacing-m3*** -24px\n\n\n### classes\n\n**prefixes**\n\n- ***m--*** margin\n- ***mt--*** margin-top\n- ***mb--*** margin-bottom\n- ***ml--*** margin-left\n- ***mr--*** margin-right\n- ***mv--*** margin-top margin-bottom\n- ***mh--*** margin-left margin-right\n\npaddings works the same exact way using ***p*** instead of ***m***\n\n**suffixes**\n\n- ***0*** 0px\n- ***1*** 8px\n- ***2*** 16px\n\nYou know the drill, other numbers available are ***3***, ***4***, ***5***, ***6***, ***7***, ***10***, ***14***.\nOther special suffixes are:\n\n- ***half*** 4px\n- ***m1***, ***m2***, ***m3*** are also available for -8px, -16px and -24px\n\n```\n// example\n\u003ch1 class=\"p--1 mv--3 pb--half\"\u003eHello world!\u003c/h1\u003e\n```\nthis will apply this style to the component:\n```\npadding: 8px;\nmargin-top: 24px;\nmargin-bottom: 24x;\npadding-bottom: 4px;\n```\n\n\n\n## Colors\n\nColors come from https://flatuicolors.com/ there isn't much to say for now.\n\n\n### variables\n\nvaribale names are the same on the website lowercase and `lisp-case`.\n\n- ***$peter-river*** #3498db\n\nyou can imagine the rest, special mention ***$black*** and ***$white***, try to guess these too.\n\n\n### classes\n\n\n**prefixes**\n\nonly 3 prefixes:\n\n- ***text--*** for color\n- ***bg--*** background-color\n- ***br--*** border-color\n\n\n**suffixes**\n\nsimply the color variables names without the `$`.\n\n\n```\n// example\n\u003ch1 class=\"text--orange bg--emerald\"\u003eHello world!\u003c/h1\u003e\n```\nthis will apply this style to the component:\n```\ncolor: #f39c12;\nbackground-color: #2ecc71;\n```\n\n\n\n## Layout\n\nThis section does not have variables, only classes\n\n### classes\n\nMost are self explanatory:\n\n- ***relative*** `position: relative`\n- ***absolute*** `position: absolute`\n- together with ***fixed*** and ***static***\n\n- ***hidden*** is `visibility: hidden`, DOES NOT include display: none\n\nfor display the classes start with\n\n- ***ds--*** plus the display value, ***ds-inline-block*** adds `display: inline-block`\n\n- ***clear***, ***pull-left***, ***pull-right*** are the same as bootstrap,\n`clear: both`, `float: left`, `float: right`.\n\n- ***br*** `border: 1px solid` apply colors with color classes\n- ***rounded*** `border-radius: 4px`\n- ***circle*** `border-radius: 50%`\n\nLastly the grid system implemented using the new CSS Grid, uses a standard 12 column layout.\n\n- ***grid*** is the wrapper class required for using columns.\n- from ***col-1*** to ***col-12*** all the column classes\n\n```\n// example\n\u003cdiv class=\"grid\"\u003e\n    \u003cdiv class=\"col-6\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-3\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-1\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkornil%2Fcssimply","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkornil%2Fcssimply","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkornil%2Fcssimply/lists"}