@fylgja/base - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0-beta.1

CHANGELOG.md

 # Changelog
+
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## Unreleased
 
-## [1.1.2] - 2023-08-06
-### Fixed
-- Missing inheritance for Theme component settings, closes #184
+<!-- ## 2.0.0 - 2024-09-? -->
 
-## [1.1.1] - 2022-07-24
-### Fixed
-- Lint warning
+This is a complete rebuild of the Fylgja Base component,
+now including the core v1 class-less components in to one package and optimize to be super small and still full of features!
+To make this the most optimized Started, normalize and preflight CSS package.
 
-## [1.1.0] - 2022-06-05
+## 1.1.0 - 2022-06-05
+
 ### Added
+
 - block and inline SCSS vars for v2,
@@ -23,17 +24,8 @@ you can use them, but each value will be passed to the current SCSS var for now
 ### Changed
-- ul and ol nested syntax to `:is` selector, this makes the CSS smaller
-- h{1/6} syntax to `:is` selector, this makes the CSS smaller
 
-## [1.0.2] - 2021-10-17
-### Fixed
-- Corrected heading first child insistent margin-top unset
+- `ul` and `ol` nested syntax to `:is` selector, this makes the CSS smaller
+- `h[1..6]` syntax to `:is` selector, this makes the CSS smaller
 
-## [1.0.1] - 2021-10-10
-### Added
-- `accent-color` option
+## 1.0.0 - 2021-06-22
 
-### Fixed
-- heading not inheriting the family-header CSS variable
-
-## [1.0.0] - 2021-06-22
 Initial Release 🎉

package.json

 {
   "name": "@fylgja/base",
-  "version": "1.1.2",
-  "description": "Common defaults to make your body and typography look good. And easy to change to your needs",
+  "version": "2.0.0-beta.1",
+  "description": "Base provides a streamlined starting point for any web project. It’s a collection of class-less solutions, allowing you to focus on building your site.",
   "homepage": "https://fylgja.dev/",
   "author": "Fylgja",
   "license": "MIT",
-  "main": "_index.scss",
-  "unpkg": "base.css",
-  "style": "base.css",
   "repository": {
     "type": "git",
     "url": "https://github.com/fylgja/fylgja",
-    "directory": "components/base"
+    "directory": "base"
   },
   "bugs": "https://github.com/fylgja/fylgja/issues",
   "keywords": [
-    "fylgja",
-    "fylgja component",
-    "fylgja base",
-    "css base",
-    "typography",
-    "list",
-    "media"
+    "css",
+    "scss",
+    "dark mode",
+    "class-light",
+    "semantic html",
+    "custom properties",
+    "form",
+    "switch",
+    "button",
+    "dialog",
+    "modal",
+    "offcanvas"
   ],
   "scripts": {
-    "build": "npx sass base.scss base.css --no-source-map -s compressed -I node_modules"
+    "start": "npx sass --no-source-map -w src:./",
+    "build:scss": "npx sass --no-source-map src:./",
+    "build": "npx lightningcss --minify --bundle index.css -o index.min.css",
+    "prebuild": "npm run build:scss"
   },
-  "dependencies": {
-    "@fylgja/theme": "^1.2.0"
-  }
+  "bin": {
+    "theme": "./bin/add-theme.js"
+  },
+  "style": "index.css",
+  "unpkg": "index.min.css"
 }

README.md

@@ -1,11 +0,17 @@
-# Fylgja - Base
+# Fylgja Base
 
-[![NPM version](https://img.shields.io/npm/v/@fylgja/base)](https://www.npmjs.org/package/@fylgja/base)
-![license](https://img.shields.io/github/license/fylgja/fylgja)
+Fylgja Base provides a streamlined starting point for any web project.
+It’s a collection of class-less solutions,
+allowing you to focus on building your site using plain HTML or your preferred frontend language,
+without the need to add any additional classes.
 
-Common defaults to make your body and typography look good
-and easy to change to your needs.
+If you don't require everything that Fylgja Base offers,
+you can import only the parts you need.
+For example, the preflight module provides a solid foundation for typography
+but excludes styles for forms, buttons, and the HTML dialog element.
 
 ## Installation
 
+You can install Fylgja Base via npm or other Node-based package managers like pnpm or bun:
+
 ```bash
@@ -15,12 +21,43 @@ npm install @fylgja/base
 
-Then include the component in to your code via;
+Alternatively, you can use it directly via a CDN:
 
-```scss
-@use "@fylgja/base";
-// Or via PostCSS import
+```html
+<link href="https://cdn.jsdelivr.net/npm/@fylgja/base@2.0/index.min.css" rel="stylesheet">
+```
+
+## Usage
+
+Once installed, you can import the full package with:
+
+```css
 @import "@fylgja/base";
 ```
 
-## How to use
+Alternatively, if you only need specific parts of the base, you can import them individually:
 
-For more information see the [base docs on the Fylgja.dev](https://fylgja.dev/components/base/).
+| Import Path                     | Description                                           |
+| ------------------------------- | ----------------------------------------------------- |
+| `@fylgja/base/preflight`        | Global defaults, typography and table defaults        |
+| `@fylgja/base/preflight-scoped` | Global defaults, scoped typography and table defaults |
+| `@fylgja/base/btn`              | HTML Button styles + `.btn` class for links           |
+| `@fylgja/base/btn-class-only`   | Just the `.btn` class for adding btn styles           |
+| `@fylgja/base/btn-class-less`   | Just the HTML Button styles                           |
+| `@fylgja/base/form`             | Comprehensive form styles                             |
+| `@fylgja/base/dialog`           | Dialog styles, including support for popovers         |
+
+### Theme Styles
+
+By default, Fylgja Base is a clean canvas, meaning no brand colors or additional extras are included.
+If you prefer to use predefined theme, we offer one as a separate import, or you can copy them directly into your project.
+
+```css
+@import "@fylgja/base/theme";
+```
+
+With the brand color theme, we include styles for dark mode, view transitions, primary button styling, and offcanvas support for the dialog.
+
+### Essentially class-less
+
+The Fylgja Base uses the `.btn` class to reduce button size.
+
+Alternative import options are available for those who prefer to avoid this class and want to go full class-less.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90899

increased by376.24%

Dependency count

0

decreased by-100%

Number of package files

33

increased by135.71%

Lines of code

1625

increased by12400%

Number of lines in readme file

63

increased by142.31%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@fylgja/theme@^1.2.0

• - Removed@fylgja/theme@1.2.0(transitive)