Fixes

bchainhub · Oct 25, 2024 · b143da3 · b143da3
1 parent fd86457
commit b143da3
Show file tree

Hide file tree

Showing 33 changed files with 238 additions and 342 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
 
 # COCO
 
-**COCO** is an open-source CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
+**COCO** is an open-source CSS framework.
 
-100% Responsive 💻 | Modular 🗂 | Modern 💈 | Free ⚗️
+Minimalistic ⛽ | Modular 🗂 | Modern 💈 | Free ⚗️
 --- | --- | --- | ---
-*Designed for multi-device support* | *Import only what you need* | *Built with Flexbox* | *Open Source*
+*As small as possible, yet feature-rich* | *Import only the components you need* | *Built on CSS3* | *Open Source*
 
 ## CDN
 
@@ -68,30 +68,20 @@ After installation, import the CSS file into your project:
 **CSS version:**
 
 ```css
-@import '@blockchainhub/coco/dist/css/coco.css';
+@import '@blockchainhub/coco/dist/coco.css';
 ```
 
 **Minified CSS version:**
 
 ```css
-@import '@blockchainhub/coco/dist/css/coco.min.css';
+@import '@blockchainhub/coco/dist/coco.min.css';
 ```
 
-**SCSS version:**
-
-```css
-@import '@blockchainhub/coco/dist/scss/coco.scss';
-```
-
-## Customize Distribution
-
-COCO is a CSS framework that outputs a single CSS file [coco.css](https://github.com/bchainhub/coco/blob/master/dist/css/coco.css) or a SASS distribution. You can use it "out of the box" or download the Sass source files to customize the variables.
-
 ## Get Started
 
-### Simplest Grid System
+### Simplest Grid System, same as Bootstrap
 
-> Add columns, and they will resize automatically based on screen size.
+> This framework uses a grid system with the same standards as Bootstrap.
 
 ### Features
 
@@ -107,34 +97,6 @@ COCO is a CSS framework that outputs a single CSS file [coco.css](https://github
 </body>
 ```
 
-#### Tabs
-
-> Create tabs without JavaScript:
-
-```html
-<div class="tabs">
-  <ul>
-    <li><a href="#tab-1">Tab 1</a></li>
-    <li><a href="#tab-2">Tab 2</a></li>
-    <li><a href="#tab-3">Tab 3</a></li>
-  </ul>
-</div>
-<section class="tab-content">
-  <article id="tab-2">Content of second tab</article>
-  <article id="tab-3">Content of third tab</article>
-  <article id="tab-1">Content of first tab (default)</article>
-</section>
-```
-
-#### Hamburger Menu
-
-> Build a hamburger menu without JavaScript:
-
-1. Add `<input type="checkbox" id="coco-navbar-toggle" aria-hidden="true" />` inside the `.navbar`.
-2. Change the link to a label: `<label for="coco-navbar-toggle" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">...</label>`.
-3. Ensure your menu `id` matches `label[data-target]` for JavaScript compatibility.
-4. Test the hamburger menu functionality.
-
 #### em.oji
 
 > Use emojis as icons with effects:
@@ -151,25 +113,13 @@ COCO is a CSS framework that outputs a single CSS file [coco.css](https://github
 <span class="coco version">version </span>
 ```
 
-## Browser Support
-
-COCO uses [autoprefixer](https://github.com/postcss/autoprefixer) to ensure Flexbox compatibility with older browsers. Based on [Can I use](https://caniuse.com/#feat=flexbox), COCO supports **recent** versions of:
-
-- Chrome
-- Edge
-- Firefox
-- Opera
-- Safari
-
-Internet Explorer 10+ is only partially supported.
-
 ## Documentation
 
 For detailed documentation, visit the [Online Manual](https://bchainhub.github.io/coco/).
 
 ## Informational Notice
 
-Wondering why some files start with an underscore?
+Have you noticed some files start with an underscore?
 
 > Sass files that begin with an underscore (`_`) are considered partials. These files are not compiled by themselves but are included in other files.
 

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "build": "npm-run-all add-version delete:dev-folder build:prod remove-version",
     "build:prod": "npm-run-all sass:prod:expanded sass:prod:compressed autoprefixer",
     "pug": "pug --obj preview/pug/assets/data.json --watch preview/pug/ --out preview/html/ --pretty",
-    "sass:preview": "sass --watch --update --style=expanded --no-source-map scss:preview/assets/css --load-path=scss",
+    "sass:preview": "sass --watch --update --style=expanded --no-source-map scss/coco-styles.scss:preview/assets/css/coco.css --load-path=scss",
     "sass:prod:expanded": "sass --no-source-map --style=expanded scss/coco-styles.scss:dist/coco.css",
     "sass:prod:compressed": "sass --no-source-map --style=compressed scss/coco-styles.scss:dist/coco.min.css",
     "lint": "npm-run-all add-version sass:lint remove-version",
@@ -47,7 +47,7 @@
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^11.0.0",
     "pug-cli": "^1.0.0-alpha6",
-    "sass": "^1.80.3",
+    "sass": "^1.80.4",
     "sass-true": "^8.1.0",
     "stylelint": "^16.10.0",
     "stylelint-config-sass-guidelines": "^12.1.0",

diff --git a/preview/pug/layout.pug b/preview/pug/layout.pug
@@ -14,7 +14,7 @@ html(lang='en')
       }
     meta(charset='UTF-8')
     meta(name='viewport' content='width=device-width, initial-scale=1.0')
-    title coco CSS Development Preview
+    title CoCo CSS Framework
     link(rel='stylesheet' href=`../../assets/css/coco.css?time=${time}`)
     link(rel='icon' href='../../assets/img/favicon-32x32.png' type='image/png')
   body
@@ -43,6 +43,8 @@ html(lang='en')
                 a(href='component.html' aria-current=page === 'component' ? 'page' : '') Component
               li
                 a(href='filters.html' aria-current=page === 'filters' ? 'page' : '') Filters
+              li
+                a(href='grid.html' aria-current=page === 'grid' ? 'page' : '') Grid system
             div(class='form-group')
               label(class='form-label') Reading direction
               select(id='reading-direction' class='form-control form-control--sm')

diff --git a/preview/pug/page/filters.pug b/preview/pug/page/filters.pug
@@ -14,54 +14,29 @@ block content
   figure(class='figure')
     img.filter.amaro(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.amaro
-  figure(class='figure')
-    img.filter.blur-5(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.blur-5
   figure(class='figure')
     img.filter.brannan(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.brannan
-  figure(class='figure')
-    img.filter.brightness-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.brightness-50
   figure(class='figure')
     img.filter.brooklyn(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.brooklyn
-  figure(class='figure')
-    img.filter.chessboard(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.chessboard
   figure(class='figure')
     img.filter.clarendon(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.clarendon
-  figure(class='figure')
-    img.filter.contrast-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.contrast-50
   figure(class='figure')
     img.filter.earlybird(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.earlybird
   figure(class='figure')
     img.filter.gingham(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.gingham
-  figure(class='figure')
-    img.filter.grayscale-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.grayscale-50
   figure(class='figure')
     img.filter.hudson(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.hudson
-  figure(class='figure')
-    img.filter.hue-rotate-90(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.hue-rotate-90
   figure(class='figure')
     img.filter.inkwell(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
     figcaption(class='figure-caption') .filter.inkwell
   figure(class='figure')
-    img.filter.invert-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.invert-50
-  figure(class='figure')
-    img.filter.opacity-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.opacity-50
-  figure(class='figure')
-    img.filter.saturate-200(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.saturate-200
-  figure(class='figure')
-    img.filter.sepia-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
-    figcaption(class='figure-caption') .filter.sepia-50
+    .row
+      div.filter.chessboard.is-light(style="width: 200px; height: 200px;")
+      div.filter.chessboard.is-dark(style="width: 200px; height: 200px;")
+    figcaption.figure-caption .filter.chessboard [.is-light, .is-dark]
diff --git a/preview/pug/page/grid.pug b/preview/pug/page/grid.pug
@@ -0,0 +1,64 @@
+extends ../layout.pug
+
+block variables
+  - var title = 'Grid system'
+  - var page = 'grid'
+
+block content
+  h2.section-title Grid system
+  p This Flexbox-based grid system, inspired by Bootstrap, allows for easy, responsive layouts. Here’s a quick guide on how to use it:
+
+  h3 Flexbox Grid System Tutorial
+
+  .tutorial-container
+    h4 Step 1: Set Up a Container
+    p Start by adding a container to center and add padding around your content.
+    pre
+      code.language-html
+        | &lt;div class="container"&gt;
+        |   &lt;div class="row"&gt;
+        |     &lt;div class="col col-12"&gt;Full Width Column&lt;/div&gt;
+        |   &lt;/div&gt;
+        | &lt;/div&gt;
+
+    h4 Step 2: Use Rows to Wrap Columns
+    p Wrap your columns in a row to structure them in a horizontal layout.
+    pre
+      code.language-html
+        | &lt;div class="row"&gt;
+        |   &lt;div class="col col-6"&gt;Half Width&lt;/div&gt;
+        |   &lt;div class="col col-6"&gt;Half Width&lt;/div&gt;
+        | &lt;/div&gt;
+
+    h4 Step 3: Define Columns with Responsive Classes
+    p Assign column classes to control width at different screen sizes:
+    pre
+      code.language-html
+        | &lt;div class="row"&gt;
+        |   &lt;div class="col-sm-12 col-md-6 col-lg-4"&gt;Responsive Column&lt;/div&gt;
+        |   &lt;div class="col-sm-12 col-md-6 col-lg-4"&gt;Responsive Column&lt;/div&gt;
+        |   &lt;div class="col-sm-12 col-md-6 col-lg-4"&gt;Responsive Column&lt;/div&gt;
+        | &lt;/div&gt;
+
+    h4 Step 4: Responsive Adjustments
+    p As the viewport changes, columns adjust based on their class. For instance:
+    ul
+      li `col-12`: Full width on all screens
+      li `col-md-6`: Half width on medium and larger screens
+      li `col-lg-4`: One-third width on large screens
+
+    h4 Step 5: Example of Nested Columns
+    p You can nest rows within columns for more complex layouts:
+    pre
+      code.language-html
+        | &lt;div class="container"&gt;
+        |   &lt;div class="row"&gt;
+        |     &lt;div class="col col-6"&gt;
+        |       &lt;div class="row"&gt;
+        |         &lt;div class="col col-6"&gt;Nested Column&lt;/div&gt;
+        |         &lt;div class="col col-6"&gt;Nested Column&lt;/div&gt;
+        |       &lt;/div&gt;
+        |     &lt;/div&gt;
+        |     &lt;div class="col col-6"&gt;Half Width Column&lt;/div&gt;
+        |   &lt;/div&gt;
+        | &lt;/div&gt;
diff --git a/preview/pug/page/media.pug b/preview/pug/page/media.pug
@@ -6,7 +6,7 @@ block variables
 
 block content
   div(style='aspect-ratio: 16 / 9;')
-    iframe(width='560' height='315' src='https://www.youtube.com/embed/-6Xl9tBWt54' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen)
+    iframe(width='560' height='315' src='https://www.youtube.com/embed/JpJvfzzm9Bc' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen)
   img(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain')
   figure(class='figure')
     img(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Mountain')

diff --git a/preview/pug/page/typography.pug b/preview/pug/page/typography.pug
@@ -76,9 +76,17 @@ block content
   p.hidden This is a hidden paragraph.
   hr
   p.lead
-    span
-      em.oji 🤩
-    span
-      em.oji.grayscale 🤓
-    span
-      em.oji.flat 💖
+    p.h4 Em.oji
+    ul
+      li
+        em.oji 🤩
+        span em.oji
+      li
+        em.oji.grayscale 🤓
+        span em.oji.grayscale
+      li
+        em.oji.flat 💖
+        span em.oji.flat
+  hr
+  div
+    span.copy [.copy] Copy this text by clicking on it and pressing Ctrl+C or Cmd+C.
diff --git a/scss/coco.scss b/scss/coco.scss
@@ -4,6 +4,6 @@
 @forward 'mixin/generator';
 @forward 'element';
 @forward 'form';
-@forward 'filters';
 @forward 'print';
 @forward 'plugin';
+@forward 'filters';
diff --git a/scss/config/_color.scss b/scss/config/_color.scss
@@ -5,9 +5,9 @@ $color-black: hsl(205deg 100% 2%) !default;
 $color-danger: hsl(0deg 71% 51%) !default;
 $color-gray: hsl(208deg 9% 42%) !default;
 $color-gray-light: hsl(215deg 63% 93%) !default;
-$color-primary: hsl(262deg 71% 49%) !default;
+$color-primary: hsl(121deg 44% 49%) !default;
 $color-secondary: hsl(227deg 92% 55%) !default;
-$color-success: hsl(150deg 100% 33%) !default;
+$color-success: hsl(167, 100%, 33%) !default;
 $color-white: hsl(0deg 0% 100%) !default;
 
 $colors: () !default;

diff --git a/scss/config/_grid.scss b/scss/config/_grid.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+
+$grid: () !default;
+$grid: map.merge(
+  (
+    'container-max-width': 1320px,      // Maximum width of the container
+    'grid-columns': 12,                 // 12 columns by default
+    'gutter-width': 1.5rem,             // 1.5rem gutters
+    'grid-breakpoints': (
+      'xs': 0,                          // Extra small devices (portrait phones)
+      'sm': 576px,                      // Small devices (landscape phones)
+      'md': 768px,                      // Medium devices (tablets)
+      'lg': 992px,                      // Large devices (desktops)
+      'xl': 1200px,                     // Extra large devices (large desktops)
+      'xxl': 1400px                     // Extra extra large devices (larger desktops)
+    ),
+    'container-widths': (
+      'sm': 540px,
+      'md': 720px,
+      'lg': 960px,
+      'xl': 1140px,
+      'xxl': 1320px
+    )
+  ),
+  $grid
+);
diff --git a/scss/config/_index.scss b/scss/config/_index.scss
@@ -3,6 +3,7 @@
 @forward 'setting';
 @forward 'spacer';
 @forward 'display';
+@forward 'grid';
 @forward 'typography';
 @forward 'button';
 @forward 'form';

diff --git a/scss/element/_default.scss b/scss/element/_default.scss
@@ -29,6 +29,15 @@
     color: color('text');
   }
 
+  body.has-sticky-footer {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    > main {
+      flex: 1;
+    }
+  }
+
   a {
     color: color('link');
     text-decoration: underline;