carrot-css - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

docs/_data/cssVars.json

@@ -1,1 +0,1 @@
-[{"type":"comment","comment":" Sizes ","position":{"start":{"line":2,"column":3},"end":{"line":2,"column":14}}},{"type":"declaration","property":"--border-thin","value":"0.2rem","position":{"start":{"line":3,"column":3},"end":{"line":3,"column":24}}},{"type":"declaration","property":"--measure","value":"50ch","position":{"start":{"line":4,"column":3},"end":{"line":4,"column":18}}},{"type":"comment","comment":" Fonts ","position":{"start":{"line":6,"column":3},"end":{"line":6,"column":14}}},{"type":"declaration","property":"--font-headings","value":"-apple-system, BlinkMacSystemFont, avenir next, avenir,\n    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif","position":{"start":{"line":7,"column":3},"end":{"line":8,"column":81}}},{"type":"declaration","property":"--font-body","value":"-apple-system, BlinkMacSystemFont, avenir next, avenir,\n    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif","position":{"start":{"line":9,"column":3},"end":{"line":10,"column":81}}},{"type":"declaration","property":"--font-ratio","value":"1.33","position":{"start":{"line":11,"column":3},"end":{"line":11,"column":21}}},{"type":"declaration","property":"--font-line-height","value":"1.5","position":{"start":{"line":12,"column":3},"end":{"line":12,"column":26}}},{"type":"declaration","property":"--size-300","value":"calc(var(--size-400) / var(--font-ratio))","position":{"start":{"line":13,"column":3},"end":{"line":13,"column":56}}},{"type":"declaration","property":"--size-400","value":"1rem","position":{"start":{"line":14,"column":3},"end":{"line":14,"column":19}}},{"type":"declaration","property":"--size-500","value":"calc(var(--size-400) * var(--font-ratio))","position":{"start":{"line":15,"column":3},"end":{"line":15,"column":56}}},{"type":"declaration","property":"--size-600","value":"calc(var(--size-500) * var(--font-ratio))","position":{"start":{"line":16,"column":3},"end":{"line":16,"column":56}}},{"type":"declaration","property":"--size-700","value":"calc(var(--size-600) * var(--font-ratio))","position":{"start":{"line":17,"column":3},"end":{"line":17,"column":56}}},{"type":"declaration","property":"--size-800","value":"calc(var(--size-700) * var(--font-ratio))","position":{"start":{"line":18,"column":3},"end":{"line":18,"column":56}}},{"type":"declaration","property":"--size-900","value":"calc(var(--size-800) * var(--font-ratio))","position":{"start":{"line":19,"column":3},"end":{"line":19,"column":56}}},{"type":"comment","comment":" Spacing ","position":{"start":{"line":21,"column":3},"end":{"line":21,"column":16}}},{"type":"declaration","property":"--space","value":"0.2rem","position":{"start":{"line":22,"column":3},"end":{"line":22,"column":18}}},{"type":"declaration","property":"--border-radius","value":"0.3rem","position":{"start":{"line":23,"column":3},"end":{"line":23,"column":26}}},{"type":"comment","comment":" Animation ","position":{"start":{"line":25,"column":3},"end":{"line":25,"column":18}}},{"type":"declaration","property":"--animation-time-short","value":"125ms","position":{"start":{"line":26,"column":3},"end":{"line":26,"column":32}}},{"type":"declaration","property":"--animation-time-medium","value":"250ms","position":{"start":{"line":27,"column":3},"end":{"line":27,"column":33}}},{"type":"declaration","property":"--animation-time-long","value":"360ms","position":{"start":{"line":28,"column":3},"end":{"line":28,"column":31}}},{"type":"comment","comment":" Shadows ","position":{"start":{"line":30,"column":3},"end":{"line":30,"column":16}}},{"type":"declaration","property":"--box-shadow-small","value":"0 1px 2px 0 rgba(0, 0, 0, 0.05)","position":{"start":{"line":31,"column":3},"end":{"line":31,"column":54}}},{"type":"declaration","property":"--box-shadow-medium","value":"0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06)","position":{"start":{"line":32,"column":3},"end":{"line":33,"column":39}}},{"type":"declaration","property":"--box-shadow-large","value":"0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05)","position":{"start":{"line":34,"column":3},"end":{"line":35,"column":39}}},{"type":"declaration","property":"--box-shadow-extra-large","value":"0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04)","position":{"start":{"line":36,"column":3},"end":{"line":37,"column":41}}}]
+[{"type":"comment","comment":" Sizes ","position":{"start":{"line":2,"column":3},"end":{"line":2,"column":14}}},{"type":"declaration","property":"--border-thin","value":"0.2rem","position":{"start":{"line":3,"column":3},"end":{"line":3,"column":24}}},{"type":"declaration","property":"--measure","value":"50ch","position":{"start":{"line":4,"column":3},"end":{"line":4,"column":18}}},{"type":"declaration","property":"--form-field-height","value":"2rem","position":{"start":{"line":5,"column":3},"end":{"line":5,"column":28}}},{"type":"comment","comment":" Fonts ","position":{"start":{"line":7,"column":3},"end":{"line":7,"column":14}}},{"type":"declaration","property":"--font-headings","value":"-apple-system, BlinkMacSystemFont, avenir next, avenir,\n    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif","position":{"start":{"line":8,"column":3},"end":{"line":9,"column":81}}},{"type":"declaration","property":"--font-body","value":"-apple-system, BlinkMacSystemFont, avenir next, avenir,\n    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif","position":{"start":{"line":10,"column":3},"end":{"line":11,"column":81}}},{"type":"declaration","property":"--font-ratio","value":"1.33","position":{"start":{"line":12,"column":3},"end":{"line":12,"column":21}}},{"type":"declaration","property":"--font-line-height","value":"1.5","position":{"start":{"line":13,"column":3},"end":{"line":13,"column":26}}},{"type":"declaration","property":"--size-300","value":"calc(var(--size-400) / var(--font-ratio))","position":{"start":{"line":14,"column":3},"end":{"line":14,"column":56}}},{"type":"declaration","property":"--size-400","value":"1rem","position":{"start":{"line":15,"column":3},"end":{"line":15,"column":19}}},{"type":"declaration","property":"--size-500","value":"calc(var(--size-400) * var(--font-ratio))","position":{"start":{"line":16,"column":3},"end":{"line":16,"column":56}}},{"type":"declaration","property":"--size-600","value":"calc(var(--size-500) * var(--font-ratio))","position":{"start":{"line":17,"column":3},"end":{"line":17,"column":56}}},{"type":"declaration","property":"--size-700","value":"calc(var(--size-600) * var(--font-ratio))","position":{"start":{"line":18,"column":3},"end":{"line":18,"column":56}}},{"type":"declaration","property":"--size-800","value":"calc(var(--size-700) * var(--font-ratio))","position":{"start":{"line":19,"column":3},"end":{"line":19,"column":56}}},{"type":"declaration","property":"--size-900","value":"calc(var(--size-800) * var(--font-ratio))","position":{"start":{"line":20,"column":3},"end":{"line":20,"column":56}}},{"type":"comment","comment":" Spacing ","position":{"start":{"line":22,"column":3},"end":{"line":22,"column":16}}},{"type":"declaration","property":"--space","value":"0.2rem","position":{"start":{"line":23,"column":3},"end":{"line":23,"column":18}}},{"type":"declaration","property":"--border-radius","value":"0.3rem","position":{"start":{"line":24,"column":3},"end":{"line":24,"column":26}}},{"type":"comment","comment":" Animation ","position":{"start":{"line":26,"column":3},"end":{"line":26,"column":18}}},{"type":"declaration","property":"--animation-time-short","value":"125ms","position":{"start":{"line":27,"column":3},"end":{"line":27,"column":32}}},{"type":"declaration","property":"--animation-time-medium","value":"250ms","position":{"start":{"line":28,"column":3},"end":{"line":28,"column":33}}},{"type":"declaration","property":"--animation-time-long","value":"360ms","position":{"start":{"line":29,"column":3},"end":{"line":29,"column":31}}},{"type":"comment","comment":" Shadows ","position":{"start":{"line":31,"column":3},"end":{"line":31,"column":16}}},{"type":"declaration","property":"--box-shadow-small","value":"0 1px 2px 0 rgba(0, 0, 0, 0.05)","position":{"start":{"line":32,"column":3},"end":{"line":32,"column":54}}},{"type":"declaration","property":"--box-shadow-medium","value":"0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06)","position":{"start":{"line":33,"column":3},"end":{"line":34,"column":39}}},{"type":"declaration","property":"--box-shadow-large","value":"0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05)","position":{"start":{"line":35,"column":3},"end":{"line":36,"column":39}}},{"type":"declaration","property":"--box-shadow-extra-large","value":"0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04)","position":{"start":{"line":37,"column":3},"end":{"line":38,"column":41}}}]

docs/_data/libSize.json

@@ -1,1 +0,1 @@
-{"libSize": "16 KB"}
+{ "libSize": "4 KB" }

docs/documentation/buttons.md

@@ -57,2 +57,19 @@ ---
 
+Disabled state can be apllied to the buttons via a `disabled` attribute, a `disabled` class or a `button--disabled` class. The preffered method should be the `disabled` **attribute** as it automatically exclude the button from keyboard navigation.
+
+<div class="preview cluster">
+
+<button disabled class="button">Button `disabled` attribute</button><button disabled class="button button--primary">Primary Button `disabled` attribute</button><button class="button button--danger disabled">Danger Button `disabled` class</button><button class="button button--success button--disabled">Success Button `button--disabled` class</button>
+
+</div>
+
+```html
+<button disabled class="button">Button disabled</button>
+<button disabled class="button button--primary">Primary Button disabled</button>
+<button class="button button--danger disabled">Danger Button disabled</button>
+<button class="button button--success button--disabled">
+  Success Button disabled
+</button>
+```
+
 ## Overwrite default or create your own button
@@ -59,0 +76,0 @@

docs/documentation/forms.md

@@ -5,1 +5,189 @@ ---
 ---
+
+# Forms element reset
+
+Carrot CSS _does not_ provide any _pre-made_ form fields.
+That's not the goal there, if you want to build a design system or a website you probably have some design for your fields.
+And you might use an external library for custom selects and such, so the approach hewre is to not interfere with that.
+
+Carrot CSS _does_ provides some reset for form elements form fields look more in place.
+The reset itself just give you a sane base regarding margin and flow.
+
+Here's what is done:
+
+- No border and margin for `fieldset`, so we can use them for grouping fields without interfering with the layout
+- `legend` looks like an h3, and titles utilitites classes (`.h1-like` to `h5-like`) can also be used
+- All fields that _look like_ `text` fields have consistent padding and a `rem` defined height. They also have `box-sizing: border-box`. The `--form-field-height` can be overwritten to change that value, or even to `auto` to handle your height differently, with `padding-top` and `padding-bottom` for example
+- `label`s are `inline-block` to handle margin and such
+- `textarea` have default padding and only vertical resizing is allowed
+- `button`, `input[type=submit]` and _friends_ have default padding. [Button classes](/documentation/buttons/) can be used to stylize them further
+- `disabled` state is let to the _user agent_
+- _No changes to `border` or `background`_, because...
+  ✨ _`that's up to you!`_ ✨
+  _(and let's be frank that'll be less properties to overwrite on your end)_
+
+<form class="preview-dark">
+  <fieldset class="stack">
+    <legend>That's a default form legend</legend>
+    <div>
+      <label for="input">Example input</label>
+      <input type="text" id="input" placeholder="Example input">
+    </div>
+    <div>
+      <label for="select">Example select</label>
+      <select id="select">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </div>
+    <legend class="h2-like">Legend that use the `h2-like` class to look like an h2</legend>
+    <div>
+      <label>
+        <input type="checkbox" value="">
+        Checkbox label
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="radio" name="radioValue" value="option1" checked="">
+        Option one 
+      </label>
+      <label>
+        <input type="radio" name="radioValue" value="option2">
+        Option two 
+      </label>
+      <label>
+        <input type="radio" name="radioValue" value="option3" disabled="">
+        Disabled option
+      </label>
+    </div>
+    <div>
+      <label for="textarea">Example textarea</label><br/>
+      <textarea id="textarea" rows="3" style="height: 118px;"></textarea>
+    </div>
+    <div>
+      <label for="date">Example date</label>
+      <input type="date" id="date">
+    </div>
+    <div>
+      <label for="time">Example time</label>
+      <input type="time" id="time">
+    </div>
+    <div>
+      <label for="number">Example number</label>
+      <input type="number" id="number">
+    </div>
+    <div>
+      <label for="email">Example email</label>
+      <input type="email" id="email">
+    </div>
+    <div>
+      <label for="password">Example password</label>
+      <input type="password" id="password">
+    </div>
+    <div>
+      <label for="url">Example url</label>
+      <input type="url" id="url">
+    </div>
+    <div>
+      <button type="submit">Button submit</button>
+      <input type="submit" value="Input submit button">
+      <input type="button" value="Input button">
+      <button type="submit" disabled="true">Button submit</button>
+    </div>
+  </fieldset>
+</form>
+
+```html
+<form class="preview-dark">
+  <fieldset class="stack">
+    <legend>That's a default form legend</legend>
+    <div>
+      <label for="input">Example input</label>
+      <input type="text" id="input" placeholder="Example input" />
+    </div>
+    <div>
+      <label for="select">Example select</label>
+      <select id="select">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </div>
+    <legend class="h2-like">
+      Legend that use the `h2-like` class to look like an h2
+    </legend>
+    <div>
+      <label>
+        <input type="checkbox" value="" />
+        Checkbox label
+      </label>
+    </div>
+    <div>
+      <label>
+        <input type="radio" name="radioValue" value="option1" checked="" />
+        Option one
+      </label>
+      <label>
+        <input type="radio" name="radioValue" value="option2" />
+        Option two
+      </label>
+      <label>
+        <input type="radio" name="radioValue" value="option3" disabled="" />
+        Disabled option
+      </label>
+    </div>
+    <div>
+      <label for="textarea">Example textarea</label><br />
+      <textarea id="textarea" rows="3" style="height: 118px;"></textarea>
+    </div>
+    <div>
+      <label for="date">Example date</label>
+      <input type="date" id="date" />
+    </div>
+    <div>
+      <label for="time">Example time</label>
+      <input type="time" id="time" />
+    </div>
+    <div>
+      <label for="number">Example number</label>
+      <input type="number" id="number" />
+    </div>
+    <div>
+      <label for="email">Example email</label>
+      <input type="email" id="email" />
+    </div>
+    <div>
+      <label for="password">Example password</label>
+      <input type="password" id="password" />
+    </div>
+    <div>
+      <label for="url">Example url</label>
+      <input type="url" id="url" />
+    </div>
+    <div>
+      <button type="submit">Button submit</button>
+      <input type="submit" value="Input submit button" />
+      <input type="button" value="Input button" />
+      <button type="submit" disabled="true">Button submit</button>
+    </div>
+  </fieldset>
+</form>
+```

docs/documentation/index.md

 ---
-title: Documentation
+title: Getting started
 order: 1
@@ -8,7 +8,9 @@ ---
 
-A cool and small CSS starter that gets you going _fast_ and _right_.
+Carrot CSS is a **CSS Starter**, it is _not_ a framework as it does and asssume way less, but this is _not_ a reset, as it give you a sane basis for you to _write your own CSS code_.
 
-## Scope
+If you want to write your CSS but you are tired of writting the same starter code on every projects, **Carrot CSS is for you!**
+If you want to write clean CSS that _actually_ scales and you want to be sure to get of on the right foot with your CSS, **Carrot CSS is for you!**
 
-Carrot CSS is a small starter library for your projects. It contains the minimum you need to start a project.
+Carrot CSS is a stable foundation for your projects, it is lightweight and CSS only. It use CSS variables and have built-in theme support, and the whole thing is understandable and easily customizable.
+And also, _Carrot CSS don't go too far_, it only weight `4.2kB` gzipped and does just what you need, no more.
 
@@ -18,6 +20,34 @@ This library should be used by people that actually intend to write CSS, as it is not a component library, does not offers much styling and is not an utility library.
 
-It is not meant to be a component library neither. Just some default style, some wwisely named design tokens and few cool classes.
+## The three components of Carrot CSS
 
-🔮 _Carrot CSS is JS agnostic_ 🔮
+Carrot CSS code can be sorted into three main components:
 
+<div class="grid">
+<div>
+
+### Style reboot
+
+- A modern CSS reset
+- The "system font stack" by default
+- Forms element reboot so they are consistent and ready to customize
+</div>
+<div>
+
+### Sane base
+
+- All the CSS variables needed to get start, well named
+- A great typography sizing system based on a changeable ratio
+- A theming support, with light and dark themes built-in
+</div>
+<div>
+
+### Utilities
+
+- A great color palette to pick from
+- Layout utilities so you don't have to write the same concepts agin and agin
+- Hand picked utilities
+- Buttons you can chose from
+</div>
+</div>
+
 ## What's inside ?
@@ -37,3 +67,3 @@
 
-But we love how the design tokens gives you felxibility so we are _not_ using these palette c olors directly in the CSS, but rather from the **Design Tokens** defined in the theme file.
+But we love how the design tokens gives you felxibility so we are _not_ using these palette colors directly in the CSS, but rather from the **Design Tokens** defined in the theme file.
 A **theme** is a _group of CSS variables_ that defines colors for the application.
@@ -40,0 +70,0 @@ The tokens that are not related to colors exists also as CSS variables.

docs/documentation/typography.md

@@ -15,6 +15,8 @@ ---
 
-The `--mesure` CSS variable hold the max width of paragraph. It garantee readability per default by limiting `p` and `li` to ~70 characters.
+The `--mesure` CSS variable hold the max width of paragraph. It garantee readability per default by limiting `p` and `li` to ~70 characters. It is set by default to `60ch`.
 
 The headings will be limited to ~30 character and that'll look great by default.
 
+You might not want that behavior, for that you can declare `--mesure: auto;` in your `:root` selector.
+
 ## Font sizes
@@ -21,0 +23,0 @@

docs/documentation/utilities.md

@@ -5,1 +5,26 @@ ---
 ---
+
+# Utilities
+
+Carrot CSS provides you with a bunch of utility classes, _shadow_ for boxes and text, _font sizes_ and few text utilities.
+We do not provide more of them _on purpose_, as this is not the goal of the library. We want to stick to the minimum there.
+
+## Font Sizes
+
+Classes from `font-size-300` to `font-size-900` are provided to apply these font sizes.
+
+## Shadows
+
+Shadows for box `shadow-small`, `shadow-medium`, `shadow-large` and `shadow-extra-large` are provided.
+They also exist for text: `shadow-text-small`, `shadow-text-medium`, `shadow-text-large` and `shadow-text-extra-large`.
+
+## "Fake" Headings
+
+Sometimes an `h3` needs to look like an `h1`. Instead of breaking the HTML layout, `h1-like` from `h4-like` are provided.
+They will make anything look like an heading!
+
+## Others
+
+- `nowrap`: apply `white-space: nowrap;`
+- `truncate`: makes the text truncable and overflow with `text-overflow: ellipsis;`
+- `uppercase`: make the text uppercase

docs/pages/getting-started.md

@@ -5,2 +5,3 @@ ---
 permalink: "/getting-started/"
+containerClass: "page--getting-started"
 ---
@@ -10,2 +11,67 @@
 
-After [Installation](/documentation/installation/) you probably want to overwrite some CSS variables.
+This is a quick guide to get started. Read the [documentation](/documentation/) for more details.
+
+## Step 1: Installation
+
+Start by adding this line to your `<head>`:
+
+```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/carrot-css@0.2.3/dist/carrot.min.css"/>
+```
+
+You can also use a package manager, and we actually recommends that approach, [more on the Installation documentation](/documentation/installation/).
+
+When Carrot CSS is imported, you're all set!
+
+## Step 2: Font and Sizes
+
+But you might want to overwrite some CSS variables, you can do that by defining them in a `:root` selector.
+
+Here's what it would like like:
+
+```css
+:root,
+.theme-default {
+  --font-headings: "Your title font", "And some backup ones", serif;
+  --font-body: "You might want to keep that one the default system font stack";
+  --size-400: 1.6rem;
+}
+```
+
+- `--font-headings` and `--font-body` are the font for your design
+- `--size-400` is the base size that'll be used to calculate the other `--size`s variables via the `--ratio` value. It should be using `rem`. Know that the root font size is `10px` so `1.4rem == 14px`. More about font sizes and ratio on the [Typography documentation page](/documentation/typography/)
+
+This should be the most of it but [refer to the documentation](/documentation/css-variables/) for more informations.
+
+## Step 3: Colors and Theming
+
+About theming, Carrot CSS use some **design tokens** so you'll use color named by their _usage_, not an actual _color name_.
+You'll use variables named like `--color-text-dark` or `--color-border` instead of `--dark-blue` or `--light-blue-200`.
+
+It'll make way more sense and will make the theme easily switchable!
+
+_A Carrot CSS theme is actually just a list of design tokens and their values._
+
+You should read [the theming documentation for more informations](#).
+
+To use Carrot CSS you don't need to create your own theme. You can probably just overwrite the `default` one and the `dark` one to put it your `interactive` colors.
+
+Your _branding color_ or _main color_ is what we name `interactive` color in a theme.
+An interactive color would be used for buttons, links and anything you want to stand out in your designs.
+
+These are how you should start:
+
+```css
+:root,
+.theme-default {
+  --color-interactive: var(--pink-400);
+  --color-interactive-light: var(--pink-300);
+  --color-interactive-lighter: var(--pink-200);
+  --color-interactive-dark: var(--pink-500);
+  --color-interactive-darker: var(--pink-600);
+  --color-interactive--reverse: var(--pink-50);
+}
+```
+
+In this example we use the existing colors from the existing palette included in Carrot CSS, and we set `light`, `lighter`, `dark` and `darker` for different constrasts. The `--color-interactive--reverse` will mostly be used for text having the `--color-interactive` as a background.
+Here we used `pink-50` that is almost white, but still have that small saturation that will make it look better that pure `#fff`.

package.json

 {
   "name": "carrot-css",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A simple CSS starter, that assume as less as possible",
@@ -12,3 +12,4 @@ "main": "./dist/carrot.css",
     "build": "node cli.js colors & node cli.js compile",
-    "docs": "node cli.js cssToData & yarn eleventy --serve"
+    "docs": "node cli.js cssToData & yarn eleventy --serve",
+    "docsBuild": "node cli.js cssToData & env NODE_ENV=production yarn eleventy --pathprefix 'carrot-css'"
   },
@@ -25,2 +26,3 @@ "devDependencies": {
     "filesize": "^6.1.0",
+    "gh-pages": "^3.1.0",
     "markdown-it": "^12.0.4",
@@ -27,0 +29,0 @@ "markdown-it-anchor": "^7.1.0",

todo.md

 TODO:
 
 - proofreading
-- implements forms fields
-- example page for layout utilities
-- default look for pre and code ?
-- disabled state for buttons
-- disabled state for form elements
 - README
-- shadows as vars and classes
+- add link to files in documentation
+- deploy docs
+- build without buttons? without colors?
+- theming page
 
@@ -18,1 +16,6 @@ DONE:
 - write installation page
+- implements forms fields
+- disabled state for form elements
+- shadows as vars and classes
+- default look for pre and code ?
+- disabled state for buttons

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

319556

increased by21.82%

Number of package files

76

increased by5.56%

Lines of code

1545

increased by1.25%

Worsened metrics

Dev dependency count

19

increased by5.56%

No dependency changes