├── .gitignore ├── LICENSE ├── README.md ├── art ├── screenshot │ ├── mobile.png │ └── web.png └── social │ └── social.png ├── art_reference └── web.png ├── css ├── main.css └── main.scss ├── gulp_lighthouse_config.js ├── gulpfile.js ├── img ├── favicon │ ├── android-chrome-144x144.png │ ├── android-chrome-192x192.png │ ├── android-chrome-256x256.png │ ├── android-chrome-36x36.png │ ├── android-chrome-384x384.png │ ├── android-chrome-48x48.png │ ├── android-chrome-512x512.png │ ├── android-chrome-72x72.png │ ├── android-chrome-96x96.png │ ├── apple-touch-icon-1024x1024.png │ ├── apple-touch-icon-114x114.png │ ├── apple-touch-icon-120x120.png │ ├── apple-touch-icon-144x144.png │ ├── apple-touch-icon-152x152.png │ ├── apple-touch-icon-167x167.png │ ├── apple-touch-icon-180x180.png │ ├── apple-touch-icon-57x57.png │ ├── apple-touch-icon-60x60.png │ ├── apple-touch-icon-72x72.png │ ├── apple-touch-icon-76x76.png │ ├── apple-touch-icon-precomposed.png │ ├── apple-touch-icon.png │ ├── apple-touch-startup-image-1125x2436.png │ ├── apple-touch-startup-image-1136x640.png │ ├── apple-touch-startup-image-1242x2208.png │ ├── apple-touch-startup-image-1242x2688.png │ ├── apple-touch-startup-image-1334x750.png │ ├── apple-touch-startup-image-1536x2048.png │ ├── apple-touch-startup-image-1620x2160.png │ ├── apple-touch-startup-image-1668x2224.png │ ├── apple-touch-startup-image-1668x2388.png │ ├── apple-touch-startup-image-1792x828.png │ ├── apple-touch-startup-image-2048x1536.png │ ├── apple-touch-startup-image-2048x2732.png │ ├── apple-touch-startup-image-2160x1620.png │ ├── apple-touch-startup-image-2208x1242.png │ ├── apple-touch-startup-image-2224x1668.png │ ├── apple-touch-startup-image-2388x1668.png │ ├── apple-touch-startup-image-2436x1125.png │ ├── apple-touch-startup-image-2688x1242.png │ ├── apple-touch-startup-image-2732x2048.png │ ├── apple-touch-startup-image-640x1136.png │ ├── apple-touch-startup-image-750x1334.png │ ├── apple-touch-startup-image-828x1792.png │ ├── browserconfig.xml │ ├── coast-228x228.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-48x48.png │ ├── favicon.ico │ ├── firefox_app_128x128.png │ ├── firefox_app_512x512.png │ ├── firefox_app_60x60.png │ ├── manifest.json │ ├── manifest.webapp │ ├── mstile-144x144.png │ ├── mstile-150x150.png │ ├── mstile-310x150.png │ ├── mstile-310x310.png │ ├── mstile-70x70.png │ ├── yandex-browser-50x50.png │ └── yandex-browser-manifest.json └── logo.png ├── index.html ├── index_favicons.html ├── index_ref.html ├── js └── main.js ├── package-lock.json ├── package.json ├── report.html └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .DS_STORE 107 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Özcan Zafer AYAN 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid template 2 | 3 | ## Installation 4 | 5 | ```bash 6 | npm install 7 | ``` 8 | 9 | ### To run 10 | 11 | ```bash 12 | gulp watch 13 | ``` 14 | 15 | ### Gulp tasks 16 | 17 | #### For favicon generating 18 | 19 | ```bash 20 | gulp favicon 21 | ``` 22 | 23 | #### For SASS 24 | 25 | ```bash 26 | gulp favicon 27 | ``` 28 | 29 | #### For Lighthouse 30 | 31 | ```bash 32 | gulp lighthouse 33 | ``` 34 | 35 | ## Other parts about project 36 | 37 | Fitness admin panel CSS Grid implementation based on https://dribbble.com/shots/insert_dribble_url_part_here 38 | 39 | ### Figma file 40 | 41 | https://www.figma.com/file/TXMamME9NWdXJrrAYakNEO 42 | 43 | ### Social media preview 44 | 45 | ![Social media preview](https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/master/art/social/social.png) 46 | 47 | ### Screenshots 48 | 49 | #### Desktop UI 50 | 51 | ![Screenshot](https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/master/art/screenshot/web.png) 52 | 53 | #### Mobile UI 54 | 55 | ![Screenshot](https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/master/art/screenshot/mobile.png) 56 | -------------------------------------------------------------------------------- /art/screenshot/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/art/screenshot/mobile.png -------------------------------------------------------------------------------- /art/screenshot/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/art/screenshot/web.png -------------------------------------------------------------------------------- /art/social/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/art/social/social.png -------------------------------------------------------------------------------- /art_reference/web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/art_reference/web.png -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; } 5 | 6 | body { 7 | height: 100%; 8 | overflow-x: hidden; 9 | margin: 0; 10 | font-family: "Open Sans", Helvetica, sans-serif; 11 | color: #fff; } 12 | 13 | input { 14 | font-family: "Open Sans", Helvetica, sans-serif; } 15 | 16 | input:focus, 17 | select:focus, 18 | textarea:focus, 19 | button:focus { 20 | outline: none; } 21 | 22 | ul { 23 | list-style: none; 24 | padding: 0; 25 | margin: 0; } 26 | 27 | textarea:focus, 28 | input:focus { 29 | outline: none; } 30 | 31 | a { 32 | text-decoration: none; } 33 | 34 | .wrapper { 35 | display: grid; 36 | height: 100vh; 37 | grid-template-rows: 4rem 1fr 4rem; 38 | grid-template-columns: 20rem 1fr; 39 | grid-template-areas: "header header" "nav main" "footer footer"; 40 | flex-wrap: wrap; } 41 | .wrapper > * { 42 | border: 1px solid #000; } 43 | 44 | .header { 45 | grid-area: header; } 46 | 47 | .aside { 48 | grid-area: nav; } 49 | 50 | .main { 51 | grid-area: main; 52 | padding: 1rem; } 53 | 54 | .footer { 55 | grid-area: footer; } 56 | -------------------------------------------------------------------------------- /css/main.scss: -------------------------------------------------------------------------------- 1 | $font-stack: 'Open Sans', 2 | Helvetica, 3 | sans-serif; 4 | // Sizes 5 | $spacing-xxxl: 3rem; 6 | $spacing-xxl: 2.5rem; 7 | $spacing-xl: 2rem; 8 | $spacing-l: 1.5rem; 9 | $spacing: 1rem; 10 | $spacing-xs: .75rem; 11 | $spacing-xxs: .5rem; 12 | $spacing-xxxs: .3rem; 13 | $spacing-xxxxs: .1rem; 14 | // Fonts 15 | $font-l:1.25rem; 16 | $font: 1rem; 17 | $font-s: .9rem; 18 | $font-xs: .8rem; 19 | $font-xxs: .75rem; 20 | $font-xxxs: .7rem; 21 | // Colors 22 | $bg: #35346c; 23 | $bg-100: #2c2b5e; 24 | $bg-200: #26254f; 25 | $primary: #745ff8; 26 | $text: #fff; 27 | $text-100: #d6d5f9; 28 | $text-200: #8f8ebb; 29 | $text-300: #5e5d85; 30 | $green: #99e47f; 31 | $blue: #53acff; 32 | $pink: #ff7d7d; 33 | $yellow: #f6cb3e; 34 | // Styles 35 | *, 36 | *::before, 37 | *::after { 38 | box-sizing: border-box; 39 | } 40 | 41 | body { 42 | height: 100%; 43 | overflow-x: hidden; 44 | margin: 0; 45 | font-family: $font-stack; 46 | color: $text; 47 | } 48 | 49 | input { 50 | font-family: $font-stack; 51 | } 52 | 53 | input:focus, 54 | select:focus, 55 | textarea:focus, 56 | button:focus { 57 | outline: none; 58 | } 59 | 60 | ul { 61 | list-style: none; 62 | padding: 0; 63 | margin: 0; 64 | } 65 | 66 | textarea:focus, 67 | input:focus { 68 | outline: none; 69 | } 70 | 71 | a { 72 | text-decoration: none; 73 | } 74 | 75 | .wrapper { 76 | display: grid; 77 | height: 100vh; 78 | grid-template-rows: 4rem 1fr 4rem; 79 | grid-template-columns: 20rem 1fr; 80 | grid-template-areas: "header header" "nav main" "footer footer"; 81 | flex-wrap: wrap; 82 | >* { 83 | border: 1px solid #000; 84 | } 85 | } 86 | 87 | .header { 88 | grid-area: header; 89 | } 90 | 91 | .aside { 92 | grid-area: nav; 93 | } 94 | 95 | .main { 96 | grid-area: main; 97 | padding: $spacing; 98 | } 99 | 100 | .footer { 101 | grid-area: footer; 102 | } -------------------------------------------------------------------------------- /gulp_lighthouse_config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'lighthouse:default', 3 | output: 'html', 4 | settings: { 5 | onlyAudits: [ 6 | 'first-meaningful-paint', 7 | 'speed-index', 8 | 'first-cpu-idle', 9 | 'interactive', 10 | ], 11 | }, 12 | }; -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const path = require('path'), 2 | open = require('opn'), 3 | gulp = require('gulp'), 4 | browserSync = require('browser-sync').create(), 5 | favicons = require("favicons").stream, 6 | log = require("fancy-log"), 7 | sass = require('gulp-sass'), 8 | connect = require('gulp-connect'), 9 | lighthouse = require('lighthouse'), 10 | printer = require('lighthouse/lighthouse-cli/printer'), 11 | chromeLauncher = require('chrome-launcher'), 12 | reportGenerator = require('lighthouse/lighthouse-core/report/report-generator'); 13 | 14 | const PORT = 8080; 15 | 16 | /* ****************** WATCHER TASK ******************* */ 17 | 18 | gulp.task('watch', function() { 19 | gulp.series('serve')(); 20 | gulp.watch('./css/**/*.scss', gulp.series('sass')); 21 | }); 22 | 23 | /* ****************** BUILD TASKS ****************** */ 24 | gulp.task('serve', () => { 25 | return browserSync.init({ 26 | server: { 27 | baseDir: './', 28 | injectChanges: true, 29 | }, 30 | }); 31 | }); 32 | 33 | 34 | /* ****************** SASS TASK ******************* */ 35 | gulp.task('sass', function() { 36 | return gulp.src('./css/**/*.scss') 37 | .pipe(sass().on('error', sass.logError)) 38 | .pipe(gulp.dest('./css')) 39 | .pipe(browserSync.stream()); 40 | }); 41 | 42 | 43 | /* ****************** FAVICON TASK ******************* */ 44 | gulp.task("favicon", function() { 45 | return gulp.src("./img/logo.png").pipe(favicons({ 46 | appName: "", 47 | appShortName: "", 48 | appDescription: "", 49 | developerName: "Zafer AYAN", 50 | developerURL: "https://twitter.com/ZaferAyan", 51 | lang: "tr-TR", 52 | background: "#fff", 53 | theme_color: "#4050F5", 54 | appleStatusBarStyle: "black-translucent", 55 | path: "img/favicon", 56 | url: "", 57 | display: "standalone", 58 | orientation: "portrait", 59 | scope: "/", 60 | start_url: "/", 61 | version: 1.0, 62 | logging: false, 63 | icons: { 64 | android: true, 65 | appleIcon: true, 66 | appleStartup: true, 67 | coast: true, 68 | favicons: true, 69 | firefox: true, 70 | windows: true, 71 | yandex: true 72 | }, 73 | html: "../../index_favicons.html", 74 | pipeHTML: true, 75 | replace: true 76 | })) 77 | .on("error", log) 78 | .pipe(gulp.dest("./img/favicon")); 79 | }); 80 | 81 | /* ****************** LIGHTHOUSE TASK ******************* */ 82 | 83 | gulp.task('lighthouse', function() { 84 | const flags = { 85 | chromeFlags: ['--show-paint-rects'], 86 | output: 'html' 87 | }; // available options - https://github.com/GoogleChrome/lighthouse/#cli-options 88 | const config = require('./gulp_lighthouse_config.js'); 89 | connect.server({ 90 | root: './', 91 | port: PORT, 92 | }) 93 | return launchChromeAndRunLighthouse(`http://localhost:${PORT}/index.html`, flags, config) 94 | .then(function(results) { 95 | writeToHtml(results); 96 | // console.log(results); 97 | return results; 98 | }) 99 | .catch(function(e) { 100 | connect.serverClose(); 101 | console.error(e); 102 | throw e; 103 | }); 104 | }); 105 | 106 | function launchChromeAndRunLighthouse(url, flags, config = null) { 107 | return chromeLauncher.launch().then(chrome => { 108 | flags.port = chrome.port; 109 | return lighthouse(url, flags, config).then(results => 110 | chrome.kill().then(() => results) 111 | ); 112 | }); 113 | } 114 | 115 | function writeToHtml(results) { 116 | const date = new Date(); 117 | const zero = (n) => { 118 | return n < 10 ? `0${n}` : n; 119 | }; 120 | const Y = date.getFullYear(); 121 | const M = zero(date.getUTCMonth() + 1); 122 | const d = zero(date.getUTCDate()); 123 | const h = zero(date.getHours()); 124 | const m = zero(date.getMinutes()); 125 | const s = zero(date.getSeconds()); 126 | const filename = `lighthouse_report-${Y}-${M}-${d}-${h}.${m}.${s}.html`; 127 | const outputPath = path.resolve('.', './report', filename); + 128 | 129 | printer.write(reportGenerator.generateReportHtml(results.lhr), 'html', outputPath).then(() => { 130 | open(outputPath, { wait: false }); 131 | connect.serverClose(); 132 | }); 133 | } 134 | //#endregion -------------------------------------------------------------------------------- /img/favicon/android-chrome-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-144x144.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-256x256.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-36x36.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-384x384.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-48x48.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-72x72.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/android-chrome-96x96.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-1024x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-1024x1024.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-167x167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-167x167.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1125x2436.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1125x2436.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1136x640.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1136x640.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1242x2208.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1242x2208.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1242x2688.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1242x2688.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1334x750.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1334x750.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1536x2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1536x2048.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1620x2160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1620x2160.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1668x2224.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1668x2224.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1668x2388.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1668x2388.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-1792x828.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-1792x828.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2048x1536.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2048x1536.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2048x2732.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2048x2732.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2160x1620.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2160x1620.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2208x1242.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2208x1242.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2224x1668.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2224x1668.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2388x1668.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2388x1668.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2436x1125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2436x1125.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2688x1242.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2688x1242.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-2732x2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-2732x2048.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-640x1136.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-640x1136.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-750x1334.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-750x1334.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-startup-image-828x1792.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/apple-touch-startup-image-828x1792.png -------------------------------------------------------------------------------- /img/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #fff 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /img/favicon/coast-228x228.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/coast-228x228.png -------------------------------------------------------------------------------- /img/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /img/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /img/favicon/favicon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/favicon-48x48.png -------------------------------------------------------------------------------- /img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/favicon.ico -------------------------------------------------------------------------------- /img/favicon/firefox_app_128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/firefox_app_128x128.png -------------------------------------------------------------------------------- /img/favicon/firefox_app_512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/firefox_app_512x512.png -------------------------------------------------------------------------------- /img/favicon/firefox_app_60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/firefox_app_60x60.png -------------------------------------------------------------------------------- /img/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "description": "", 5 | "dir": "auto", 6 | "lang": "tr-TR", 7 | "display": "standalone", 8 | "orientation": "portrait", 9 | "scope": "/", 10 | "start_url": "/", 11 | "background_color": "#fff", 12 | "theme_color": "#4050F5", 13 | "icons": [ 14 | { 15 | "src": "img/favicon/android-chrome-36x36.png", 16 | "sizes": "36x36", 17 | "type": "image/png" 18 | }, 19 | { 20 | "src": "img/favicon/android-chrome-48x48.png", 21 | "sizes": "48x48", 22 | "type": "image/png" 23 | }, 24 | { 25 | "src": "img/favicon/android-chrome-72x72.png", 26 | "sizes": "72x72", 27 | "type": "image/png" 28 | }, 29 | { 30 | "src": "img/favicon/android-chrome-96x96.png", 31 | "sizes": "96x96", 32 | "type": "image/png" 33 | }, 34 | { 35 | "src": "img/favicon/android-chrome-144x144.png", 36 | "sizes": "144x144", 37 | "type": "image/png" 38 | }, 39 | { 40 | "src": "img/favicon/android-chrome-192x192.png", 41 | "sizes": "192x192", 42 | "type": "image/png" 43 | }, 44 | { 45 | "src": "img/favicon/android-chrome-256x256.png", 46 | "sizes": "256x256", 47 | "type": "image/png" 48 | }, 49 | { 50 | "src": "img/favicon/android-chrome-384x384.png", 51 | "sizes": "384x384", 52 | "type": "image/png" 53 | }, 54 | { 55 | "src": "img/favicon/android-chrome-512x512.png", 56 | "sizes": "512x512", 57 | "type": "image/png" 58 | } 59 | ] 60 | } -------------------------------------------------------------------------------- /img/favicon/manifest.webapp: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "name": "", 4 | "description": "", 5 | "icons": { 6 | "60": "img/favicon/firefox_app_60x60.png", 7 | "128": "img/favicon/firefox_app_128x128.png", 8 | "512": "img/favicon/firefox_app_512x512.png" 9 | }, 10 | "developer": { 11 | "name": "Zafer AYAN", 12 | "url": "https://twitter.com/ZaferAyan" 13 | } 14 | } -------------------------------------------------------------------------------- /img/favicon/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/mstile-144x144.png -------------------------------------------------------------------------------- /img/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /img/favicon/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/mstile-310x150.png -------------------------------------------------------------------------------- /img/favicon/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/mstile-310x310.png -------------------------------------------------------------------------------- /img/favicon/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/mstile-70x70.png -------------------------------------------------------------------------------- /img/favicon/yandex-browser-50x50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/favicon/yandex-browser-50x50.png -------------------------------------------------------------------------------- /img/favicon/yandex-browser-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "api_version": 1, 4 | "layout": { 5 | "logo": "img/favicon/yandex-browser-50x50.png", 6 | "color": "#fff", 7 | "show_title": true 8 | } 9 | } -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ozcanzaferayan/css-grid-dashboard-template/ad9b990afc6057e043700ed3a22d062dec669a3f/img/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Grid template 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 | 69 |
70 | 71 |
72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /index_favicons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /index_ref.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reference 8 | 9 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // JS -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grid-template", 3 | "version": "1.0.0", 4 | "description": "CSS grid template project for web apps", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ozcanzaferayan/grid-template.git" 12 | }, 13 | "keywords": [ 14 | "css", 15 | "grid" 16 | ], 17 | "author": "Zafer AYAN", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/ozcanzaferayan/grid-template/issues" 21 | }, 22 | "homepage": "https://github.com/ozcanzaferayan/grid-template#readme", 23 | "dependencies": {}, 24 | "devDependencies": { 25 | "browser-sync": "^2.26.12", 26 | "gulp": "^4.0.2", 27 | "gulp-connect": "^5.7.0", 28 | "gulp-favicons": "^2.4.0", 29 | "gulp-sass": "^4.1.0", 30 | "lighthouse": "^6.1.1", 31 | "node-sass": "^4.14.1", 32 | "opn": "^6.0.0" 33 | } 34 | } 35 | --------------------------------------------------------------------------------