@lottecode/lottecss 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +50 -39
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,9 @@
1
1
  # lottecss
2
2
 
3
3
  ![Homepage](https://img.shields.io/badge/website-css.lottecode.com-blue)
4
+ ![npm](https://img.shields.io/npm/v/@lottecode/lottecss)
4
5
 
5
- A CSS framework that styles semantic HTML automatically. No classes, no inline styles — just write proper markup and lottecss handles the design.
6
+ A CSS framework that styles semantic HTML automatically. No classes, no inline styles — write proper markup and lottecss handles the design.
6
7
 
7
8
  **Live demo & docs:** [https://css.lottecode.com](https://css.lottecode.com)
8
9
 
@@ -10,16 +11,6 @@ A CSS framework that styles semantic HTML automatically. No classes, no inline s
10
11
 
11
12
  ## Installation
12
13
 
13
- Add the lottecode registry to your project's `.yarnrc.yml`:
14
-
15
- ```yaml
16
- npmScopes:
17
- lottecode:
18
- npmRegistryServer: "https://npm.pkg.github.com"
19
- ```
20
-
21
- Then install:
22
-
23
14
  ```bash
24
15
  yarn add @lottecode/lottecss
25
16
  ```
@@ -30,22 +21,39 @@ yarn add @lottecode/lottecss
30
21
  @import "@lottecode/lottecss/styles.css";
31
22
  ```
32
23
 
33
- ## How It Works
24
+ That's it. Your semantic HTML is now styled.
25
+
26
+ ---
27
+
28
+ ## For AI Assistants (Claude, etc.)
29
+
30
+ If you are an AI assistant generating markup for a project that uses lottecss, read this section carefully.
34
31
 
35
- lottecss targets semantic HTML elements directly. You do not add classes or inline styles to control appearance. The framework styles elements based on what they are and where they sit in the document structure.
32
+ ### The Core Rule
36
33
 
37
- ### Rules
34
+ **Do not style anything.** lottecss does it for you. Your job is to write correct, semantic HTML.
38
35
 
39
- - **Use semantic HTML elements**: `<header>`, `<nav>`, `<main>`, `<footer>`, `<article>`, `<section>`, `<aside>`, `<h1>`–`<h6>`, `<p>`, `<ul>`, `<ol>`, `<blockquote>`, `<table>`, `<form>`, `<button>`, `<details>`, `<figure>`
40
- - **Never add inline styles** (`style=""`) to semantic elements
41
- - **Never add styling classes** (no `className="text-xl text-blue-500"` on headings, paragraphs, etc.)
42
- - **No custom class names** like `"site-header"`, `"nav-list"`, `"card-title"` — use the semantic element itself
43
- - **Layout utilities only**: basic Tailwind utility classes (`flex`, `grid`, `gap-*`, `p-*`, `m-*`) are acceptable for layout purposes only, not for visual styling
36
+ ### Do
44
37
 
45
- ### Examples
38
+ - Use semantic elements: `<header>`, `<nav>`, `<main>`, `<footer>`, `<article>`, `<section>`, `<aside>`, `<details>`, `<figure>`, `<blockquote>`, `<table>`, `<form>`, `<button>`
39
+ - Use heading hierarchy: `<h1>` through `<h6>`
40
+ - Use text elements: `<p>`, `<strong>`, `<em>`, `<code>`, `<mark>`
41
+ - Use lists: `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`
42
+ - Use `.card` class for card-like containers
43
+ - Use basic Tailwind utilities (`flex`, `grid`, `gap-*`, `p-*`, `m-*`) for layout only
44
+
45
+ ### Do Not
46
+
47
+ - Add `style=""` attributes to any element
48
+ - Add visual classes (`text-xl`, `text-blue-500`, `font-bold`, `bg-gray-100`, etc.)
49
+ - Create custom class names (`site-header`, `nav-list`, `card-title`, `hero-section`)
50
+ - Use `<div>` when a semantic element exists for that purpose
51
+ - Override fonts, colors, sizes, or spacing — lottecss controls all of this
52
+
53
+ ### Example
46
54
 
47
55
  ```html
48
- <!-- CORRECT: pure semantic markup, lottecss handles all styling -->
56
+ <!-- CORRECT -->
49
57
  <header>
50
58
  <nav>
51
59
  <ul>
@@ -57,12 +65,9 @@ lottecss targets semantic HTML elements directly. You do not add classes or inli
57
65
 
58
66
  <main>
59
67
  <article>
60
- <h1>Article Title</h1>
61
- <p>Paragraph text styled automatically.</p>
62
- <blockquote>A styled blockquote.</blockquote>
63
- <ul>
64
- <li>Styled list item</li>
65
- </ul>
68
+ <h1>Page Title</h1>
69
+ <p>Content is styled automatically.</p>
70
+ <blockquote>Blockquotes are styled automatically.</blockquote>
66
71
  </article>
67
72
  <aside>
68
73
  <h2>Sidebar</h2>
@@ -76,19 +81,31 @@ lottecss targets semantic HTML elements directly. You do not add classes or inli
76
81
  ```
77
82
 
78
83
  ```html
79
- <!-- WRONG: do not do this -->
84
+ <!-- WRONG — never do this -->
80
85
  <h1 style="font-size: 2rem; color: navy;">Title</h1>
81
86
  <p class="text-gray-600 text-lg">Text</p>
82
87
  <div class="card-header">Not a real element</div>
83
88
  ```
84
89
 
85
- ### What lottecss Styles
90
+ ### If Something Looks Wrong
91
+
92
+ Choose a different semantic element — don't add styling. The element you picked is probably wrong for that context.
93
+
94
+ ---
95
+
96
+ ## What lottecss Styles
86
97
 
87
98
  | Module | What it covers |
88
99
  |---|---|
100
+ | `globals.css` | Base resets and defaults |
101
+ | `colors.css` | Color palette and CSS custom properties |
102
+ | `fonts.css` | Font face definitions |
89
103
  | `typography.css` | Headings, paragraphs, inline text (`<strong>`, `<em>`, `<code>`, `<mark>`) |
90
- | `navigation.css` | `<nav>`, nav lists, links within nav |
104
+ | `layout.css` | Page-level layout (`<main>`, `<aside>`) |
105
+ | `column.css` | Column-based layouts |
91
106
  | `header.css` | `<header>` element and its children |
107
+ | `navigation.css` | `<nav>`, nav lists, links within nav |
108
+ | `links.css` | `<a>` elements |
92
109
  | `button.css` | `<button>` and button-like elements |
93
110
  | `forms.css` | `<form>`, `<input>`, `<select>`, `<textarea>`, `<label>` |
94
111
  | `tables.css` | `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>` |
@@ -97,18 +114,12 @@ lottecss targets semantic HTML elements directly. You do not add classes or inli
97
114
  | `accordion.css` | `<details>` and `<summary>` |
98
115
  | `tabs.css` | Tab patterns using semantic markup |
99
116
  | `media.css` | `<img>`, `<video>`, `<figure>`, `<figcaption>` |
100
- | `links.css` | `<a>` elements |
101
117
  | `editorial.css` | `<blockquote>`, `<hr>`, long-form content |
102
- | `layout.css` | Page-level layout (`<main>`, `<aside>`) |
103
- | `column.css` | Column-based layouts |
104
- | `colors.css` | Color palette and CSS custom properties |
105
- | `fonts.css` | Font face definitions (Berkeley Mono) |
106
- | `globals.css` | Base resets and defaults |
107
118
  | `utility.css` | Minimal utility classes for layout only |
108
119
 
109
120
  ## Fonts
110
121
 
111
- lottecss uses [Berkeley Mono](https://berkeleygraphics.com/typefaces/berkeley-mono) by default. This is a licensed typeface — lottecss does not distribute the font files. The framework falls back to `monospace` if Berkeley Mono is not available.
122
+ lottecss uses [Berkeley Mono](https://berkeleygraphics.com/typefaces/berkeley-mono) by default, loaded from CDN. The framework falls back to `monospace` if the font is unavailable.
112
123
 
113
124
  **Buy Berkeley Mono:** [berkeleygraphics.com/typefaces/berkeley-mono](https://berkeleygraphics.com/typefaces/berkeley-mono)
114
125
 
@@ -121,6 +132,6 @@ To use your own font, override the CSS custom properties:
121
132
  }
122
133
  ```
123
134
 
124
- ### Key Principle
135
+ ## License
125
136
 
126
- If you're reaching for a class name or inline style to make something look right, you're probably using the wrong HTML element. Choose the element that semantically represents your content and lottecss will style it correctly.
137
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lottecode/lottecss",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "out of the box design and styling for your semantic markup",
5
5
  "type": "module",
6
6
  "main": "styles.css",