{"_id":"frontalign","_rev":"30-1561a91f22171c4581a675c7ee74aa7d","name":"frontalign","dist-tags":{"legacy":"1.0.8","latest":"1.0.9"},"versions":{"1.0.8":{"name":"frontalign","version":"1.0.8","keywords":["css","css-framework","utility-css","ui","ui-components","ui-library","frontend","frontend-framework","components","responsive","bootstrap-alternative","tailwind-alternative"],"author":{"name":"Eyruz Badalzada"},"license":"MIT","_id":"frontalign@1.0.8","maintainers":[{"name":"frontalign","email":"eyruz2339@gmail.com"}],"homepage":"https://www.frontalign.dev","bugs":{"url":"https://github.com/frontalign/frontalign/issues"},"bin":{"frontalign":"bin/fa-cli.js"},"dist":{"shasum":"d0713553ae56bdbd4aaeffcb1abd7097923a857d","tarball":"https://registry.npmjs.org/frontalign/-/frontalign-1.0.8.tgz","fileCount":27,"integrity":"sha512-J4G1Hol0tQA8O6fVQ85Pg11FKdnhhDohQRehvb3MbXYTtqZkO4FctlPq4tq4SZbDJBnVZKZZRcW8WBTjBMiLiQ==","signatures":[{"sig":"MEQCIHmmf/vFaMLbCB2GzPTZYqWPS5A6ul6XC0zui1uPGNk7AiBBVda6lEoybMCe6m/J9THdVTs4iOk218ztVhHCMfldDQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2010091},"main":"./dist/js/frontalign.esm.js","type":"module","style":"./dist/css/frontalign.min.css","types":"./index.d.ts","module":"./dist/js/frontalign.esm.js","browser":"./dist/js/frontalign.min.js","exports":{".":{"types":"./index.d.ts","import":"./dist/js/frontalign.esm.js"},"./css":"./dist/css/frontalign.min.css","./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/frontalign-react.esm.js"}},"gitHead":"ca2f84739628752b3601cd74480bf810050140ad","scripts":{"dev":"vite","build":"rollup -c","build:watch":"rollup -c -w"},"_npmUser":{"name":"frontalign","email":"eyruz2339@gmail.com"},"repository":{"url":"git+https://github.com/frontalign/frontalign.git","type":"git"},"_npmVersion":"11.18.0","description":"Modern front-end framework. Lightweight, powerful, no chaos.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"glob":"^13.0.6","rollup":"^4.60.1","cssnano":"^7.1.4","postcss":"^8.5.14","chokidar":"^5.0.0","postcss-preset-env":"^11.2.1","@rollup/plugin-terser":"^1.0.0","rollup-plugin-cleanup":"^3.2.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-node-resolve":"^16.0.3"},"peerDependencies":{"react":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/frontalign_1.0.8_1785312076875_0.7340041608732899","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"frontalign","version":"1.0.9","description":"Modern front-end framework. Lightweight, powerful, no chaos.","author":{"name":"Eyruz Badalzada"},"license":"MIT","homepage":"https://www.frontalign.dev","repository":{"type":"git","url":"git+https://github.com/frontalign/frontalign.git"},"bin":{"frontalign":"bin/fa-cli.js"},"keywords":["css","css-framework","utility-css","ui","ui-components","ui-library","frontend","frontend-framework","components","responsive","bootstrap-alternative","tailwind-alternative"],"type":"module","types":"./index.d.ts","main":"./dist/js/frontalign.esm.js","module":"./dist/js/frontalign.esm.js","browser":"./dist/js/frontalign.min.js","style":"./dist/css/frontalign.min.css","exports":{".":{"types":"./index.d.ts","import":"./dist/js/frontalign.esm.js"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/frontalign-react.esm.js"},"./css":"./dist/css/frontalign.min.css"},"peerDependencies":{"react":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"rollup -c","build:watch":"rollup -c -w"},"devDependencies":{"@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-terser":"^1.0.0","chokidar":"^5.0.0","cssnano":"^7.1.4","glob":"^13.0.6","postcss":"^8.5.14","postcss-preset-env":"^11.2.1","rollup":"^4.60.1","rollup-plugin-cleanup":"^3.2.1","rollup-plugin-copy":"^3.5.0","rollup-plugin-postcss":"^4.0.2"},"gitHead":"d271d8b6586e2947ec0e5258c25f3712d7830660","_id":"frontalign@1.0.9","bugs":{"url":"https://github.com/frontalign/frontalign/issues"},"_nodeVersion":"24.14.0","_npmVersion":"11.18.0","dist":{"integrity":"sha512-laQP11c8ryT+XbsryTYJHa3KdusE5V2VPhWofSA+7TWDzW+90IxDmPspFgQ5RgjShmJdTjpd8NSa9ODT2Feb6w==","shasum":"a23f5064bb25780737f924cc8e259dadd475331a","tarball":"https://registry.npmjs.org/frontalign/-/frontalign-1.0.9.tgz","fileCount":27,"unpackedSize":2010242,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD5V58Wg3TkPlRbJ+ooHgXOjHfRfZds3XXPRpHDd0NHoAIgYZ1RYSetRTpIGfdD1rmY2Ej8EKHMghBwgFsh5+RFJRA="}]},"_npmUser":{"name":"frontalign","email":"eyruz2339@gmail.com"},"directories":{},"maintainers":[{"name":"frontalign","email":"eyruz2339@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/frontalign_1.0.9_1785575959652_0.7377028712645495"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-12T13:58:22.812Z","modified":"2026-08-01T09:19:20.039Z","1.0.0":"2026-07-12T13:58:23.024Z","1.0.1":"2026-07-12T14:33:16.796Z","1.0.2":"2026-07-12T18:47:32.350Z","1.0.3":"2026-07-13T18:17:11.310Z","1.0.4":"2026-07-15T12:44:45.742Z","1.0.5":"2026-07-16T14:09:30.251Z","1.0.6":"2026-07-21T08:48:01.281Z","1.1.0":"2026-07-24T13:44:06.421Z","1.0.8":"2026-07-29T08:01:17.089Z","1.0.9":"2026-08-01T09:19:19.868Z"},"bugs":{"url":"https://github.com/frontalign/frontalign/issues"},"author":{"name":"Eyruz Badalzada"},"license":"MIT","homepage":"https://www.frontalign.dev","keywords":["css","css-framework","utility-css","ui","ui-components","ui-library","frontend","frontend-framework","components","responsive","bootstrap-alternative","tailwind-alternative"],"repository":{"type":"git","url":"git+https://github.com/frontalign/frontalign.git"},"description":"Modern front-end framework. Lightweight, powerful, no chaos.","maintainers":[{"name":"frontalign","email":"eyruz2339@gmail.com"}],"readme":"# FrontAlign\r\n\r\n> Build Modern Web Interfaces Without Framework Chaos.\r\n\r\nA modern UI engine with utility-first CSS, smart components, runtime theming, CSS compiler & JIT builder, modular NPM exports, React support, hooks and a zero-dependency JavaScript runtime.\r\n\r\n---\r\n\r\nFrontAlign brings the interface layer together in one clean system.\r\n\r\n- Utility-first CSS\r\n- Modern OKLCH color system\r\n- CSS layers\r\n- Smart auto-initialized components\r\n- CSS compiler & JIT builder\r\n- Runtime theming\r\n- Dark mode\r\n- Skeleton loading system\r\n- React package with provider and hooks\r\n- Modular NPM exports\r\n- CDN support\r\n- Zero dependencies\r\n\r\nInitialize once. Build freely.\r\n\r\n---\r\n\r\n## Install\r\n```bash\r\nnpm i frontalign\r\n```\r\n\r\nOr use the CDN:\r\n\r\n```html\r\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/frontalign/dist/css/frontalign.min.css\">\r\n<script src=\"https://cdn.jsdelivr.net/npm/frontalign/dist/js/frontalign.min.js\"></script>\r\n```\r\n\r\n---\r\n\r\n## Quick Start\r\n\r\n### NPM\r\n\r\n```js\r\nimport 'frontalign/css';\r\nimport { FrontAlign } from 'frontalign';\r\n\r\nnew FrontAlign();\r\n```\r\n\r\n### CDN\r\n\r\n```html\r\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/frontalign/dist/css/frontalign.min.css\">\r\n<script src=\"https://cdn.jsdelivr.net/npm/frontalign/dist/js/frontalign.min.js\"></script>\r\n\r\n<script>\r\n    new FrontAlign();\r\n</script>\r\n```\r\n\r\nThat's it.\r\n\r\n---\r\n\r\n## What You Get\r\n\r\n| Feature | Included |\r\n|----------|----------|\r\n| Utility-First CSS | ✓ |\r\n| Modern CSS Layers | ✓ |\r\n| Smart Components | ✓ |\r\n| Smart Observer Runtime | ✓ |\r\n| CSS Compiler & JIT Builder | ✓ |\r\n| Runtime Theming | ✓ |\r\n| Dark Mode | ✓ |\r\n| Skeleton System | ✓ |\r\n| React Hooks | ✓ |\r\n| Modular NPM Exports | ✓ |\r\n| SSR Safe Runtime | ✓ |\r\n| CDN Support | ✓ |\r\n| Zero Dependencies | ✓ |\r\n\r\n---\r\n\r\n## Smart Observer Runtime\r\n\r\nFrontAlign automatically discovers and initializes supported components.\r\n\r\nAdd new content dynamically?\r\n\r\nFrontAlign detects it.\r\n\r\nRender components later?\r\n\r\nFrontAlign observes them.\r\n\r\nUse images with `data-src`?\r\n\r\nFrontAlign lazy-loads them automatically.\r\n\r\n```html\r\n<div fa-component=\"swiper\">\r\n    ...\r\n</div>\r\n\r\n```html\r\n<nav fa-component=\"tabview\">\r\n    ...\r\n</nav>\r\n\r\n<img data-src=\"/image.jpg\" alt=\"Lazy image\">\r\n```\r\n\r\n```js\r\nnew FrontAlign();\r\n```\r\n\r\nNo manual re-initialization required.\r\n\r\n---\r\n\r\n## CSS Compiler & JIT Engine\r\n\r\nFrontAlign ships with a built-in CSS compiler and JIT Engine for production builds.\r\n\r\nIt scans your project, detects the classes you actually use, applies your `frontalign.config.js` configuration, removes unused framework CSS and writes the optimized result into a single production stylesheet.\r\n\r\n```bash\r\nnpx frontalign build\r\n```\r\n\r\n```js\r\n// frontalign.config.js\r\n\r\nexport default {\r\n    theme: {\r\n        primary: '#2563eb'\r\n    },\r\n\r\n    fonts: [\r\n        {\r\n            family: 'Inter',\r\n            weights: '400,600,700'\r\n        }\r\n    ],\r\n\r\n  jit: {\r\n    scan: ['./app', './components', './pages'],\r\n    safelist: ['button', 'is-primary', 'is-active'],\r\n    extensions: ['mdx'],\r\n    debug: false,\r\n    concurrency: 50\r\n  },\r\n};\r\n```\r\n\r\nThe compiler is designed to keep your final CSS clean, small and production-ready.\r\n\r\n- Scans source files\r\n- Keeps only used FrontAlign classes\r\n- Applies theme tokens\r\n- Includes configured fonts\r\n- Preserves safelisted runtime classes\r\n- Supports custom utilities\r\n- Outputs a single optimized CSS file\r\n\r\nBuild-time optimization without shipping unnecessary CSS.\r\n\r\n---\r\n\r\n## Breakpoints\r\n\r\nFrontAlign uses a modern breakpoint scale out of the box, tuned for today's screen sizes rather than legacy device widths.\r\n\r\n```js\r\n{\r\n    sm: \"640px\",\r\n    md: \"864px\",\r\n    lg: \"1120px\",\r\n    xl: \"1408px\",\r\n    \"2xl\": \"1792px\",\r\n}\r\n```\r\n\r\nThese breakpoints power all responsive utilities (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) and can be fully customized through `frontalign.config.js`. The JIT compiler picks up your overrides at build time and regenerates the responsive utility set accordingly.\r\n\r\n```js\r\n// frontalign.config.js\r\n\r\nexport default {\r\n    theme: {\r\n    breakpoints: {\r\n        sm: \"640px\",\r\n        md: \"864px\",\r\n        lg: \"1120px\",\r\n        xl: \"1408px\",\r\n        \"2xl\": \"1792px\"\r\n    }\r\n    }\r\n};\r\n```\r\n\r\n---\r\n\r\n## Runtime Configuration\r\n\r\nNeed to update your theme without rebuilding?\r\n\r\nUse `new FrontAlign(config)`.\r\n\r\n```js\r\nnew FrontAlign({\r\n    theme: {\r\n        primary: '#6366f1'\r\n    }\r\n});\r\n```\r\n\r\nThis is for is for runtime configuration.\r\n\r\n`frontalign.config.js` is for build-time CSS compilation.\r\n\r\n---\r\n\r\n## Modular Architecture\r\n\r\nImport the full runtime:\r\n\r\n```js\r\nimport { FrontAlign } from 'frontalign';\r\n\r\nnew FrontAlign();\r\n```\r\n\r\nImport only what you need:\r\n\r\n```js\r\nimport {\r\n    Modal,\r\n    Toast,\r\n    Carousel,\r\n    DarkMode,\r\n    Skeleton\r\n} from 'frontalign';\r\n```\r\n\r\nImport CSS separately:\r\n\r\n```js\r\nimport 'frontalign/css';\r\n```\r\n---\r\n\r\n## React Support\r\n\r\nFrontAlign includes a dedicated React package with provider-based setup and hooks for React and Next.js applications.\r\n\r\n```tsx\r\n'use client';\r\n\r\nimport { useNavbar , useDrawer } from 'frontalign/react';\r\n\r\nexport default function MyReactApp(){\r\n\r\n    return (\r\n    );\r\n}\r\n```\r\n\r\nUse hooks when you need component-level control.\r\n\r\nFrontAlign continues to work with:\r\n\r\n- Vanilla JavaScript\r\n- React\r\n- Next.js\r\n- Vue\r\n- Astro\r\n- Laravel\r\n- WordPress\r\n- Static HTML\r\n\r\n---\r\n\r\n## Components\r\n\r\nFrontAlign ships with production-ready components powered by the smart runtime.\r\n\r\n| Component | Description |\r\n|------------|------------|\r\n| Modal | Dialogs and overlays |\r\n| Drawer | Slide-in panels |\r\n| Dropdown | Accessible menus |\r\n| Collapse | Expandable content |\r\n| Accordion | Collapsible sections |\r\n| Navbar | Responsive navigation |\r\n| Carousel | Advanced slider |\r\n| Swiper | Touch scrolling |\r\n| Toast | Notifications |\r\n| Tooltip | Contextual hints |\r\n| Popover | Detailed contextual information |\r\n| Alert | Dismissible messages |\r\n| Select | Enhanced selects |\r\n| Tabview | Tab interfaces |\r\n| DarkMode | Theme switching |\r\n| Form | Validation helpers |\r\n| Badge | Status indicators |\r\n| Skeleton | Loading placeholders |\r\n| Lazy Image | Automatic `data-src` image loading |\r\n| Range | Single & dual-mode range slider |\r\n\r\n---\r\n\r\n## Form Validation & Range\r\n\r\nFrontAlign's `Form` component ships with built-in validation driven directly by user input, requiring no extra JS wiring, plus optional AJAX submission support.\r\n\r\n```html\r\n<form fa-component=\"form\" data-ajax=\"/api/submit\"novalidate>\r\n    <input type=\"email\" data-rule=\"email\">\r\n    <button type=\"submit\">Send</button>\r\n</form>\r\n```\r\n\r\nThe `Range` component supports both single-value and dual-mode (min/max) sliders out of the box.\r\n\r\n```html\r\n<div class=\"group-range\"fa-component=\"range\">\r\n    <input class=\"form-range\"type=\"range\"max=\"100\"min=\"10\"/>\r\n</div>\r\n```\r\n\r\n---\r\n\r\n## Skeleton System\r\n\r\nFrontAlign includes a flexible skeleton system for loading states.\r\n\r\nUse it in static HTML, CDN projects, React, Next.js, Vue, WordPress or any server-rendered interface.\r\n\r\n```html\r\n<div\r\n  data-skeleton\r\n  data-skeleton-layout=\"card\"\r\n  data-skeleton-cols=\"2\"\r\n  data-skeleton-rows=\"3\"\r\n>\r\n  <!-- Cards rendered here after load -->\r\n</div>\r\n```\r\n\r\nSkeletons work everywhere because they are CSS-first and framework-independent.\r\n\r\n---\r\n\r\n## Browser Support\r\n\r\nFrontAlign targets modern browsers supporting:\r\n\r\n- CSS Custom Properties\r\n- OKLCH colors\r\n- CSS Layers\r\n- IntersectionObserver\r\n- MutationObserver\r\n- ES Modules\r\n- Modern DOM APIs\r\n\r\n| Browser | Version |\r\n|----------|----------|\r\n| Chrome | 111+ |\r\n| Edge | 111+ |\r\n| Firefox | 113+ |\r\n| Opera | 97+ |\r\n| Safari | 15.4+ |\r\n| iOS Safari | 15.4+ |\r\n| Samsung Internet | 22+ |\r\n\r\n---\r\n\r\n## Documentation\r\n\r\n- Website → https://frontalign.dev\r\n- Documentation → https://frontalign.dev/docs\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT © Eyruz Badalzada\r\n\r\n## Support Us\r\n\r\nIf FrontAlign helps you build better products, consider supporting the project.\r\n\r\nYour donation helps fund ongoing development, bug fixes, documentation improvements, new components, and future releases. Every contribution—large or small—helps keep FrontAlign open, modern, and actively maintained.\r\n\r\n[![Support](https://img.shields.io/badge/Support-FrontAlign-ff5f45?style=for-the-badge&logo=githubsponsors&logoColor=white)](https://buy.polar.sh/polar_cl_orrrWWpn119Wi5sWoH4SX04V7bptSiNuZPCYY0DC5As)\r\n\r\nThank you for supporting FrontAlign and helping grow the ecosystem.\r\n\r\n## Troubleshooting\r\n\r\n### Fixed elements shift when a modal or drawer opens\r\n\r\nFrontAlign locks body scrolling while drawers and modals are open. If a fixed or sticky element shifts when the scrollbar disappears, add one of the following attributes:\r\n\r\n```html\r\n<button data-fixed-lock></button>\r\n\r\n<header data-sticky-lock></header>\r\n```\r\n## Project History\r\n\r\nEarlier releases (v1.0.0–v1.0.7) were part of the project's early development phase.\r\n\r\nThis repository begins with **v1.0.8**, marking the beginning of the maintained public codebase.\r\n\r\nFrom this point onward, FrontAlign is developed in the open with a public commit history, semantic versioning, and transparent release notes.\r\n\r\n### Going Forward\r\n\r\nGoing forward, FrontAlign will continue to evolve through:\r\n\r\n- Small, focused commits with clear commit messages.\r\n- Well-documented improvements and refactors.\r\n- Detailed release notes and changelog entries.\r\n- A consistent and transparent public development process.\r\n\r\nThanks for using FrontAlign and for supporting the project through feedback, bug reports, and contributions.\r\n\r\n\r\n","readmeFilename":"README.md"}