{"id":34072995,"url":"https://github.com/mayowaobisesan/eye_css","last_synced_at":"2026-04-18T21:34:33.996Z","repository":{"id":40603578,"uuid":"507730863","full_name":"MayowaObisesan/EYE_CSS","owner":"MayowaObisesan","description":"Eye CSS Official Repository.","archived":false,"fork":false,"pushed_at":"2023-08-28T21:18:32.000Z","size":313,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-25T15:10:23.064Z","etag":null,"topics":["css","python","web"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/eye-css/","language":"Python","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/MayowaObisesan.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}},"created_at":"2022-06-27T01:53:51.000Z","updated_at":"2024-01-12T18:32:27.000Z","dependencies_parsed_at":"2024-01-09T11:25:01.965Z","dependency_job_id":"ffe17298-80f9-4830-93ec-0ed58e65373c","html_url":"https://github.com/MayowaObisesan/EYE_CSS","commit_stats":null,"previous_names":["bmayowa/eye_css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MayowaObisesan/EYE_CSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayowaObisesan%2FEYE_CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayowaObisesan%2FEYE_CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayowaObisesan%2FEYE_CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayowaObisesan%2FEYE_CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MayowaObisesan","download_url":"https://codeload.github.com/MayowaObisesan/EYE_CSS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MayowaObisesan%2FEYE_CSS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27723286,"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","status":"online","status_checked_at":"2025-12-14T02:00:11.348Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","python","web"],"created_at":"2025-12-14T08:32:29.296Z","updated_at":"2025-12-14T08:32:32.224Z","avatar_url":"https://github.com/MayowaObisesan.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"assets\\EYE_CSS_ICON.png\" width=\"256\" height=\"256\" title=\"Eye CSS icon\" alt=\"This is Eye CSS Official Icon. It is displayed in Eye CSS official github repo.\"/\u003e\n\n# EYE CSS\n\nEye css is a **dynamic utility-first css library written in python** which aims to be usable across every design project.\nIt is similar to tailwind css.\n\nEye css is a dynamic and powerful css library to create truly dynamic styles while still simple to use and learn.\n\nEye css is responsive, dynamic, detailed and familiar. Similar to tailwind css in both syntax and operation.\n\n[//]: # (The **utility-first** syntax you are used to is available in eye css with additional features.)\n\nEye css can be used in small and large web projects. Eye css can be used with your single static html file, to dynamic\nlarge web projects.\n\n[//]: # (Eye css is a truly dynamic css library. With support for almost all tailwind css properties, eye.css gives you extra )\n\n[//]: # (flexibility and dynamism. )\n\n[//]: # (Eye css works similar to tailwind css. Eye css watches your *.html, *.js, *.jsx, *.ts, *.tsx files)\n\n[//]: # (for defined css styles which it creates for you on the fly.)\n\n[//]: # ()\n\n[//]: # (Though Eye css library is written in python, it can work with your existing web projects. Whether Angular, react, vue,)\n\n[//]: # (svelte, etc.)\n\n[//]: # (Once you have a python interpreter, Eye css works.)\n\n[//]: # (Eye css works on all platform, windows, mac, linux.)\n\nJust download Eye css or install Eye css and let **Eye** watch your defined files for defined styles.\n\nIt's as simple as that.\n\n## How to use eye css:\n\n### Installation\n\n```commandline\npip install eye-css\n```\n\n#### Create an eye_config.yml file and add the following:\n\n```yaml\neye:\n  input_directory: \"./\"\n  input_extensions: \"*.html\"\n\n  exclude_directory: \".git\"\n  exclude_files: \".gitignore\"\n  \n  scrollbar_width: \"8px\"\n  scrollbar_height: \"8px\" # for horizontal scrolls\n  scrollbar_color: \"lightgray\"\n  scrollbar_color_dark: \"#222222\" # for dark themes\n  scrollbar_track_color: \"lightgray\"\n  scrollbar_color_track_dark: \"#222222\" # for dark themes\n  scrollbar_thumb_color: \"gray\"\n  scrollbar_thumb_color_dark: \"gray\"  # for dark themes\n  scrollbar_thumb_radius: \"8px 8px\"\n```\n\n_**Remember to name the file: eye_config.yml**_\n\n#### To use it with a single javascript file or your favorite javascript library:\n\n```yaml\neye:\n  input_directory: \"./\"\n  input_extensions: \"*.html,*.js,*.jsx,*.ts,*.tsx\"\n\n  exclude_directory: \".git\"\n  exclude_files: \".gitignore\"\n\n  output_name: \"watched_eye.css\"\n```\nNote that there is no space when adding file extensions in input_extensions.\n\nNote that there is not space between the file extensions to parse\nNext, Add \"watched_eye.css\" to the head tag of your base html file.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"watched_eye.css\"/\u003e\n```\n\nOnce installed,\nrun the following command in your terminal\n\n```commandline\npython -m eye_css \"path to eye_config.yml\"\n```\n\nEye css will automatically watch and style your file once you make changes to the defined extensions from\neye_config.yml.\n\n_Note: eye css will not automatically reload your browser or web page on file change,\nit leaves that functionality to existing implementation of such. Examples: **htmx, angular, react, vue, svelte and other \nexisting web frameworks**._\n\n[//]: # ()\n\n[//]: # ([//]: # \u0026#40;\u003cimg alt=\"Proudly Nigeria\" height=\"24px\" src=\"https://img.shields.io/badge/proudly-Nigerian-008751.svg?style=flat\u0026labelColor=FFFFFF\" title=\"Proudly Nigerian Image\" width=\"auto\"/\u003e\u0026#41;)\n\n[//]: # ()\n\n[//]: # ()\n\n[//]: # ([//]: # \u0026#40;HOW EYE CSS WORKS\u0026#41;)\n\n[//]: # (EYE.css parsing follows a defined approach for proper, effective and desirable result.)\n\n[//]: # (The Order of Precedence for declaring inline-css is:)\n\n[//]: # ()\n\n[//]: # (_**`.media-queries:pseudo-classes:pseudo-selectors:bare-css-classes`**_)\n\n[//]: # ()\n\n[//]: # (**Example:**)\n\n[//]: # ()\n\n[//]: # (* **.sm:placeholder:hover:color-blue**)\n\n[//]: # (* **.md:after:hover:bg-light**)\n\n[//]: # (* **.md:placeholder:focus:pct:w-100**)\n\n[//]: # (* **.lg:pct:w-100**)\n\n[//]: # ()\n\n[//]: # ()\n\n[//]: # ([//]: # \u0026#40;JULY 25, 2022.\u0026#41;)\n\n[//]: # ()\n\n[//]: # (## The First Dynamic CSS Framework.)\n\n[//]: # ()\n\n[//]: # (It checks, It Parses, It creates your css files.)\n\n[//]: # ()\n\n[//]: # (Just declare the css-strings. Leave the rest to eye.)\n\n[//]: # ()\n\n[//]: # (How it works.)\n\n[//]: # ()\n\n[//]: # ()\n\n[//]: # (## Understanding when to use pipe in pseudo-base-css-classes.)\n\n[//]: # ([//]: # \u0026#40;- August 16, 2022.\u0026#41;)\n\n[//]: # (To use pipe in pseudo-base-css-classes means a new complete property of the defined style is being parsed.)\n\n[//]: # (e.g., )\n\n[//]: # (1. **transform:translate-x-15px|rotate-z-30deg|perspective-35px**; means translate-x-15px is a complete property of transform pseudo-base-css-class)\n\n[//]: # (2. **shadow:10px-3px-4px-ABCDEB|-15px--3px-8px-2px-yellowgreen|inset-3px--4px-14px-12px-E7E7E7**; means that 10px-3px-4px-ABCDEF is a complete box-shadow property,-15px--3px-8px-2px-yellowgreen is another complete box-shadow property, and so on.)\n\n[//]: # (3. **conic-gradient:red_0deg-_orange_90deg-_yellow_180deg-_green_270deg-_blue_360deg**; means that **red_0deg-_orange_90deg-_yellow_180deg-_green_270deg-_blue_360deg** is a complete conic-gradient property and so on.)\n\n[//]: # (4. **transition:width_2s_linear_1s|height_2s|background-color_4s_ease-in-out_3s** means that width_2s is a complete transition property i.e., **transition: width 2s linear 1s, height 2s, background-color 4s ease-in-out 3s;**)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayowaobisesan%2Feye_css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayowaobisesan%2Feye_css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayowaobisesan%2Feye_css/lists"}