Package Exports

qorecss
qorecss/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (qorecss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

qoreCSS

A ready-to-use CSS framework that provides beautiful default styles and utility classes to quickly build modern web applications without starting from scratch.

Features

Beautiful defaults - Default styles that make HTML elements look great out of the box
Normalize.css included - Cross-browser consistency built-in
Flexbox & Grid utilities - Classes for layout positioning (row, col, center, grid3, etc.)
Responsive design - Built-in media queries for all screen sizes
CSS animations - Smooth, modern animations included
Customizable variables - Easy theming through CSS custom properties
Icon support - Color-adjustable icon system with filters
Glass morphism - Modern .obscure class with backdrop blur effects

Quick Start

CDN (Recommended)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Bijikyu/qoreCSS/core.min.css">

NPM

npm install qoreCSS

Then import in your project:

require('qoreCSS');
// or
import 'qoreCSS';

Customization

Copy variables.css to your project and modify the CSS custom properties to match your design:

:root {
    --color-dominant: #8b4c42;  /* Primary brand color */
    --color-two: #a0614a;       /* Secondary color */
    --color-bright: #b97a6e;    /* Accent color */
    --gs-lightest: #f5f3f3;     /* Light backgrounds */
    --gs-darkest: #2d1b13;      /* Dark backgrounds */
}

Key Classes

Layout

.row, .col - Flexbox containers
.center, .centerAlign - Centering utilities
.superCenter - Perfect centering for main content
.grid, .grid3, .grid4 - CSS Grid layouts
.col50, .col80 - Percentage widths

Styling

.card, .cardWhite - Card components
.bright, .dark, .lightest - Background colors
.textCenter, .textLeft - Text alignment
.padding20, .margin30 - Spacing utilities
.obscure - Glass morphism effect

Icons

.icon - Applies theme color adjustments
.iconLarge - Large icon sizing
.sq15, .sq25 - Square icon sizes

Development

# Install dependencies
npm install

# Build minified version
npm run build

# Run tests
npm test

# Lint styles
npm run lint

Performance

The framework is optimized for performance:

Minified version is automatically generated with content hashing
CDN delivery through jsDelivr with global edge caching
Gzip/Brotli compression supported
Cache headers optimized for long-term caching

Browser Support

Supports all modern browsers with the following baseline:

Chrome/Edge 88+
Firefox 85+
Safari 14+
Mobile browsers with equivalent versions

Contributing

Fork the repository
Create your feature branch
Run tests with npm test
Submit a pull request

Deployment

The project automatically builds and deploys to GitHub Pages on every push to main. The CDN is updated automatically through jsDelivr.

For self-hosting, see docs/self-hosting.md for optimal server configuration.

License

This project is licensed under the MIT License.

Support

Buy me a Coffee

Built with ❤️ for developers who want beautiful web apps without the complexity