Merge branch 'release-0.3.4'

Author: thingsym

.github/workflows/lint.yml

@@ -16,12 +16,12 @@ jobs:
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
 
       - name: Install Node.js package dependencies
         run: npm install

.github/workflows/npm-publish.yml

@@ -12,12 +12,12 @@ jobs:
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
           registry-url: 'https://registry.npmjs.org'
           always-auth : true
 

README.md

@@ -235,6 +235,23 @@ See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-m
 5. run ```$ npm run serve```
 6. Access URL http://localhost:3000
 
+## Docker Development Environment
+
+### Build and launch website
+
+```
+docker-compose run --rm node npm install
+docker-compose run --rm  -p 3000:3000 node npm run serve
+```
+
+Access to URL http://localhost:3000
+
+### listing tasks
+
+```
+docker-compose run --rm node npm run
+```
+
 ## Contribution
 
 ### Patches and Bug Fixes
@@ -249,6 +266,15 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
 
 ## Changelog
 
+* Version 0.3.4
+  * fix npm script
+  * fix Mixins Reference
+  * add Docker Development Environment
+  * gulpfile.js for docker
+  * update package.json
+  * update github actions, Node.js 12 actions are deprecated
+  * fix layout margin
+  * add Cards Layout example
 * Version 0.3.3
   * update README
   * update index.html

dart-sass/_flexbox-grid-mixins.scss

@@ -1,6 +1,6 @@
 // ===================================================================
 // Flexbox Grid Mixins (Dart Sass)
-// Version 0.3.3
+// Version 0.3.4
 // Description: Sass Mixins to generate Flexbox grid
 // Author: thingsym
 // GitHub: https://github.com/thingsym/flexbox-grid-mixins

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3'
+
+services:
+  node:
+    image: node:14-buster
+    container_name: flexbox-grid-mixins
+    volumes:
+      - .:/flexbox-grid-mixins
+    working_dir: /flexbox-grid-mixins
+

docs/css-dart-sass/card.css

@@ -0,0 +1,50 @@
+.cards {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  row-gap: 2rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.card {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
+  flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
+  border: solid 3px #ddd;
+  padding: 1rem;
+}
+
+button {
+  width: 100%;
+  padding: 0.8rem;
+  background: #ec9f10;
+  border: solid 1px #ddd;
+}
+
+.cards.with-button .card {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.column {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
+}

docs/css-dart-sass/default.css

@@ -57,7 +57,7 @@ body {
 }
 
 .container {
-  margin: 0 2rem;
+  margin: 0 2rem 2rem 2rem;
 }
 
 h2 {

docs/css-dart-sass/responsive.css

@@ -79,7 +79,6 @@ footer {
   .HolyGrail-container {
     width: 100%;
   }
-
   .HolyGrail-body {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -94,16 +93,14 @@ footer {
     -ms-flex-pack: start;
     justify-content: flex-start;
   }
-
   .HolyGrail-content,
-.HolyGrail-aside {
+  .HolyGrail-aside {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-box-flex: 0;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto;
   }
-
   .HolyGrail-nav {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -119,7 +116,6 @@ footer {
   .HolyGrail-container {
     width: 100%;
   }
-
   .HolyGrail-body {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -134,16 +130,14 @@ footer {
     -ms-flex-pack: start;
     justify-content: flex-start;
   }
-
   .HolyGrail-content,
-.HolyGrail-aside {
+  .HolyGrail-aside {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-box-flex: 0;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto;
   }
-
   .HolyGrail-nav {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

docs/css/card.css

@@ -0,0 +1,50 @@
+.cards {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  row-gap: 2rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.card {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
+  flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
+  border: solid 3px #ddd;
+  padding: 1rem;
+}
+
+button {
+  width: 100%;
+  padding: 0.8rem;
+  background: #ec9f10;
+  border: solid 1px #ddd;
+}
+
+.cards.with-button .card {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.column {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0;
+}

docs/css/default.css

@@ -57,7 +57,7 @@ body {
 }
 
 .container {
-  margin: 0 2rem;
+  margin: 0 2rem 2rem 2rem;
 }
 
 h2 {