EYE CSS

Eye css is a dynamic utility-first css library written in python 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.

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.

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

pip install eye-css

Create an eye_config.yml file and add the following:

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

  exclude_directory: ".git"
  exclude_files: ".gitignore"
  
  scrollbar_width: "8px"
  scrollbar_height: "8px" # for horizontal scrolls
  scrollbar_color: "lightgray"
  scrollbar_color_dark: "#222222" # for dark themes
  scrollbar_track_color: "lightgray"
  scrollbar_color_track_dark: "#222222" # for dark themes
  scrollbar_thumb_color: "gray"
  scrollbar_thumb_color_dark: "gray"  # for dark themes
  scrollbar_thumb_radius: "8px 8px"

Remember to name the file: eye_config.yml

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

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 no space when adding file extensions in input_extensions.

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.

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

Once installed, run the following command in your terminal

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.