@medcore-ua/concrete-css 1.0.0 → 1.1.0
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.
- package/LICENSE +1 -1
- package/README.md +11 -11
- package/dist/concrete-nav.js +44 -0
- package/dist/concrete.css +10117 -0
- package/dist/concrete.css.map +1 -0
- package/dist/concrete.js +89 -0
- package/dist/concrete.min.css +5 -0
- package/dist/concrete.min.css.map +1 -0
- package/package.json +8 -8
- package/scss/abstracts/_mixins.scss +40 -11
- package/scss/abstracts/_tokens.scss +14 -2
- package/scss/components/_accordion.scss +44 -0
- package/scss/components/_article.scss +57 -0
- package/scss/components/_aside.scss +33 -0
- package/scss/components/_badge.scss +52 -0
- package/scss/components/_buttons.scss +54 -0
- package/scss/components/_card.scss +54 -0
- package/scss/components/_category.scss +22 -0
- package/scss/components/_feature.scss +26 -0
- package/scss/components/_footer.scss +35 -0
- package/scss/components/_forms.scss +45 -0
- package/scss/components/_grid.scss +48 -0
- package/scss/components/_header.scss +78 -0
- package/scss/components/_hero.scss +134 -0
- package/scss/components/_index.scss +29 -0
- package/scss/components/_info-block.scss +42 -0
- package/scss/components/_layout.scss +73 -0
- package/scss/components/_list.scss +58 -0
- package/scss/components/_map.scss +20 -0
- package/scss/components/_nav.scss +131 -0
- package/scss/components/_page.scss +39 -0
- package/scss/components/_panel.scss +53 -0
- package/scss/components/_pill.scss +38 -0
- package/scss/components/_profile-card.scss +55 -0
- package/scss/components/_schedule.scss +28 -0
- package/scss/components/_table.scss +50 -0
- package/scss/components/_utilities.scss +62 -0
- package/scss/main.scss +3 -5
- package/scss/utilities/_api.scss +7 -1
- package/scss/utilities/_core.scss +21 -5
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -4,16 +4,16 @@ Concrete is a lightweight, atomic CSS framework inspired by brutalist design pri
|
|
|
4
4
|
|
|
5
5
|
## Philosophy
|
|
6
6
|
|
|
7
|
-
- **Utility-First**: Compose complex components from simple, single-purpose utilities
|
|
8
|
-
- **Token-Driven**: All values derived from a centralized design token system
|
|
9
|
-
- **Brutalist by Default**: Strong borders, monospace fonts, high contrast
|
|
10
|
-
- **Framework-Agnostic**: Works with React, PHP, vanilla HTML, or any tech stack
|
|
11
|
-
- **Zero Magic Numbers**: Every value comes from the configuration
|
|
7
|
+
- **Utility-First**: Compose complex components from simple, single-purpose utilities.
|
|
8
|
+
- **Token-Driven**: All values derived from a centralized design token system.
|
|
9
|
+
- **Brutalist by Default**: Strong borders, monospace fonts, high contrast.
|
|
10
|
+
- **Framework-Agnostic**: Works with React, PHP, vanilla HTML, or any tech stack.
|
|
11
|
+
- **Zero Magic Numbers**: Every value comes from the configuration.
|
|
12
12
|
|
|
13
13
|
## Quick Start
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
npm install concrete-css
|
|
16
|
+
npm install @medcore-ua/concrete-css
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
```scss
|
|
@@ -32,11 +32,11 @@ npm install concrete-css
|
|
|
32
32
|
|
|
33
33
|
## Features
|
|
34
34
|
|
|
35
|
-
- **~50KB** base
|
|
36
|
-
- **Responsive** breakpoint system
|
|
37
|
-
- **Customizable**
|
|
38
|
-
- **Tree-shakeable** with PurgeCSS
|
|
39
|
-
- **TypeScript** autocomplete support
|
|
35
|
+
- **~50KB** base file size before any optimization or purging of unused styles.
|
|
36
|
+
- **Responsive** mobile-first breakpoint system that scales from small screens to large desktops.
|
|
37
|
+
- **Customizable** through Sass variables and configuration maps to match your design system.
|
|
38
|
+
- **Tree-shakeable** when used with PurgeCSS to remove all unused styles in production builds.
|
|
39
|
+
- **TypeScript** autocomplete support is planned for future releases.
|
|
40
40
|
|
|
41
41
|
## Core Concepts
|
|
42
42
|
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Concrete CSS - Navigation Toggle
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
(function() {
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
const ConcreteNav = {
|
|
9
|
+
init: function() {
|
|
10
|
+
const toggles = document.querySelectorAll('.nav-toggle');
|
|
11
|
+
|
|
12
|
+
toggles.forEach(toggle => {
|
|
13
|
+
toggle.addEventListener('click', function() {
|
|
14
|
+
const nav = this.parentElement.querySelector('.nav');
|
|
15
|
+
if (nav) {
|
|
16
|
+
nav.classList.toggle('open');
|
|
17
|
+
this.setAttribute('aria-expanded',
|
|
18
|
+
nav.classList.contains('open') ? 'true' : 'false'
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
document.addEventListener('click', function(e) {
|
|
25
|
+
const navs = document.querySelectorAll('.nav.open');
|
|
26
|
+
navs.forEach(nav => {
|
|
27
|
+
const toggle = nav.parentElement.querySelector('.nav-toggle');
|
|
28
|
+
if (toggle && !nav.contains(e.target) && !toggle.contains(e.target)) {
|
|
29
|
+
nav.classList.remove('open');
|
|
30
|
+
toggle.setAttribute('aria-expanded', 'false');
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
if (document.readyState === 'loading') {
|
|
38
|
+
document.addEventListener('DOMContentLoaded', () => ConcreteNav.init());
|
|
39
|
+
} else {
|
|
40
|
+
ConcreteNav.init();
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
window.ConcreteNav = ConcreteNav;
|
|
44
|
+
})();
|