{"id":22731351,"url":"https://github.com/sno2/easycss","last_synced_at":"2026-01-08T10:04:12.033Z","repository":{"id":112569006,"uuid":"303690342","full_name":"sno2/easyCSS","owner":"sno2","description":null,"archived":false,"fork":false,"pushed_at":"2020-10-13T12:08:32.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-05T03:28:22.661Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sno2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-10-13T12:08:24.000Z","updated_at":"2024-01-02T11:53:02.000Z","dependencies_parsed_at":"2023-05-16T08:45:20.967Z","dependency_job_id":null,"html_url":"https://github.com/sno2/easyCSS","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/sno2%2FeasyCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sno2%2FeasyCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sno2%2FeasyCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sno2%2FeasyCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sno2","download_url":"https://codeload.github.com/sno2/easyCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246264692,"owners_count":20749504,"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":[],"created_at":"2024-12-10T19:21:40.492Z","updated_at":"2026-01-08T10:04:11.986Z","avatar_url":"https://github.com/sno2.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\ntan taram tarammam bam taram traram\n\nWelcome To easyCSS 2.0\nadding many new cool things! just go look!\n \n# How To Start\nFirst you need to link it to you're page and you're done. \n```html\n \u003clink rel=\"stylesheet\" href=\"http://easycss.netlify.app/easycss.css\"\u003e\n```\n\n# The New Class Names\n\n# Hover Effects\n```html\n\u003cdiv class=\"block right hover-bg\"\u003e\n        \u003ch3\u003eExample\u003c/h3\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        \u003c/p\u003e\n    \u003c/div\u003e\n\n\u003ch1 class=\"hover-text-lg\"\u003eexample\u003c/h1\u003e\n\u003ch1 class=\"hover-text-md\"\u003eexample\u003c/h1\u003e\n\u003ch1 class=\"hover-text-sm\"\u003eexample\u003c/h1\u003e\n\n\u003ch1 class=\"hover\"\u003eexample\u003c/h1\u003e\n```\n\n# header\n```html\n\u003cdiv class=\"nheader-light\"\u003e\n        \u003cdiv class=\"content\"\u003e\n            \u003cdiv class=\"brand\"\u003e\u003ca href=\"#\"\u003eeasyCSS\u003c/a\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"links\"\u003e\n            \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"#\"\u003eAbout\u003c/a\u003e\n            \u003ca href=\"#\"\u003eContact\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003cdiv class=\"nheader-dark\"\u003e\n        \u003cdiv class=\"content\"\u003e\n            \u003cdiv class=\"brand\"\u003e\u003ca href=\"#\"\u003eeasyCSS\u003c/a\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"links\"\u003e\n            \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"#\"\u003eAbout\u003c/a\u003e\n            \u003ca href=\"#\"\u003eContact\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003cdiv class=\"nheader\"\u003e\n        \u003cdiv class=\"content\"\u003e\n            \u003cdiv class=\"brand\"\u003e\u003ca href=\"#\"\u003eeasyCSS\u003c/a\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"links\"\u003e\n            \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"#\"\u003eAbout\u003c/a\u003e\n            \u003ca href=\"#\"\u003eContact\u003c/a\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n\n# bShow \n```html\n\u003cdiv class=\"bshow sh-5\"\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003ch1 class=\"hover-text-lg\"\u003ebShow\u003c/h1\u003e\n        \u003cp\u003eLorem ipsum dolor sit amet consectetur\u003cspan class=\"badge badge-primary\"\u003e7\u003c/span\u003e adipisicing elit. Quaerat ex debitis aut at culpa a odit magni consequatur, autem, dolore, cupiditate perspiciatis vitae ratione pariatur accusamus in amet ut aperiam.\u003c/p\u003e\n        \u003cbutton class=\"btn-outline-light\"\u003eGet Started\u003c/button\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n```\n\n# border\n.b-x1\u003cbr\u003e\n.b-x2\u003cbr\u003e\n.b-x3\u003cbr\u003e\n.b-x4\u003cbr\u003e\n.b-x5\u003cbr\u003e\n.b-x6\u003cbr\u003e\n.b-x7\u003cbr\u003e\n.b-x8\u003cbr\u003e\n.b-x9\u003cbr\u003e\n.b-xXL\u003cbr\u003e\n\n# border-left\n.b-l-x1\u003cbr\u003e\n.b-l-x2\u003cbr\u003e\n.b-l-x3\u003cbr\u003e\n.b-l-x4\u003cbr\u003e\n.b-l-x5\u003cbr\u003e\n.b-l-x6\u003cbr\u003e\n.b-l-x7\u003cbr\u003e\n.b-l-x8\u003cbr\u003e\n.b-l-x9\u003cbr\u003e\n.b-l-xXL\u003cbr\u003e\n\n# border-right\n.b-r-x1\u003cbr\u003e\n.b-r-x2\u003cbr\u003e\n.b-r-x3\u003cbr\u003e\n.b-r-x4\u003cbr\u003e\n.b-r-x5\u003cbr\u003e\n.b-r-x6\u003cbr\u003e\n.b-r-x7\u003cbr\u003e\n.b-r-x8\u003cbr\u003e\n.b-r-x9\u003cbr\u003e\n.b-r-xXL\u003cbr\u003e\n\n# border-top\n.b-t-x1\u003cbr\u003e\n.b-t-x2\u003cbr\u003e\n.b-t-x3\u003cbr\u003e\n.b-t-x4\u003cbr\u003e\n.b-t-x5\u003cbr\u003e\n.b-t-x6\u003cbr\u003e\n.b-t-x7\u003cbr\u003e\n.b-t-x8\u003cbr\u003e\n.b-t-x9\u003cbr\u003e\n.b-t-xXL\u003cbr\u003e\n\n# border-bottom\n.b-b-x1\u003cbr\u003e\n.b-b-x2\u003cbr\u003e\n.b-b-x3\u003cbr\u003e\n.b-b-x4\u003cbr\u003e\n.b-b-x5\u003cbr\u003e\n.b-b-x6\u003cbr\u003e\n.b-b-x7\u003cbr\u003e\n.b-b-x8\u003cbr\u003e\n.b-b-x9\u003cbr\u003e\n.b-b-xXL\u003cbr\u003e\n\n# tags\n```html\n\u003ch1-red\u003eblablabla\u003c/h1-red\u003e\n\u003ch1-green\u003eblablabla\u003c/h1-green\u003e\n\u003ch1-yellow\u003eblablabla\u003c/h1-yellow\u003e\n\u003ch1-blue\u003eblablabla\u003c/h1-blue\u003e\n\u003ch1-primary\u003eblablabla\u003c/h1-primary\u003e\n```\n\n# blockquote\n\n```html\n\u003cblockquote class=\"x2\"\u003e\n    I'm a blockquote\n\u003c/blockquote\u003e \n```\n\n# breadcrumb\n\n```html\n\u003cdiv class=\"breadcrumb\"\u003e\n    \u003ch4 class=\"bc-items\"\u003e\u003cspan class=\"bc-item hover-text-md\"\u003e\u003ca href=\"#\"\u003ewhy?\u003c/a\u003e\u003c/span\u003e \u003cspan class=\"bc-slash\"\u003e/\u003c/span\u003e \u003cspan class=\"bc-item\"\u003e\u003ca href=\"#\"\u003econtact\u003c/a\u003e\u003c/span\u003e \u003cspan class=\"bc-slash\"\u003e/\u003c/span\u003e \u003cspan class=\"bc-act-item\"\u003e\u003ca href=\"#\"\u003eabout\u003c/a\u003e\u003c/span\u003e\u003c/h4\u003e\n\u003c/div\u003e\n```\n\n# Shadow System\n\n\u003cul\u003e\n\u003cli\u003eSh-0\u003c/li\u003e\n\u003cli\u003eSh-1\u003c/li\u003e\n\u003cli\u003eSh-1-half\u003c/li\u003e\n\u003cli\u003eSh-2\u003c/li\u003e\n\u003cli\u003eSh-3\u003c/li\u003e\n\u003cli\u003eSh-4\u003c/li\u003e\n\u003cli\u003eSh-5\u003c/li\u003e\n\u003c/ul\u003e\n\n# New Backgrounds\n\u003cul\u003e\n\u003cli\u003ebg-dark\u003c/li\u003e\n\u003cli\u003ebg-light\u003c/li\u003e\n\u003c/ul\u003e\n\n# Cards\n```html\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col s12 m6\"\u003e\n      \u003cdiv class=\"card auto large darken-1\"\u003e\n        \u003cdiv class=\"card-content white-text\"\u003e\n          \u003cspan class=\"card-title\"\u003eCard Title\u003c/span\u003e\n          \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit. Quidem facilis aperiam, illum harum reprehenderit nemo, in maiores voluptates totam nulla id blanditiis possimus quos ratione necessitatibus quaerat odio quia obcaecati.\u003c/p\u003e\n          \u003cp\u003eLorem ipsum dolor, sit amet consectetur adipisicing elit. Quia eos soluta animi dolor nostrum, iusto fuga culpa odit illo quam asperiores nam. Atque magni cum asperiores, harum natus impedit nostrum.\u003c/p\u003e\n          \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit. Illum dolorem aspernatur laborum doloremque accusamus labore, obcaecati similique repudiandae! Quos excepturi corrupti, explicabo culpa nobis ab! Cupiditate doloribus autem rem quasi.\u003c/p\u003e\n          \u003cp\u003eLorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam quas veniam eligendi commodi possimus repellat tempore, optio vero odio corporis quae consequatur dolores hic maxime porro ducimus delectus error magni!\u003c/p\u003e\n          \u003cp\u003eLorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam quas veniam eligendi commodi possimus repellat tempore, optio vero odio corporis quae consequatur dolores hic maxime porro ducimus delectus error magni!\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"card-action\"\u003e\n          \u003ca href=\"#\"\u003eThis is a link\u003c/a\u003e\n          \u003ca href=\"#\"\u003eThis is a link\u003c/a\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n```\n# Some normal stuff\n.auto\u003cbr\u003e\n.hide\u003cbr\u003e\n\n# Some New Text stuff\n.c-light\u003cbr\u003e\n.c-dark\u003cbr\u003e\n.c-secondary\u003cbr\u003e\n.grey-text\u003cbr\u003e\n.white-text\u003cbr\u003e\n.light\u003cbr\u003e\n.thin\u003cbr\u003e\n.auto\u003cbr\u003e\n\n# Other\n.circle\u003cbr\u003e\n.center-block\u003cbr\u003e\n.btn-large\u003cbr\u003e\n.btn-small\u003cbr\u003e\n.c1\u003cbr\u003e\n\n# Radio Buttons\n```html\n\u003cform action=\"#\"\u003e\n    \u003cp\u003e\n      \u003clabel\u003e\n        \u003cinput name=\"group\" type=\"radio\" checked /\u003e\n        \u003cspan\u003eGreen\u003c/span\u003e\n      \u003c/label\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\n      \u003clabel\u003e\n        \u003cinput name=\"group\" type=\"radio\" /\u003e\n        \u003cspan\u003eYellow\u003c/span\u003e\n      \u003c/label\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\n      \u003clabel\u003e\n        \u003cinput class=\"with-gap\" name=\"group\" type=\"radio\"  /\u003e\n        \u003cspan\u003eGreen\u003c/span\u003e\n      \u003c/label\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\n      \u003clabel\u003e\n        \u003cinput name=\"group\" type=\"radio\" disabled=\"disabled\" /\u003e\n        \u003cspan\u003edisabled\u003c/span\u003e\n      \u003c/label\u003e\n    \u003c/p\u003e\n  \u003c/form\u003e\n```\n# Input Range\n```html\n\u003cinput type=\"range\" name=\"\" id=\"\"\u003e\n```\n# Images\n.img-lg\u003cbr\u003e\n.img-md\u003cbr\u003e\n.img-sm\u003cbr\u003e\n.img-circle\u003cbr\u003e\n.img-half-circle\u003cbr\u003e\n.img-flat\u003cbr\u003e\n\n# Width\n.width-hs\u003cbr\u003e\n.width-fs\u003cbr\u003e\n.width-sm\u003cbr\u003e\n\n# Border Radius\n.b-15\u003cbr\u003e\n.b-20\u003cbr\u003e\n.b-23\u003cbr\u003e\n.b-25\u003cbr\u003e\n.b-30\u003cbr\u003e\n.b-35\u003cbr\u003e\n.b-circle\u003cbr\u003e\n.b-h-circle\u003cbr\u003e\n\n# Font Weight\n.bold\u003cbr\u003e\n.bolder\u003cbr\u003e\n\n# Font Style\n.ob\u003cbr\u003e\n.italic\u003cbr\u003e\n\n# Lists\nWait where are the lists!\u003cbr\u003e\nOhh yea if you want the lists you need to go to the file called list.md thanks.\n\n# The other class names\n# The Sizes\u003cbr\u003e\nx1 = 1rem\u003cbr\u003e\nx2 = 2rem\u003cbr\u003e\nx3 = 3rem\u003cbr\u003e\nx4 = 4rem\u003cbr\u003e\nx5 = 5rem\u003cbr\u003e\nx6 = 6rem\u003cbr\u003e\nx7 = 7rem\u003cbr\u003e\nx8 = 8rem\u003cbr\u003e\nx9 = 9rem\u003cbr\u003e\nxXL = 10rem\u003cbr\u003e\n\n# Padding\u003cbr\u003e\np-x1 = padding 1rem\u003cbr\u003e\np-x2 = padding 2rem\u003cbr\u003e\np-x3 = padding 3rem\u003cbr\u003e\np-x4 = padding 4rem\u003cbr\u003e\np-x5= padding 5rem\u003cbr\u003e\np-x6 = padding 6rem\u003cbr\u003e\np-x7 = padding 7rem\u003cbr\u003e\np-x8 = padding 8rem\u003cbr\u003e\np-x9 = padding 9rem\u003cbr\u003e\np-xXL = padding 10rem\u003cbr\u003e\n\n\n# Padding right\u003cbr\u003e\np-r-x1 = 1rem\u003cbr\u003e\np-r-x2 = 2rem\u003cbr\u003e\np-r-x3 = 3rem\u003cbr\u003e\np-r-x4 = 4rem\u003cbr\u003e\np-r-x5 = 5rem\u003cbr\u003e\np-r-x6 = 6rem\u003cbr\u003e\np-r-x7 = 7rem\u003cbr\u003e\np-r-x8 = 8rem\u003cbr\u003e\np-r-x9 = 9rem\u003cbr\u003e\np-r-xXL = 10rem\u003cbr\u003e\n\n\n# Padding left\u003cbr\u003e\np-l-x1 = 1rem\u003cbr\u003e\np-l-x2 = 2rem\u003cbr\u003e\np-l-x3 = 3rem\u003cbr\u003e\np-l-x4 = 4rem\u003cbr\u003e\np-l-x5 = 5rem\u003cbr\u003e\np-l-x6 = 6rem\u003cbr\u003e\np-l-x7 = 7rem\u003cbr\u003e\np-l-x8 = 8rem\u003cbr\u003e\np-l-x9 = 9rem\u003cbr\u003e\np-l-xXL = 10rem\u003cbr\u003e\n\n\n# Padding top\u003cbr\u003e\np-t-x1 = 1rem\u003cbr\u003e\np-t-x2 = 2rem\u003cbr\u003e\np-t-x3 = 3rem\u003cbr\u003e\np-t-x4 = 4rem\u003cbr\u003e\np-t-x5 = 5rem\u003cbr\u003e\np-t-x6 = 6rem\u003cbr\u003e\np-t-x7 = 7rem\u003cbr\u003e\np-t-x8 = 8rem\u003cbr\u003e\np-t-x9 = 9rem\u003cbr\u003e\np-t-xXL = 10rem\u003cbr\u003e\n\n\n# Padding bottom\u003cbr\u003e\np-b-x1 = 1rem\u003cbr\u003e\np-b-x2 = 2rem\u003cbr\u003e\np-b-x3 = 3rem\u003cbr\u003e\np-b-x4 = 4rem\u003cbr\u003e\np-b-x5 = 5rem\u003cbr\u003e\np-b-x6 = 6rem\u003cbr\u003e\np-b-x7 = 7rem\u003cbr\u003e\np-b-x8 = 8rem\u003cbr\u003e\np-b-x9 = 9rem\u003cbr\u003e\np-b-xXL = 10rem\u003cbr\u003e\n\n\n# Margin \u003cbr\u003e\nm-x1 = 1rem\u003cbr\u003e\nm-x2 = 2rem\u003cbr\u003e\nm-x3 = 3rem\u003cbr\u003e\nm-x4 = 4rem\u003cbr\u003e\nm-x5 = 5rem\u003cbr\u003e\nm-x6 = 6rem\u003cbr\u003e\nm-x7 = 7rem\u003cbr\u003e\nm-x8 = 8rem\u003cbr\u003e\nm-x9 = 9rem\u003cbr\u003e\nm-xXL = 10rem\u003cbr\u003e\n\n# Margin left\u003cbr\u003e\nm-l-x1 = 1rem\u003cbr\u003e\nm-l-x2 = 2rem\u003cbr\u003e\nm-l-x3 = 3rem\u003cbr\u003e\nm-l-x4 = 4rem\u003cbr\u003e\nm-l-x5 = 5rem\u003cbr\u003e\nm-l-x6 = 6rem\u003cbr\u003e\nm-l-x7 = 7rem\u003cbr\u003e\nm-l-x8 = 8rem\u003cbr\u003e\nm-l-x9 = 9rem\u003cbr\u003e\nm-l-xXL = 10rem\u003cbr\u003e\n\n\n# Margin right\u003cbr\u003e\nm-r-x1 = 1rem\u003cbr\u003e\nm-r-x2 = 2rem\u003cbr\u003e\nm-r-x3 = 3rem\u003cbr\u003e\nm-r-x4 = 4rem\u003cbr\u003e\nm-r-x5 = 5rem\u003cbr\u003e\nm-r-x6 = 6rem\u003cbr\u003e\nm-r-x7 = 7rem\u003cbr\u003e\nm-r-x8 = 8rem\u003cbr\u003e\nm-r-x9 = 9rem\u003cbr\u003e\nm-r-xXL = 10rem\u003cbr\u003e\n\n# Margin top\u003cbr\u003e\nm-t-x1 = 1rem\u003cbr\u003e\nm-t-x2 = 2rem\u003cbr\u003e\nm-t-x3 = 3rem\u003cbr\u003e\nm-t-x4 = 4rem\u003cbr\u003e\nm-t-x5 = 5rem\u003cbr\u003e\nm-t-x6 = 6rem\u003cbr\u003e\nm-t-x7 = 7rem\u003cbr\u003e\nm-t-x8 = 8rem\u003cbr\u003e\nm-t-x9 = 9rem\u003cbr\u003e\nm-t-xXL = 10rem\u003cbr\u003e\n\n# Margin bottom\u003cbr\u003e\nm-b-x1 = 1rem\u003cbr\u003e\nm-b-x2 = 2rem\u003cbr\u003e\nm-b-x3 = 3rem\u003cbr\u003e\nm-b-x4 = 4rem\u003cbr\u003e\nm-b-x5 = 5rem\u003cbr\u003e\nm-b-x6 = 6rem\u003cbr\u003e\nm-b-x7 = 7rem\u003cbr\u003e\nm-b-x8 = 8rem\u003cbr\u003e\nm-b-x9 = 9rem\u003cbr\u003e\nm-b-xXL = 10rem\u003cbr\u003e\n\n# text-aligns\u003cbr\u003e\ncenter \u003cbr\u003e\nright\u003cbr\u003e\nleft\u003cbr\u003e\njustify\u003cbr\u003e\ninherit\u003cbr\u003e\n\n# Header's\u003cbr\u003e\n.header\u003cbr\u003e\n\n# Nav links\u003cbr\u003e\n.nav-link\u003cbr\u003e\n\n# Showcase's\u003cbr\u003e\n.showcase\u003cbr\u003e\n\n# Blocks\u003cbr\u003e\n.block\u003cbr\u003e\n\n# About stuff\u003cbr\u003e\n#main-block\u003cbr\u003e\n#sidebar\u003cbr\u003e\n\n# backgrounds \u003cbr\u003e\nbg-primary\u003cbr\u003e\nbg-green\u003cbr\u003e\nbg-red\u003cbr\u003e\nbg-blue\u003cbr\u003e\nbg-yellow\u003cbr\u003e\n\n# color's\u003cbr\u003e\nc-primary\u003cbr\u003e\nc-green\u003cbr\u003e\nc-red\u003cbr\u003e\nc-blue\u003cbr\u003e\nc-yellow\u003cbr\u003e\n\n# Footer\u003cbr\u003e\n.footer\u003cbr\u003e\n\n# Text Stuff\nupper = uppercase\u003cbr\u003e\nlower = lowercase\u003cbr\u003e\ncaps = caps\u003cbr\u003e\n\n# Fonts\nf-arial = arial\u003cbr\u003e\nf-ht = Helvetica\u003cbr\u003e\nf-ms = monospace\u003cbr\u003e\nf-vd = verdana\u003cbr\u003e\nf-fa = fantasy\u003cbr\u003e\nf-cs = cursive\u003cbr\u003e\nf-cn = courier new\u003cbr\u003e\nf-roboto = roboto\u003cbr\u003e\nf-su = segoe UI\u003cbr\u003e\n\n# How To Make Contact stuff\n```html\n\u003cdiv class=\"contact\"\u003e\n        \u003ch1 class=\"f-ms x2\"\u003e\n            form\n        \u003c/h1\u003e\n        \u003cform action=\"\"\u003e\n            \u003cinput type=\"text\" placeholder=\"Name..\"\u003e\n            \u003cinput type=\"email\" placeholder=\"Email..\" name=\"blu\" id=\"bli\"\u003e\n            \u003ctextarea name=\"nnnn\" placeholder=\"Message..\" id=\"nnnn\" cols=\"30\" rows=\"10\"\u003e\u003c/textarea\u003e\n            \u003cinput type=\"submit\" value=\"Submit\"\u003e\n        \u003c/form\u003e\n    \u003c/div\u003e\n```\n\n# Links\na-primary = This class is only allowed on the a tag--\u003e\n```html\n\u003ca class=\"a-primary\"\u003ethis is a link\u003c/a\u003e\n```\n\na-green = This class is only allowed on the a tag--\u003e\n```html\n\u003ca class=\"a-green\"\u003ethis is a link\u003c/a\u003e\n```\na-red = This class is only allowed on the a tag--\u003e\n```html\n\u003ca class=\"a-red\"\u003ethis is a link\u003c/a\u003e\n```\na-blue = This class is only allowed on the a tag--\u003e\n```html\n\u003ca class=\"a-blue\"\u003ethis is a link\u003c/a\u003e\n```\n\na-yellow = This class is only allowed on the a tag--\u003e\n```html\n\u003ca class=\"a-yellow\"\u003ethis is a link\u003c/a\u003e\n```\n\n# Buttons\nbtn-primary = This class is only allowed on the button tag--\u003e\n```html\n\u003cbutton class=\"btn-primary\"\u003ethis is a button\u003c/button\u003e\n```\nbtn-red = This class is only allowed on the button tag--\u003e\n```html\n\u003cbutton class=\"btn-red\"\u003ethis is a button\u003c/button\u003e\n```\nbtn-green = This class is only allowed on the button tag--\u003e\n```html\n\u003cbutton class=\"btn-green\"\u003ethis is a button\u003c/button\u003e\n```\n\nbtn-yellow = This class is only allowed on the button tag--\u003e\n```html\n\u003cbutton class=\"btn-yellow\"\u003ethis is a button\u003c/button\u003e\n```\n\nbtn-blue = This class is only allowed on the button tag--\u003e\n```html\n\u003cbutton class=\"btn-blue\"\u003ethis is a button\u003c/button\u003e\n```\n# Table's\n.table\u003cbr\u003e\n.table-center\n```html\n\u003ctable class=\"table\"\u003e\n\n\u003c/table\u003e\n```\n```html\n\u003ctable class=\"table-center\"\u003e\n\n\u003c/table\u003e\n```\n\n.head\n```html\n\u003ctable class=\"table-center\"\u003e\n\u003ctr\u003e\n        \u003cth class=\"head\"\u003eName\u003c/th\u003e\n        \u003cth class=\"head\"\u003eAge\u003c/th\u003e\n        \u003cth class=\"head\"\u003eCountry\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n```\n.data\n```html\n\u003ctable class=\"table-center\"\u003e\n    \u003ctr\u003e\n        \u003cth class=\"head\"\u003eName\u003c/th\u003e\n        \u003cth class=\"head\"\u003eAge\u003c/th\u003e\n        \u003cth class=\"head\"\u003eCountry\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd class=\"data\"\u003eDani\u003c/td\u003e\n        \u003ctd class=\"data\"\u003e23\u003c/td\u003e\n        \u003ctd class=\"data\"\u003eAlbania\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd class=\"data\"\u003eDani\u003c/td\u003e\n        \u003ctd class=\"data\"\u003e23\u003c/td\u003e\n        \u003ctd class=\"data\"\u003eAlbania\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n```\nwhe forgot something... checkbox\n# checkbox's\n```html\n\u003clabel class=\"checkbox\"\u003e\n    \u003cinput type=\"checkbox\"\u003e\n    \u003ci class=\"icon-checkbox\"\u003e\u003c/i\u003e\n    Default\n\u003c/label\u003e\n\u003cbr\u003e\n\u003clabel class=\"checkbox\"\u003e\n    \u003cinput type=\"checkbox\" checked\u003e\n    \u003ci class=\"icon-checkbox\"\u003e\u003c/i\u003e\n    Checked\n\u003c/label\u003e\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsno2%2Feasycss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsno2%2Feasycss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsno2%2Feasycss/lists"}