thinkrank / src / admin / styles / README.md

README.md in ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO 1.0.0, at src/admin/styles/README.md

179 lines 5.1 KB

Raw Download Zip

1	# ThinkRank Admin Styles
2
3	This directory contains the organized SCSS files for the ThinkRank WordPress plugin admin interface.
4
5	## File Structure
6
7	```
8	src/admin/styles/
9	├── README.md # This documentation
10	├── _variables.scss # Design tokens and SCSS variables
11	├── admin.scss # Main stylesheet (imports all others)
12	├── components.scss # Reusable UI components
13	├── dashboard.scss # Dashboard-specific styles
14	├── settings.scss # Settings page styles
15	└── content-brief.scss # Content brief generator styles
16	```
17
18	## Import Order
19
20	The main `admin.scss` file imports styles in this order:
21
22	1. `_variables.scss` - Design tokens and SCSS variables
23	2. `components.scss` - Base UI components
24	3. `dashboard.scss` - Dashboard page styles
25	4. `settings.scss` - Settings page styles
26	5. `content-brief.scss` - Content brief generator styles
27
28	## File Descriptions
29
30	### `_variables.scss`
31	Contains all design tokens including:
32	- Color palette (primary, secondary, neutral colors)
33	- Provider-specific colors (OpenAI green, Claude orange)
34	- Typography scale (font sizes, weights, line heights)
35	- Spacing scale (consistent spacing units)
36	- Border radius values
37	- Shadow definitions
38	- Breakpoints for responsive design
39	- Utility mixins
40
41	### `components.scss`
42	Reusable UI components including:
43	- Base ThinkRank UI wrapper styles
44	- Button variants (primary, secondary)
45	- Form elements (inputs, selects, textareas)
46	- Loading states and error notices
47	- Badges and tooltips
48	- Responsive utilities
49
50	### `dashboard.scss`
51	Dashboard-specific styles including:
52	- Enhanced dashboard cards with gradients
53	- Provider-specific card themes (OpenAI, Claude, Briefs)
54	- Stat card layouts and animations
55	- Icon containers and status badges
56	- Responsive dashboard grid
57
58	### `settings.scss`
59	Settings page styles including:
60	- AI provider visual selector
61	- Provider button states and hover effects
62	- API key section styling
63	- Settings actions and form layouts
64	- Data management section
65	- Responsive settings layout
66
67	### `content-brief.scss`
68	Content brief generator styles including:
69	- Form layouts and card designs
70	- Button styling and spacing
71	- Model badge components
72	- Saved briefs section
73	- Content structure display
74	- Competitor analysis styling
75	- Responsive content brief layout
76
77	## Design System
78
79	### Colors
80	- Primary: Blue (#2563eb) for main actions and branding
81	- Success: Green (#22c55e) for positive states
82	- Warning: Orange (#f59e0b) for caution states
83	- Error: Red (#ef4444) for error states
84	- OpenAI: Green (#10a37f) for OpenAI provider
85	- Claude: Orange (#d97757) for Claude provider
86
87	### Typography
88	- Font Family: System font stack for optimal performance
89	- Scale: 12px to 36px with consistent ratios
90	- Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
91
92	### Spacing
93	- Scale: 4px base unit (0.25rem) with consistent multipliers
94	- Common: 8px, 12px, 16px, 24px, 32px, 48px
95
96	### Shadows
97	- Light: Subtle shadows for cards and buttons
98	- Medium: Standard component shadows
99	- Heavy: Modal and dropdown shadows
100
101	## Best Practices
102
103	### SCSS Organization
104	1. Use variables for all design tokens
105	2. Group related styles in logical files
106	3. Use mixins for repeated patterns
107	4. Follow BEM-like naming conventions
108	5. Keep specificity low and avoid !important
109
110	### Responsive Design
111	1. Mobile-first approach
112	2. Use consistent breakpoints
113	3. Test on multiple screen sizes
114	4. Ensure touch-friendly interfaces
115
116	### Performance
117	1. Minimize CSS output
118	2. Use efficient selectors
119	3. Avoid deep nesting (max 3 levels)
120	4. Leverage CSS custom properties for theming
121
122	## Migration from Legacy CSS
123
124	The large `thinkrank-custom.css` file has been broken down into organized SCSS files:
125
126	- Dashboard styles → `dashboard.scss`
127	- Settings styles → `settings.scss`
128	- Component styles → `components.scss`
129	- Variables → `_variables.scss`
130
131	### Migration Status
132	1. �
133	Extract styles into organized SCSS files
134	2. �
135	Update build process to compile SCSS
136	3. �
137	Remove legacy `thinkrank-custom.css`
138	4. �
139	Add missing layout and component styles
140	5. �
141	Test build process and compilation
142
143	## Development Workflow
144
145	### Adding New Styles
146	1. Determine the appropriate file (component, page-specific, etc.)
147	2. Use existing variables when possible
148	3. Follow the established naming conventions
149	4. Test responsive behavior
150	5. Document any new patterns
151
152	### Modifying Existing Styles
153	1. Locate the style in the appropriate SCSS file
154	2. Make changes using variables when possible
155	3. Test across all affected pages
156	4. Update documentation if needed
157
158	### Creating New Components
159	1. Add base styles to `components.scss`
160	2. Use variables for colors, spacing, etc.
161	3. Include responsive behavior
162	4. Document the component usage
163
164	## Browser Support
165
166	Styles are designed to work with:
167	- Modern browsers (Chrome, Firefox, Safari, Edge)
168	- WordPress admin requirements
169	- Mobile and tablet devices
170	- High DPI displays
171
172	## Compilation
173
174	The SCSS files need to be compiled to CSS for production use. The build process should:
175	1. Compile SCSS to CSS
176	2. Add vendor prefixes
177	3. Minify for production
178	4. Generate source maps for development
179