eye-css

Name	eye-css JSON
Version	0.1.6 JSON
	download
home_page	https://github.com/EYE_CSS
Summary	A dynamic utility-first css library written in python
upload_time	2022-12-11 20:10:37
maintainer
docs_url	None
author	Mayowa Obisesan
requires_python
license	LICENSE
keywords	eye css css css library utility-first css python css web eyecss
VCS
bugtrack_url
requirements	No requirements were recorded.
Travis-CI	No Travis.
coveralls test coverage	No coveralls.

            <img 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."/>

# EYE CSS

Eye css is a **dynamic utility-first css library** which aims to be usable across every design project.
It is similar to tailwind css.

Eye css is a dynamic and powerful css library to create truly dynamic styles while still simple to use and learn.

Eye css is responsive, dynamic, detailed and familiar. Similar to tailwind css in both syntax and operation.

[//]: # (The **utility-first** syntax you are used to is available in eye css with additional features.)

Eye css can be used in small and large web projects. Eye css can be used with your single static html file, to dynamic
large web projects.

[//]: # (Eye css is a truly dynamic css library. With support for almost all tailwind css properties, eye.css gives you extra )

[//]: # (flexibility and dynamism. )

[//]: # (Eye css works similar to tailwind css. Eye css watches your *.html, *.js, *.jsx, *.ts, *.tsx files)

[//]: # (for defined css styles which it creates for you on the fly.)

[//]: # ()

[//]: # (Though Eye css library is written in python, it can work with your existing web projects. Whether Angular, react, vue,)

[//]: # (svelte, etc.)

[//]: # (Once you have a python interpreter, Eye css works.)

[//]: # (Eye css works on all platform, windows, mac, linux.)

Just download Eye css or install Eye css and let **Eye** watch your defined files for defined styles.

It's as simple as that.

## How to use eye css:

### Installation

```commandline
pip install eye-css
```

#### Create an eye_config.yml file and add the following:

```yaml
eye:
  input_directory: "./"
  input_extensions: "*.html"

  exclude_directory: ".git"
  exclude_files: ".gitignore"
```

_**Remember to name the file: eye_config.yml**_

#### To use it with a single javascript file or your favorite javascript library:

```yaml
eye:
  input_directory: "./"
  input_extensions: "*.html,*.js,*.jsx,*.ts,*.tsx"

  exclude_directory: ".git"
  exclude_files: ".gitignore"

  output_name: "watched_eye.css"
```

Note that there is not space between the file extensions to parse
Next, Add "watched_eye.css" to the head tag of your base html file.

```html
<link rel="stylesheet" href="watched_eye.css"/>
```

Once installed,
run the following command in your terminal

```commandline
python -m eye_css "path to eye_config.yml"
```

Eye css will automatically watch and style your file once you make changes to the defined extensions from
eye_config.yml.

_Note: eye css will not automatically reload your browser or web page on file change,
it leaves that functionality to existing implementation of such. Examples: **htmx, angular, react, vue, svelte and other 
existing web frameworks**._

[//]: # ()

[//]: # ([//]: # &#40;<img alt="Proudly Nigeria" height="24px" src="https://img.shields.io/badge/proudly-Nigerian-008751.svg?style=flat&labelColor=FFFFFF" title="Proudly Nigerian Image" width="auto"/>&#41;)

[//]: # ()

[//]: # ()

[//]: # ([//]: # &#40;HOW EYE CSS WORKS&#41;)

[//]: # (EYE.css parsing follows a defined approach for proper, effective and desirable result.)

[//]: # (The Order of Precedence for declaring inline-css is:)

[//]: # ()

[//]: # (_**`.media-queries:pseudo-classes:pseudo-selectors:bare-css-classes`**_)

[//]: # ()

[//]: # (**Example:**)

[//]: # ()

[//]: # (* **.sm:placeholder:hover:color-blue**)

[//]: # (* **.md:after:hover:bg-light**)

[//]: # (* **.md:placeholder:focus:pct:w-100**)

[//]: # (* **.lg:pct:w-100**)

[//]: # ()

[//]: # ()

[//]: # ([//]: # &#40;JULY 25, 2022.&#41;)

[//]: # ()

[//]: # (## The First Dynamic CSS Framework.)

[//]: # ()

[//]: # (It checks, It Parses, It creates your css files.)

[//]: # ()

[//]: # (Just declare the css-strings. Leave the rest to eye.)

[//]: # ()

[//]: # (How it works.)

[//]: # ()

[//]: # ()

[//]: # (## Understanding when to use pipe in pseudo-base-css-classes.)

[//]: # ([//]: # &#40;- August 16, 2022.&#41;)

[//]: # (To use pipe in pseudo-base-css-classes means a new complete property of the defined style is being parsed.)

[//]: # (e.g., )

[//]: # (1. **transform:translate-x-15px|rotate-z-30deg|perspective-35px**; means translate-x-15px is a complete property of transform pseudo-base-css-class)

[//]: # (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.)

[//]: # (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.)

[//]: # (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;**)

            

Raw data

            {
    "_id": null,
    "home_page": "https://github.com/EYE_CSS",
    "name": "eye-css",
    "maintainer": "",
    "docs_url": null,
    "requires_python": "",
    "maintainer_email": "",
    "keywords": "Eye CSS,CSS,CSS Library,Utility-First CSS,Python CSS,Web EyeCSS",
    "author": "Mayowa Obisesan",
    "author_email": "Mayowa Obisesan <mayowaobi74@gmail.com>",
    "download_url": "https://files.pythonhosted.org/packages/74/ee/2d1d641a8c7bc741c7db547fb2e015ed2ed38420b13d26838c92c75acc03/eye_css-0.1.6.tar.gz",
    "platform": null,
    "description": "<img 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.\"/>\r\n\r\n# EYE CSS\r\n\r\nEye css is a **dynamic utility-first css library** which aims to be usable across every design project.\r\nIt is similar to tailwind css.\r\n\r\nEye css is a dynamic and powerful css library to create truly dynamic styles while still simple to use and learn.\r\n\r\nEye css is responsive, dynamic, detailed and familiar. Similar to tailwind css in both syntax and operation.\r\n\r\n[//]: # (The **utility-first** syntax you are used to is available in eye css with additional features.)\r\n\r\nEye css can be used in small and large web projects. Eye css can be used with your single static html file, to dynamic\r\nlarge web projects.\r\n\r\n[//]: # (Eye css is a truly dynamic css library. With support for almost all tailwind css properties, eye.css gives you extra )\r\n\r\n[//]: # (flexibility and dynamism. )\r\n\r\n[//]: # (Eye css works similar to tailwind css. Eye css watches your *.html, *.js, *.jsx, *.ts, *.tsx files)\r\n\r\n[//]: # (for defined css styles which it creates for you on the fly.)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (Though Eye css library is written in python, it can work with your existing web projects. Whether Angular, react, vue,)\r\n\r\n[//]: # (svelte, etc.)\r\n\r\n[//]: # (Once you have a python interpreter, Eye css works.)\r\n\r\n[//]: # (Eye css works on all platform, windows, mac, linux.)\r\n\r\nJust download Eye css or install Eye css and let **Eye** watch your defined files for defined styles.\r\n\r\nIt's as simple as that.\r\n\r\n## How to use eye css:\r\n\r\n### Installation\r\n\r\n```commandline\r\npip install eye-css\r\n```\r\n\r\n#### Create an eye_config.yml file and add the following:\r\n\r\n```yaml\r\neye:\r\n  input_directory: \"./\"\r\n  input_extensions: \"*.html\"\r\n\r\n  exclude_directory: \".git\"\r\n  exclude_files: \".gitignore\"\r\n```\r\n\r\n_**Remember to name the file: eye_config.yml**_\r\n\r\n#### To use it with a single javascript file or your favorite javascript library:\r\n\r\n```yaml\r\neye:\r\n  input_directory: \"./\"\r\n  input_extensions: \"*.html,*.js,*.jsx,*.ts,*.tsx\"\r\n\r\n  exclude_directory: \".git\"\r\n  exclude_files: \".gitignore\"\r\n\r\n  output_name: \"watched_eye.css\"\r\n```\r\n\r\nNote that there is not space between the file extensions to parse\r\nNext, Add \"watched_eye.css\" to the head tag of your base html file.\r\n\r\n```html\r\n<link rel=\"stylesheet\" href=\"watched_eye.css\"/>\r\n```\r\n\r\nOnce installed,\r\nrun the following command in your terminal\r\n\r\n```commandline\r\npython -m eye_css \"path to eye_config.yml\"\r\n```\r\n\r\nEye css will automatically watch and style your file once you make changes to the defined extensions from\r\neye_config.yml.\r\n\r\n_Note: eye css will not automatically reload your browser or web page on file change,\r\nit leaves that functionality to existing implementation of such. Examples: **htmx, angular, react, vue, svelte and other \r\nexisting web frameworks**._\r\n\r\n[//]: # ()\r\n\r\n[//]: # ([//]: # &#40;<img alt=\"Proudly Nigeria\" height=\"24px\" src=\"https://img.shields.io/badge/proudly-Nigerian-008751.svg?style=flat&labelColor=FFFFFF\" title=\"Proudly Nigerian Image\" width=\"auto\"/>&#41;)\r\n\r\n[//]: # ()\r\n\r\n[//]: # ()\r\n\r\n[//]: # ([//]: # &#40;HOW EYE CSS WORKS&#41;)\r\n\r\n[//]: # (EYE.css parsing follows a defined approach for proper, effective and desirable result.)\r\n\r\n[//]: # (The Order of Precedence for declaring inline-css is:)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (_**`.media-queries:pseudo-classes:pseudo-selectors:bare-css-classes`**_)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (**Example:**)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (* **.sm:placeholder:hover:color-blue**)\r\n\r\n[//]: # (* **.md:after:hover:bg-light**)\r\n\r\n[//]: # (* **.md:placeholder:focus:pct:w-100**)\r\n\r\n[//]: # (* **.lg:pct:w-100**)\r\n\r\n[//]: # ()\r\n\r\n[//]: # ()\r\n\r\n[//]: # ([//]: # &#40;JULY 25, 2022.&#41;)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (## The First Dynamic CSS Framework.)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (It checks, It Parses, It creates your css files.)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (Just declare the css-strings. Leave the rest to eye.)\r\n\r\n[//]: # ()\r\n\r\n[//]: # (How it works.)\r\n\r\n[//]: # ()\r\n\r\n[//]: # ()\r\n\r\n[//]: # (## Understanding when to use pipe in pseudo-base-css-classes.)\r\n\r\n[//]: # ([//]: # &#40;- August 16, 2022.&#41;)\r\n\r\n[//]: # (To use pipe in pseudo-base-css-classes means a new complete property of the defined style is being parsed.)\r\n\r\n[//]: # (e.g., )\r\n\r\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)\r\n\r\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.)\r\n\r\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.)\r\n\r\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;**)\r\n",
    "bugtrack_url": null,
    "license": "LICENSE",
    "summary": "A dynamic utility-first css library written in python",
    "version": "0.1.6",
    "split_keywords": [
        "eye css",
        "css",
        "css library",
        "utility-first css",
        "python css",
        "web eyecss"
    ],
    "urls": [
        {
            "comment_text": "",
            "digests": {
                "md5": "631221d567cdef56008d61529fca679f",
                "sha256": "4712fa03686188b426de9472a2522c845bc19f31b05873bc480a5aa5e1c0adfd"
            },
            "downloads": -1,
            "filename": "eye_css-0.1.6-py3-none-any.whl",
            "has_sig": false,
            "md5_digest": "631221d567cdef56008d61529fca679f",
            "packagetype": "bdist_wheel",
            "python_version": "py3",
            "requires_python": null,
            "size": 44405,
            "upload_time": "2022-12-11T20:10:36",
            "upload_time_iso_8601": "2022-12-11T20:10:36.082599Z",
            "url": "https://files.pythonhosted.org/packages/27/0a/4add8033def82e1a63c31fb1f1603370ec25d45cb963349b81d93592bc29/eye_css-0.1.6-py3-none-any.whl",
            "yanked": false,
            "yanked_reason": null
        },
        {
            "comment_text": "",
            "digests": {
                "md5": "46c33b010bb13e3ef60c52bcd0e15401",
                "sha256": "bcdf4623dcc8a052f16671cfa325093aff23cc616b13194a8011cfa6c143e1a2"
            },
            "downloads": -1,
            "filename": "eye_css-0.1.6.tar.gz",
            "has_sig": false,
            "md5_digest": "46c33b010bb13e3ef60c52bcd0e15401",
            "packagetype": "sdist",
            "python_version": "source",
            "requires_python": null,
            "size": 46141,
            "upload_time": "2022-12-11T20:10:37",
            "upload_time_iso_8601": "2022-12-11T20:10:37.970219Z",
            "url": "https://files.pythonhosted.org/packages/74/ee/2d1d641a8c7bc741c7db547fb2e015ed2ed38420b13d26838c92c75acc03/eye_css-0.1.6.tar.gz",
            "yanked": false,
            "yanked_reason": null
        }
    ],
    "upload_time": "2022-12-11 20:10:37",
    "github": false,
    "gitlab": false,
    "bitbucket": false,
    "lcname": "eye-css"
}