{"id":20710362,"url":"https://github.com/ericwindmill/on-the-grid","last_synced_at":"2025-08-04T03:34:15.685Z","repository":{"id":90676566,"uuid":"92671943","full_name":"ericwindmill/on-the-grid","owner":"ericwindmill","description":"A free tool to master CSS Grid","archived":false,"fork":false,"pushed_at":"2017-07-04T00:21:55.000Z","size":360,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T06:19:21.133Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ericwindmill.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-28T16:08:12.000Z","updated_at":"2017-12-10T06:41:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"e07f41fa-8bdc-4fb6-9852-a914759224dc","html_url":"https://github.com/ericwindmill/on-the-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ericwindmill/on-the-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericwindmill%2Fon-the-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericwindmill%2Fon-the-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericwindmill%2Fon-the-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericwindmill%2Fon-the-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericwindmill","download_url":"https://codeload.github.com/ericwindmill/on-the-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericwindmill%2Fon-the-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268644518,"owners_count":24283338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-17T02:11:22.364Z","updated_at":"2025-08-04T03:34:15.654Z","avatar_url":"https://github.com/ericwindmill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# On the Grid \n[On The Grid](https://ericwindmill.github.io/on-the-grid/) is a sandbox that teaches web developers how to use CSS Grid.\n\n![On The Grid](http://res.cloudinary.com/ericwindmill/image/upload/c_scale,w_1000/v1496430370/Screen_Shot_2017-06-02_at_12.04.35_PM_osnafz.png)\n\nThere are two modes in CSS Grid. The main page features the sand box mode. Its your space to go crazy with different Grid properties! Or, you can click the button that takes you to the 'Tutorial' mode, where you'll follow instructions that walk you through setting up a grid.\n\n# Technology\nThis app is made with 100% pure Javascript, HTML5 and CSS3. It was a personal goal of mine to avoid any libraries or preprocessors.\n\n# Implementation\nIn order to build a single-page React Style app with only javascript, I had to create many HTML sections and use DOM manipulation to render them based on user interaction.\n\nThe app was built in a way that allows me to add new lessons by simply adding to the Javascript objects created at the top of the tutorial.js file.\n\n\n\n```javascript\n// This is an example of lesson 2.\nconst lessons = {\n  2: {\n    'lesson-copy': \"\u003ch1\u003eFrantastic Grid Work!\u003ch1\u003e\u003ch2\u003e Now check out how easy it is to overlay items!\u003c/h2\u003e\u003cbr\u003eGrid items can easily be laid over other items, so long as they're established later in the HTML. Test it it out by putting that Nav Bar where it belongs.\",\n    'lesson-editor-text-id': 'lesson-2-editor',\n    'lesson-datatip': \"grid-column is short hand for grid-column-start / grid-column-end. It takes two inputs like so: ' x / y'.\u0026#010; \u0026#010; Bonus: You can try '1 / span 2' rather than '1 / 3'.'\",\n    'delete-divs': [],\n    'new-divs': [\n      {\n        'div-type': 'NAV',\n        'classes': 'nav-tutorial',\n        'div-text': 'NAV'\n      },\n      {\n        'div-type': 'overlay-NAV',\n        'classes': 'nav-overlay',\n        'div-text': 'put NAV here'\n      }\n    ]\n  },\n```\n\n```javascript\n// This function builds the lesson... \nnextLesson (lesson) {\n    let lessonData = lessons[this.currentLesson]\n    document.getElementById('lesson-copy').innerHTML = lessonData['lesson-copy']\n    let textEditor = document.getElementById(lessonData['lesson-editor-text-id']) || ''\n    if (textEditor) {\n      textEditor.style.visibility = 'visible'\n    }\n\n    lessonData['delete-divs'].forEach(div =\u003e {\n      let parent = document.getElementById('wrapper')\n      let node = document.getElementById(div)\n      parent.removeChild(node)\n    })\n\n    lessonData['new-divs'].forEach(div =\u003e {\n      let node = document.createElement('div')\n      node.id = div['div-type']\n      node.className = `grid-item ${div['classes']}`\n      node.innerHTML = div['div-text']\n      this.gridWrapper.appendChild(node)\n      this.divs.push(div['div-type'])\n    })\n  }\n```\n\n\n\n# Future Features\nI plan to continue adding lessons to the tutorial mode.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericwindmill%2Fon-the-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericwindmill%2Fon-the-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericwindmill%2Fon-the-grid/lists"}