{"id":17477621,"url":"https://github.com/freyamade/netsoc-css-talk","last_synced_at":"2025-04-22T11:20:51.537Z","repository":{"id":44525023,"uuid":"105310725","full_name":"freyamade/netsoc-css-talk","owner":"freyamade","description":"css slides for netsoc techtalk","archived":false,"fork":false,"pushed_at":"2022-12-07T17:28:56.000Z","size":3147,"stargazers_count":7,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-18T23:17:34.507Z","etag":null,"topics":["bootstrap","bulma","css-framework","css3","materializecss","sass","scss","tech-talks","ucc-netsoc"],"latest_commit_sha":null,"homepage":"http://freyamade.netsoc.co/techtalks/css","language":"HTML","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/freyamade.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}},"created_at":"2017-09-29T19:44:18.000Z","updated_at":"2022-08-31T02:30:01.000Z","dependencies_parsed_at":"2023-01-24T19:19:01.379Z","dependency_job_id":null,"html_url":"https://github.com/freyamade/netsoc-css-talk","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freyamade%2Fnetsoc-css-talk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freyamade%2Fnetsoc-css-talk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freyamade%2Fnetsoc-css-talk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freyamade%2Fnetsoc-css-talk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freyamade","download_url":"https://codeload.github.com/freyamade/netsoc-css-talk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250228696,"owners_count":21395958,"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","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":["bootstrap","bulma","css-framework","css3","materializecss","sass","scss","tech-talks","ucc-netsoc"],"created_at":"2024-10-18T20:08:29.576Z","updated_at":"2025-04-22T11:20:51.517Z","avatar_url":"https://github.com/freyamade.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS\n\n![title slide](https://raw.githubusercontent.com/freyamade/netsoc-css-talk/master/title.png)\n\nCascading Style Sheets (CSS) are a way of styling your HTML to make your website look nice af.\nBut with such a large emphasis on terms like \"mobile-first\", CSS can be a tedious job.\n\nBut it doesn't have to be!\nThere are some great people out there that have done and continue to do all the hard work for us by creating frameworks such as Materialize, Bootstrap, Bulma and more!\n\nThis talk focuses on these frameworks and how easy it is to make your website look nice *and* be mobile friendly with ease!\n\nAlso we will briefly discuss SASS/SCSS as these systems are widely used in said frameworks to customize them further!\n\n## Roadmap\n\nThe talk will go as follows;\n\n1. Brief Introduction to HTML, CSS, JS\n2. Introduction of 3 frameworks\n    - Bootstrap\n    - MaterializeCSS\n    - Bulma\n3. Using one as an example, build up a simple webpage from scratch\n4. Show how the same page can look in the other 2 frameworks\n5. Brief introduction to SCSS\n    - Variables\n    - Maps\n    - Loops\n    - etc.\n6. Simple SCSS example creating `is-color` classes for some colors and use it in a webpage\n7. Profit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreyamade%2Fnetsoc-css-talk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreyamade%2Fnetsoc-css-talk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreyamade%2Fnetsoc-css-talk/lists"}