docs: update documentation with new hero layouts and fix FFI link ref… by developersharif · Pull Request #13 · developersharif/php-gui

developersharif · 2026-03-30T08:39:22Z

…erence

gemini-code-assist

Code Review

This pull request significantly overhauls the documentation's visual design and structure. Key changes include a redesigned cover page and home page with new hero sections, feature grids, and platform badges. The index.html file was updated with extensive CSS for animations and theme customization. Feedback focuses on improving maintainability by extracting inline styles into CSS classes, reducing the use of !important declarations, and cleaning up unnecessary SVG metadata and commented-out code.

gemini-code-assist · 2026-03-30T08:44:00Z

-> A robust cross-platform GUI toolkit for PHP via FFI
+> Create cross-platform graphical interfaces using pure PHP &mdash; zero compiled extensions, zero massive browser engines.
+
+<p style="font-size: 0.85em; opacity: 0.7; margin-top: -12px; margin-bottom: 24px;">✨ Inspired by Python's Tkinter, built for modern PHP.</p>


For better maintainability, it's best to avoid inline styles. Please extract these styles into a dedicated CSS class in docs/index.html. This keeps the markup clean and makes future styling changes easier.

You can add a class to this <p> tag, for example cover-inspiration:

<p class="cover-inspiration">...</p>

And then add the corresponding CSS to your <style> block in index.html:

.cover-inspiration { font-size: 0.85em; opacity: 0.7; margin-top: -12px; margin-bottom: 24px; }

Suggested change

<p style="font-size: 0.85em; opacity: 0.7; margin-top: -12px; margin-bottom: 24px;">✨ Inspired by Python's Tkinter, built for modern PHP.</p>

<p class="cover-inspiration">✨ Inspired by Python's Tkinter, built for modern PHP.</p>

gemini-code-assist · 2026-03-30T08:44:00Z

+> Create cross-platform graphical interfaces using pure PHP &mdash; zero compiled extensions, zero massive browser engines.
+
+<p style="font-size: 0.85em; opacity: 0.7; margin-top: -12px; margin-bottom: 24px;">✨ Inspired by Python's Tkinter, built for modern PHP.</p>
+<div class="hero-mock-window" style="margin: 32px auto 40px; box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6); max-width: 780px; text-align: left; z-index: 10; position: relative;">


To improve code maintainability and separate concerns, please move these inline styles to the .hero-mock-window class definition within the <style> block in docs/index.html. This will centralize your styling and make it easier to manage.

Here is the updated CSS class that includes the inline styles:

.hero-mock-window { max-width: 780px; margin: 32px auto 40px; background: #1e1e1e; border-radius: 12px; border: 1px solid #333; box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6); overflow: hidden; font-family: var(--code-font-family); text-align: left; position: relative; z-index: 10; }

Suggested change

<div class="hero-mock-window" style="margin: 32px auto 40px; box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6); max-width: 780px; text-align: left; z-index: 10; position: relative;">

<div class="hero-mock-window">

gemini-code-assist · 2026-03-30T08:44:00Z

@@ -1,22 +1,100 @@
-# PHP GUI with Tcl/Tk
+<h1 style="display: none;"><span>PHP GUI</span></h1>


It's better to use a utility class for visually hiding elements instead of an inline style. This improves maintainability and reusability. You could define a .visually-hidden class in docs/index.html and use it here.

Here's a common implementation for such a class:

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

Then you can apply it like this: <h1 class="visually-hidden">...</h1>

Suggested change

<h1 style="display: none;"><span>PHP GUI</span></h1>

<h1 class="visually-hidden"><span>PHP GUI</span></h1>

gemini-code-assist · 2026-03-30T08:44:00Z

+    Native UI Framework for PHP
+  </span>
+  <h1>Build Desktop Apps<br>with Pure PHP</h1>
+  <p class="hero-tagline">A lightweight, highly performant cross-platform GUI toolkit that delegates rendering directly to the OS using PHP's FFI extension. Zero compiled extensions, zero heavy browser engines.<br><span style="display:inline-block; margin-top: 8px; font-size: 0.85em; opacity: 0.7;">✨ Inspired by Python's Tkinter, built for modern PHP.</span></p>


Please extract this inline style into a CSS class for better maintainability. You could create a class like .hero-sub-text in docs/index.html.

.hero-sub-text { display: inline-block; margin-top: 8px; font-size: 0.85em; opacity: 0.7; }

Suggested change

<p class="hero-tagline">A lightweight, highly performant cross-platform GUI toolkit that delegates rendering directly to the OS using PHP's FFI extension. Zero compiled extensions, zero heavy browser engines.<br><span style="display:inline-block; margin-top: 8px; font-size: 0.85em; opacity: 0.7;">✨ Inspired by Python's Tkinter, built for modern PHP.</span></p>

<p class="hero-tagline">A lightweight, highly performant cross-platform GUI toolkit that delegates rendering directly to the OS using PHP's FFI extension. Zero compiled extensions, zero heavy browser engines.<br><span class="hero-sub-text">✨ Inspired by Python's Tkinter, built for modern PHP.</span></p>

gemini-code-assist · 2026-03-30T08:44:00Z

+
+<div class="platform-badges">
+  <span class="platform-badge">
+    <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->


The XML declaration and the comment are not necessary for inline SVGs in an HTML5 document. You can safely remove this line to make the code cleaner and slightly smaller.

gemini-code-assist · 2026-03-30T08:44:00Z

 composer require developersharif/php-gui
 ```

+<div class="section-header" style="margin-top:20px">


Please avoid inline styles for better maintainability. You can create a modifier class like .section-header--top-margin and add it to docs/index.html.

.section-header--top-margin { margin-top: 20px; }

Suggested change

<div class="section-header" style="margin-top:20px">

<div class="section-header section-header--top-margin">

gemini-code-assist · 2026-03-30T08:44:00Z

+    .sidebar .search input {
+      border-radius: 8px !important;
+      border: 1px solid #e2e8f0 !important;
+      padding: 8px 12px !important;
+      font-family: var(--base-font-family) !important;
+      font-size: 0.9em !important;
+      transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+      background: #fff !important;
+    }


There is extensive use of !important throughout the CSS, especially for overriding theme styles. While sometimes necessary, overuse can make the CSS difficult to maintain and debug. It's recommended to review these and see if they can be removed by increasing selector specificity instead. For example, instead of .sidebar .search input { border-radius: 8px !important; }, you might be able to use a more specific selector like body .sidebar .search input if the theme's selector is less specific.

gemini-code-assist · 2026-03-30T08:44:01Z

+      animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+      background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%);
+      -webkit-background-clip: text;
+      /* -webkit-text-fill-color: transparent; */


This line is commented out. If it's not needed, it should be removed to keep the code clean.

gemini-code-assist · 2026-03-30T08:44:01Z

  <script>
    window.$docsify = {
-      name: 'PHP GUI',
+      name: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6d28d9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:6px;margin-top:-2px"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m7 8 3 3-3 3"/><path d="M14 14h3"/></svg><span style="background:linear-gradient(135deg,#6d28d9,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800">PHP GUI</span>',


Using a large block of HTML with inline styles inside a JavaScript configuration string can be difficult to read and maintain. It's better to move this styling to your CSS.

You can simplify the name configuration and use CSS to style the SVG and span elements within the .app-name-link.

Update the name property by removing the inline styles.

Add the following rules to your <style> block:

.app-name-link svg { vertical-align: middle; margin-right: 6px; margin-top: -2px; } .app-name-link span { background: linear-gradient(135deg, #6d28d9, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }

Suggested change

name: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6d28d9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:6px;margin-top:-2px"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m7 8 3 3-3 3"/><path d="M14 14h3"/></svg><span style="background:linear-gradient(135deg,#6d28d9,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800">PHP GUI</span>',

name: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6d28d9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="m7 8 3 3-3 3"/><path d="M14 14h3"/></svg><span>PHP GUI</span>',

docs: update documentation with new hero layouts and fix FFI link ref…

e7c8f03

…erence

developersharif merged commit 7ef0f70 into main Mar 30, 2026
3 checks passed

gemini-code-assist Bot reviewed Mar 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: update documentation with new hero layouts and fix FFI link ref…#13

docs: update documentation with new hero layouts and fix FFI link ref…#13
developersharif merged 1 commit into
mainfrom
docv1.5

developersharif commented Mar 30, 2026

Uh oh!

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<p style="font-size: 0.85em; opacity: 0.7; margin-top: -12px; margin-bottom: 24px;">✨ Inspired by Python's Tkinter, built for modern PHP.</p>
	<p class="cover-inspiration">✨ Inspired by Python's Tkinter, built for modern PHP.</p>

	<div class="hero-mock-window" style="margin: 32px auto 40px; box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.6); max-width: 780px; text-align: left; z-index: 10; position: relative;">
	<div class="hero-mock-window">

		@@ -1,22 +1,100 @@
		# PHP GUI with Tcl/Tk
		<h1 style="display: none;"><span>PHP GUI</span></h1>

	<h1 style="display: none;"><span>PHP GUI</span></h1>
	<h1 class="visually-hidden"><span>PHP GUI</span></h1>

	<p class="hero-tagline">A lightweight, highly performant cross-platform GUI toolkit that delegates rendering directly to the OS using PHP's FFI extension. Zero compiled extensions, zero heavy browser engines.<br><span style="display:inline-block; margin-top: 8px; font-size: 0.85em; opacity: 0.7;">✨ Inspired by Python's Tkinter, built for modern PHP.</span></p>
	<p class="hero-tagline">A lightweight, highly performant cross-platform GUI toolkit that delegates rendering directly to the OS using PHP's FFI extension. Zero compiled extensions, zero heavy browser engines.<br><span class="hero-sub-text">✨ Inspired by Python's Tkinter, built for modern PHP.</span></p>

	<div class="section-header" style="margin-top:20px">
	<div class="section-header section-header--top-margin">

Conversation

developersharif commented Mar 30, 2026

Uh oh!

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant