{"id":18090847,"url":"https://github.com/klml/usefulclassroomphrases","last_synced_at":"2025-04-06T02:35:51.676Z","repository":{"id":4181218,"uuid":"5298024","full_name":"klml/usefulclassroomphrases","owner":"klml","description":"usefulclassroomphrases is a selection for css classes used inside content areas.","archived":false,"fork":false,"pushed_at":"2021-08-24T20:40:33.000Z","size":333,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T08:40:54.018Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/klml.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-04T19:25:19.000Z","updated_at":"2021-08-24T20:40:35.000Z","dependencies_parsed_at":"2022-08-26T22:21:56.149Z","dependency_job_id":null,"html_url":"https://github.com/klml/usefulclassroomphrases","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klml%2Fusefulclassroomphrases","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klml%2Fusefulclassroomphrases/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klml%2Fusefulclassroomphrases/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/klml%2Fusefulclassroomphrases/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/klml","download_url":"https://codeload.github.com/klml/usefulclassroomphrases/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427034,"owners_count":20937197,"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":[],"created_at":"2024-10-31T18:08:08.403Z","updated_at":"2025-04-06T02:35:51.658Z","avatar_url":"https://github.com/klml.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useful class-room phrases\n\nuseful css class-room phrases is a small selection for css classes used inside content areas.\nSome simple worded, self-explanatory and self-describable classes writing and understand your source.\nInstead of writing ```style=\"float:right;margin:0 5px 0 5px;\"``` every time.\n\nMost front end frameworks have similar elements, like [foundation utility-classes](https://foundation.zurb.com/sites/docs/v/5.5.3/utility-classes.html) or [HTML KickStart extras](http://www.99lime.com/elements/#extras).\n\n\n[demo](https://klml.github.io/usefulclassroomphrases/)\n\n## ucp.css\n\nMost classes in [ucp.css](ucp.css) are selfdescribing (e.g. clear, left, none).\n\nOnly **row2** is special:\nto have a not html-tabled 2-column table to markup semantic pairs, using a [definition Lists](https://www.w3.org/MarkUp/html3/deflists.html). This classes must be around the dl.\n\n```css\n   \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"//cdn.jsdelivr.net/gh/klml/usefulclassroomphrases@master/ucp.css\"\u003e\n```\n\n## example.local.css\n\n[example.local.css](example.local.css) is a example for local.css with common used classes you have to customze (link color)\n\n* ```.main``` is the _main_ content area, it should have another background-color than the whole body and you _can_ this combine with ```.panel``` .\n* ```.panel```: centered content. Set this declaration direct in your body tag, or if you want  elements over the whole page width(like [panorama images](https://klml.github.io/usefulclassroomphrases/#panoramabackground)), in any wrapper elements.\n  * ```paneloutbreak``` allows elements in panels to burst out.\n* ```ul```: has no list-style but a bullet image\n* ```a```: there are diffrent kinds of hyperlinks:\n  * ```a```: used on _site-internal_ links (```/impressum```)\n  * ```a:visited```: [Browsers limits the styles that can be set for a:visited links to all kind of colors, due to security issues.](https://www.w3schools.com/cssref/sel_visited.asp). This example uses ```color: inherit;``` to reduce the accentuation and newness for already visited links\n  * ```a:hover```: hover\n  * ```a:active```: and class ```a.active```, useful to identify links to current pages (menus, sidebars etc)\n  * ```a[href^=\"#\"]```: for anchor-links staying on the current page (```#footer```)\n  * ```a[href^=\"//\"]``` and ```a[href^=\"http\"]```: for site external links (```https://example.com```)\n* **lead**: blogs, news, most pages have [Lead paragraph](http://en.wikipedia.org/wiki/Lead_paragraph)\n\nColors, sizes and contrasts inspired by [bettermotherfuckingwebsite.com](http://bettermotherfuckingwebsite.com).\n\n\n## icons\n\n* selection for css-icons for hyperlinks with Data URI (base64): payload demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklml%2Fusefulclassroomphrases","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fklml%2Fusefulclassroomphrases","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fklml%2Fusefulclassroomphrases/lists"}