diff --git a/README.md b/README.md index 5cd9d19..501fee8 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,77 @@ # CSS-Grids -This is based on the 'Complete Guide to Grid': https://css-tricks.com/snippets/css/complete-guide-grid/ +Deployed at: https://alex2chan.github.io/CSS-Grids/ -This app is built for learning purposes only. +It is recommended to take a look at the 'Complete Guide to Grid' in which this app is based on: +https://css-tricks.com/snippets/css/complete-guide-grid/ -grid-template-areas are not implemented here. +This app is built for learning purposes only. ----- +## Setup To run locally, first get npm: +https://www.npmjs.com/get-npm + +Then clone the repository to a folder and at that folder, run: ``` npm install ``` +to install the dependencies -Then run it in development: +Then run it in development mode: ``` npm run serve ``` + +## Notes + +### Using the repeat() and minmax() CSS functions +Whenever things become repetitive, for example declaring: +``` +.grid { + grid-template-columns: 100px 100px 100px +} +``` + +We can shorten it by using the repeat() function like so: +``` +.grid { + grid-template-columns: repeat(3, 100px) +} +``` + +Which translates to 'repeat 100px 3 times'. +The first argument in the repeat function takes in the number of times you want to repeat something. +The second argument takes in the value that you want to repeat. + +The minmax function takes in the minimum and maximum size and restricts an element's size to be between them. This provides a bit of flexibility to CSS grids. + +More information can be found here: +https://developer.mozilla.org/en-US/docs/Web/CSS/repeat +https://developer.mozilla.org/en-US/docs/Web/CSS/minmax + +### Using the keywords min-content, max-content, auto, auto-fill, auto-fit +This is where CSS grids can become really flexible. Instead of just putting a fixed size like "100px", one could instead use the keyword "auto" to automatically size an element based on its content. The same goes with min-content and max-content. + +The keywords auto-fill and auto-fit can be used as the first argument of the repeat function. When "auto-fill" is used with the repeat function on the grid-template-columns property, the width of the grid will span the entire width of its parent. If the width of the parent changes depending on screen size or some other factors, the grid will also react to that. + +When "auto-fit" is used, "auto-fill" is first executed, then any empty grid items will be collapsed. The effect that this has is that the grid items are now placed in the center. + +This is not everything CSS grids has to offer, more information can be found here: +https://developer.mozilla.org/en-US/docs/Web/CSS/grid + +### Grid Template Areas +When defining grid template areas, the cells have to form a rectangle **only**, otherwise the declaration is invalid. It can be a vertical or a horizontal rectangle. An "L" shape would not work. + +More information can be found here: +https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas + +### CSS Variables in Vue +To make the CSS properties reactive, the convention of CSS variables are used. By using CSS variables I can directly manipulate the CSS property to any valid value. In Vue, we would want the CSS variable to be referenced to a property in the data or the computed object so that it becomes reactive. Then we could reference this property to a html element (for e.g. the input element) by binding it to a v-model attribute. + +This is not the end because variables in CSS are referenced within the block only. So the CSS variables that have been defined in the data or computed object property has to be put back into the block. To do that, we bind the style property to the data or computed object property that contains our CSS variables. + +More information can be found here: +https://github.com/vuejs/vue/issues/7346 +https://developer.mozilla.org/en-US/docs/Web/CSS/var +https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties diff --git a/deploy.sh b/deploy.sh new file mode 100644 index 0000000..5002861 --- /dev/null +++ b/deploy.sh @@ -0,0 +1,25 @@ +#!/usr/bin/env sh + +# abort on errors +set -e + +# build +npm run build + +# navigate into the build output directory +cd dist + +# if you are deploying to a custom domain +# echo 'www.example.com' > CNAME + +git init +git add -A +git commit -m 'deploy' + +# if you are deploying to https://.github.io +# git push -f git@github.com:/.github.io.git master + +# if you are deploying to https://.github.io/ +git push -f git@github.com:alex2chan/CSS-Grids.git master:gh-pages + +cd - diff --git a/package-lock.json b/package-lock.json index 192f454..d8629f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2390,14 +2390,36 @@ } }, "browserslist": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.0.tgz", - "integrity": "sha512-Jk0YFwXBuMOOol8n6FhgkDzn3mY9PYLYGk29zybF05SbRTsMgPqmTNeQQhOghCxq5oFqAXE3u4sYddr4C0uRhg==", + "version": "4.16.6", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", + "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30000967", - "electron-to-chromium": "^1.3.133", - "node-releases": "^1.1.19" + "caniuse-lite": "^1.0.30001219", + "colorette": "^1.2.2", + "electron-to-chromium": "^1.3.723", + "escalade": "^3.1.1", + "node-releases": "^1.1.71" + }, + "dependencies": { + "caniuse-lite": { + "version": "1.0.30001228", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz", + "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==", + "dev": true + }, + "electron-to-chromium": { + "version": "1.3.737", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.737.tgz", + "integrity": "sha512-P/B84AgUSQXaum7a8m11HUsYL8tj9h/Pt5f7Hg7Ty6bm5DxlFq+e5+ouHUoNQMsKDJ7u4yGfI8mOErCmSH9wyg==", + "dev": true + }, + "node-releases": { + "version": "1.1.72", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz", + "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==", + "dev": true + } } }, "buffer": { @@ -2843,15 +2865,21 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", - "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz", + "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==", "dev": true, "requires": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, + "colorette": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", + "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", + "dev": true + }, "combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -3763,9 +3791,9 @@ "dev": true }, "dns-packet": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz", - "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz", + "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==", "dev": true, "requires": { "ip": "^1.1.0", @@ -3842,9 +3870,9 @@ } }, "dot-prop": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz", + "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -3905,25 +3933,33 @@ "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz", "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==" }, - "electron-to-chromium": { - "version": "1.3.137", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.137.tgz", - "integrity": "sha512-kGi32g42a8vS/WnYE7ELJyejRT7hbr3UeOOu0WeuYuQ29gCpg9Lrf6RdcTQVXSt/v0bjCfnlb/EWOOsiKpTmkw==", - "dev": true - }, "elliptic": { - "version": "6.4.1", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz", - "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==", + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", + "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==", "dev": true, "requires": { - "bn.js": "^4.4.0", - "brorand": "^1.0.1", + "bn.js": "^4.11.9", + "brorand": "^1.1.0", "hash.js": "^1.0.0", - "hmac-drbg": "^1.0.0", - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0", - "minimalistic-crypto-utils": "^1.0.0" + "hmac-drbg": "^1.0.1", + "inherits": "^2.0.4", + "minimalistic-assert": "^1.0.1", + "minimalistic-crypto-utils": "^1.0.1" + }, + "dependencies": { + "bn.js": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", + "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==", + "dev": true + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + } } }, "emoji-regex": { @@ -4021,6 +4057,12 @@ "is-symbol": "^1.0.2" } }, + "escalade": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", + "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", + "dev": true + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -4349,10 +4391,21 @@ } }, "eslint-utils": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.3.1.tgz", - "integrity": "sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==", - "dev": true + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", + "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==", + "dev": true + } + } }, "eslint-visitor-keys": { "version": "1.0.0", @@ -4418,12 +4471,6 @@ "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==", "dev": true }, - "eventemitter3": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", - "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==", - "dev": true - }, "events": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz", @@ -5808,9 +5855,9 @@ "dev": true }, "highlight.js": { - "version": "9.15.6", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.6.tgz", - "integrity": "sha512-zozTAWM1D6sozHo8kqhfYgsac+B+q0PmsjXeyDrYIHHcBN0zTVT66+s2GW1GZv7DbyaROdLXKdabwS/WqPyIdQ==", + "version": "9.18.5", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.5.tgz", + "integrity": "sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==", "dev": true }, "hmac-drbg": { @@ -5830,9 +5877,9 @@ "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==" }, "hosted-git-info": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", - "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", + "version": "2.8.9", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", + "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, "hpack.js": { @@ -5993,14 +6040,22 @@ "dev": true }, "http-proxy": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz", - "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==", + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", "dev": true, "requires": { - "eventemitter3": "^3.0.0", + "eventemitter3": "^4.0.0", "follow-redirects": "^1.0.0", "requires-port": "^1.0.0" + }, + "dependencies": { + "eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "dev": true + } } }, "http-proxy-middleware": { @@ -6845,14 +6900,14 @@ } }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.defaultsdeep": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.0.tgz", - "integrity": "sha1-vsECT4WxvZbL6kBbI8FK1kQ6b4E=", + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz", + "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==", "dev": true }, "lodash.kebabcase": { @@ -7180,9 +7235,9 @@ } }, "mixin-deep": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", - "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", + "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", "dev": true, "requires": { "for-in": "^1.0.2", @@ -7326,9 +7381,9 @@ } }, "node-fetch": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", - "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==" + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" }, "node-forge": { "version": "0.7.5", @@ -7386,15 +7441,6 @@ } } }, - "node-releases": { - "version": "1.1.21", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.21.tgz", - "integrity": "sha512-TwnURTCjc8a+ElJUjmDqU6+12jhli1Q61xOQmdZ7ECZVBZuQpN/1UnembiIHDM1wCcfLvh5wrWXUF5H6ufX64Q==", - "dev": true, - "requires": { - "semver": "^5.3.0" - } - }, "normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -7852,9 +7898,9 @@ "dev": true }, "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, "path-to-regexp": { @@ -9378,9 +9424,9 @@ "dev": true }, "set-value": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz", - "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", + "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", "dev": true, "requires": { "extend-shallow": "^2.0.1", @@ -10456,38 +10502,15 @@ "dev": true }, "union-value": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", - "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", + "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", "dev": true, "requires": { "arr-union": "^3.1.0", "get-value": "^2.0.6", "is-extendable": "^0.1.1", - "set-value": "^0.4.3" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "dev": true, - "requires": { - "is-extendable": "^0.1.0" - } - }, - "set-value": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz", - "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", - "dev": true, - "requires": { - "extend-shallow": "^2.0.1", - "is-extendable": "^0.1.1", - "is-plain-object": "^2.0.1", - "to-object-path": "^0.3.0" - } - } + "set-value": "^2.0.1" } }, "uniq": { @@ -10647,9 +10670,9 @@ } }, "url-parse": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", - "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "dev": true, "requires": { "querystringify": "^2.1.1", @@ -11230,9 +11253,9 @@ } }, "websocket-extensions": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz", - "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz", + "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==", "dev": true }, "which": { @@ -11306,9 +11329,9 @@ } }, "ws": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", - "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", + "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", "requires": { "async-limiter": "~1.0.0" } @@ -11320,9 +11343,9 @@ "dev": true }, "y18n": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz", + "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==", "dev": true }, "yallist": { diff --git a/public/index.html b/public/index.html index 2022679..dfd9968 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,7 @@ + @@ -14,7 +15,7 @@

diff --git a/src/components/CssGrids.vue b/src/components/CssGrids.vue index e448055..3db96df 100644 --- a/src/components/CssGrids.vue +++ b/src/components/CssGrids.vue @@ -1,73 +1,65 @@ @@ -167,28 +153,29 @@ export default { justifyContent: 'center', gridColumnGap: '1em', gridRowGap: '1em', - gridAutoFlow: 'unset', - gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 200px))', - gridTemplateRows: 'repeat(auto-fit, minmax(100px, 200px))', - gridAutoRows: '100px', - gridAutoColumns: '100px', + gridAutoFlow: 'initial', + gridTemplateColumns: 'repeat(auto-fit, 50px)', + gridTemplateRows: 'repeat(auto-fit, 50px)', + gridTemplateAreas: '"header header header" "sidebar sidebar ." ". footer footer"', + gridAutoRows: '50px', + gridAutoColumns: '50px', itemBgColor: '#cb99e2', gridAutoFlowOptions: [ - { value: 'unset', text: 'unset' }, + { value: 'initial', text: 'initial' }, { value: 'row', text: 'row' }, { value: 'column', text: 'column' }, { value: 'row dense', text: 'row dense' }, { value: 'column dense', text: 'column dense' } ], options: [ - { value: 'unset', text: 'unset' }, + { value: 'initial', text: 'initial' }, { value: 'start', text: 'start' }, { value: 'end', text: 'end' }, { value: 'center', text: 'center' }, { value: 'stretch', text: 'stretch' } ], contentOptions: [ - { value: 'unset', text: 'unset' }, + { value: 'initial', text: 'initial' }, { value: 'start', text: 'start' }, { value: 'end', text: 'end' }, { value: 'center', text: 'center' }, @@ -204,7 +191,8 @@ export default { gridColumn: null, gridRow: null, alignSelf: null, - justifySelf: null + justifySelf: null, + gridArea: null }, gridStyleCode: '', itemStyleCode: '' @@ -213,10 +201,11 @@ export default { methods: { addItem() { var item = { - gridColumn: null, - gridRow: null, + gridColumn: 'initial', + gridRow: 'initial', alignSelf: null, - justifySelf: null + justifySelf: null, + gridArea: 'initial' } if (this.itemsRemoved.length > 0) { item.name = this.itemsRemoved[this.itemsRemoved.length-1] @@ -281,33 +270,33 @@ export default { if (this.itemObject) { this.itemObject.name = null } + var itemSubObject = { + alignSelf: null, + justifySelf: null + } this.items.push({ name: 'item0', gridColumn: '1/span 2', gridRow: '1/2', - alignSelf: null, - justifySelf: null + ...itemSubObject }) this.items.push({ name: 'item1', gridColumn: '3/4', gridRow: '1/span 2', - alignSelf: null, - justifySelf: null + ...itemSubObject }) this.items.push({ name: 'item2', gridColumn: '2/span 2', gridRow: '3/4', - alignSelf: null, - justifySelf: null + ...itemSubObject }) this.items.push({ name: 'item3', gridColumn: '1/2', gridRow: '2/span 2', - alignSelf: null, - justifySelf: null + ...itemSubObject }) }, getGridCode() { @@ -317,7 +306,7 @@ export default { var code = el.style.cssText.replace(colorTerm, '') var dashedTerm = /--/g code = code.replace(dashedTerm, '') - var addSpaceTerm = /(ns:|ws:)/g + var addSpaceTerm = /(ns:|ws:|as:)/g code = code.replace(addSpaceTerm, '$1 ') this.gridStyleCode = code }, 1) @@ -331,13 +320,6 @@ export default { beautify(code) { var searchTerm = /;/g return code.replace(searchTerm, ';\n') - }, - returnLength(length, gridGap) { - if (gridGap) { - return 'calc(' + length + ' + ' + gridGap + ')' - } else { - return length - } } }, computed: { @@ -355,7 +337,8 @@ export default { '--grid-template-columns': this.gridTemplateColumns, '--grid-template-rows': this.gridTemplateRows, '--grid-auto-columns': this.gridAutoColumns, - '--grid-auto-rows': this.gridAutoRows + '--grid-auto-rows': this.gridAutoRows, + '--grid-template-areas': this.gridTemplateAreas } }, gridGap: { @@ -370,58 +353,6 @@ export default { this.gridColumnGap = found[1] } } - }, - gridTemplateColumnsArray() { - var gridColumns = this.gridTemplateColumns.split(' ') - var columnArray = [] - var columnObject = {} - for (var i = 0; i < gridColumns.length; i++) { - columnObject.name = 'col' + i - columnObject.width = gridColumns[i] - columnArray.push({ - name: columnObject.name, - width: columnObject.width - }) - } - return columnArray - }, - gridTemplateRowsArray() { - var gridRows = this.gridTemplateRows.split(' ') - var rowArray = [] - var rowObject = {} - for (var i = 0; i < gridRows.length; i++) { - rowObject.name = 'row' + i - rowObject.height = gridRows[i] - rowArray.push({ - name: rowObject.name, - height: rowObject.height - }) - } - return rowArray - }, - gridTop() { - var whiteSpace = /\s/g - var columnString = this.gridTemplateRows.replace(whiteSpace, ' + ') - var calcString = 'calc(-1*(' + columnString + ') - ' + this.gridTemplateRowsArray.length.toString() + '*' + this.gridRowGap + ' + ' + this.gridRowGap + '/2)' - if (this.checkGrid) { - return { - top: calcString - } - } else { - return { - top: 'unset' - } - } - }, - checkGrid() { - var regexp = /\d+\w+/g - var columnArray = [...this.gridTemplateColumns.matchAll(regexp)] - var rowArray = [...this.gridTemplateRows.matchAll(regexp)] - if (columnArray.length == this.gridTemplateColumnsArray.length && rowArray.length == this.gridTemplateRowsArray.length) { - return true - } else { - return false - } } } } @@ -445,19 +376,21 @@ div >>> label.btn.btn-secondary.active { background-color: var(--inverse-color); border: none; } -.table { - position: static; -} -tr, td { - border: 1px dashed #c342d2; -} .grid { display: grid; - position: relative; grid-template-columns: var(--grid-template-columns); grid-template-rows: var(--grid-template-rows); grid-auto-columns: var(--grid-auto-columns); grid-auto-rows: var(--grid-auto-rows); + grid-template-areas: var(--grid-template-areas); +} +.resizable { + width: auto; + height: auto; + border: 1px solid white; + resize: horizontal; + margin: auto; + overflow: scroll; } .grid > div { border: 1px solid #c342d2; @@ -467,7 +400,7 @@ tr, td { .header-container { display: grid; place-content: center; - grid-template-columns: repeat(auto-fit, 11em); + grid-template-columns: repeat(auto-fit, 12em); grid-column-gap: 1em; } .button-container { @@ -485,9 +418,12 @@ tr, td { grid-column-gap: 1em; } @media (min-width: 992px) { - .code, .item-code { + .code { grid-column: 1/3; place-self: center; } + .gridArea { + grid-column: 1/3; + } } diff --git a/vue-config.js b/vue-config.js deleted file mode 100644 index aff3702..0000000 --- a/vue-config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - publicPath: process.env.NODE_ENV === 'production' - ? '/CSS-Grids/' - : '/', - pluginOptions: { - webpackBundleAnalyzer: { - openAnalyzer: true - } - } -} diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..99befbd --- /dev/null +++ b/vue.config.js @@ -0,0 +1,5 @@ +module.exports = { + publicPath: process.env.NODE_ENV === 'production' + ? '/CSS-Grids/' + : '/' +}