{"id":18006329,"url":"https://github.com/lukakerr/two-tone","last_synced_at":"2025-07-23T07:04:36.594Z","repository":{"id":85632506,"uuid":"91148890","full_name":"lukakerr/two-tone","owner":"lukakerr","description":"Minimalistic CSS framework with light or dark options, completely responsive. Currently a work in progress","archived":false,"fork":false,"pushed_at":"2017-11-11T10:14:43.000Z","size":66,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-28T17:46:10.453Z","etag":null,"topics":["css","css-framework","css3","minimal","responsive"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/lukakerr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-13T04:19:58.000Z","updated_at":"2019-02-08T20:52:40.000Z","dependencies_parsed_at":"2023-03-06T22:30:28.995Z","dependency_job_id":null,"html_url":"https://github.com/lukakerr/two-tone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lukakerr/two-tone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Ftwo-tone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Ftwo-tone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Ftwo-tone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Ftwo-tone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukakerr","download_url":"https://codeload.github.com/lukakerr/two-tone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukakerr%2Ftwo-tone/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266633171,"owners_count":23959503,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["css","css-framework","css3","minimal","responsive"],"created_at":"2024-10-30T01:07:57.897Z","updated_at":"2025-07-23T07:04:36.569Z","avatar_url":"https://github.com/lukakerr.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# two-tone\n\nCompile `/src` by running `sass src/style.scss dist/style.css` from `/two-tone`.\n\nWatch all `.scss` file changes by running `sass --watch src/style.scss:dist/style.css` from `/two-tone`.\n\n### Different Body Themes\n\n```html\n\u003cbody class=\"dark\"\u003e \u003c!-- Dark Theme --\u003e\n\u003cbody class=\"narrow\"\u003e \u003c!-- Narrow Theme --\u003e\n```\n\n### Standard Navigation\n\nThe stardard nav bar can be fixed by adding class `fixed`, can be made into a dark theme by adding class `dark` or centered by adding class `centered`. These classes can be combined, for example to create a centered fixed dark nav bar.\n\n```html\n\u003cdiv class=\"nav\"\u003e\n\t\u003cul\u003e\n\t\t\u003ca href=\"#\" class=\"nav-logo\"\u003eWebsite Name\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003eItem #1\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003eItem #2\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003eItem #3\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003eItem #4\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003eItem #5\u003c/a\u003e\n\t\t\u003cdiv class=\"dropdown\"\u003e\n\t\t  \u003ca href=\"#\"\u003eDropdown #1\u003c/a\u003e\n\t\t  \u003cdiv class=\"dropdown-content\"\u003e\n\t    \t\u003ca href=\"#\"\u003eItem #1\u003c/a\u003e\n\t    \t\u003ca href=\"#\"\u003eItem #2\u003c/a\u003e\n\t    \t\u003ca href=\"#\"\u003eItem #3\u003c/a\u003e\n\t  \t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### Mobile Navigation\n\n```html\n\u003cdiv class=\"mob-nav\"\u003e \u003c!-- Dark Mode: \u003cdiv class=\"mob-nav dark\"\u003e --\u003e\n\t\u003cinput type=\"checkbox\"\u003e\n\t\u003cspan\u003e\u003c/span\u003e\n\t\u003cspan\u003e\u003c/span\u003e\n\t\u003cspan\u003e\u003c/span\u003e\n\t\u003cul class=\"mob-menu\"\u003e\n\t\t\u003ca href=\"#\"\u003e\u003cli\u003eItem #1\u003c/li\u003e\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003e\u003cli\u003eItem #2\u003c/li\u003e\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003e\u003cli\u003eItem #3\u003c/li\u003e\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003e\u003cli\u003eItem #4\u003c/li\u003e\u003c/a\u003e\n\t\t\u003ca href=\"#\"\u003e\u003cli\u003eItem #5\u003c/li\u003e\u003c/a\u003e\n\t\u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### Multiple Sections\n\n```html\n\u003cdiv class=\"sec\"\u003e \u003c!-- Dark Mode: \u003cdiv class=\"sec dark\"\u003e --\u003e\n\t...\n\u003c/div\u003e\n\n\u003cdiv class=\"sec\"\u003e\n\t...\n\u003c/div\u003e\n\n\u003cdiv class=\"sec\"\u003e\n\t...\n\u003c/div\u003e\n```\n\n### Variable Width Columns\n\n```html\n\u003cul class=\"col\"\u003e \u003c!-- Dark Mode: \u003cul class=\"col dark\"\u003e --\u003e\n\t\u003cli\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rutrum orci, quis accumsan quam mollis vel.\u003c/li\u003e\n\t\u003cli\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rutrum orci, quis accumsan quam mollis vel.\u003c/li\u003e\n\t\u003cli\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rutrum orci, quis accumsan quam mollis vel.\u003c/li\u003e\n\t\u003c!-- Can add more \u003cli\u003e for more columns --\u003e\n\u003c/ul\u003e\n```\n\n### Column options\n\n```html\n\u003cul class=\"col pd\"\u003e \u003c!-- Spacing --\u003e\n\u003cul class=\"col center\"\u003e \u003c!-- Centered text --\u003e\n\u003cul class=\"col clear\"\u003e \u003c!-- Transparent Columns --\u003e\n\u003cul class=\"col dark\"\u003e \u003c!-- Dark theme --\u003e\n\u003cul class=\"col pd dark center\"\u003e \u003c!-- Combinations are available --\u003e\n```\n\n### Tabs\n\n```html\n\u003cdiv class=\"tabs\"\u003e\n\t\u003cdiv class=\"tab\"\u003e\n\t\t\u003cinput type=\"radio\" id=\"t1\" name=\"tg1\" checked\u003e\n\t\t\u003clabel for=\"t1\"\u003eTab One\u003c/label\u003e\n\n\t\t\u003cdiv class=\"content\"\u003e\n\t\t\t\u003cp\u003eContent for Tab One\u003c/p\u003e\n\t\t\u003c/div\u003e \n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"tab\"\u003e\n\t\t\u003cinput type=\"radio\" id=\"t2\" name=\"tg1\"\u003e\n\t\t\u003clabel for=\"t2\"\u003eTab Two\u003c/label\u003e\n\n\t\t\u003cdiv class=\"content\"\u003e\n\t\t\t\u003cp\u003eContent for Tab Two\u003c/p\u003e\n\t\t\u003c/div\u003e \n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"tab\"\u003e\n\t\t\u003cinput type=\"radio\" id=\"t3\" name=\"tg1\"\u003e\n\t\t\u003clabel for=\"t3\"\u003eTab Three\u003c/label\u003e\n\n\t\t\u003cdiv class=\"content\"\u003e\n\t\t\t\u003cp\u003eContent for Tab Three\u003c/p\u003e\n\t\t\u003c/div\u003e \n\t\u003c/div\u003e\n\u003c/div\u003e \n```\n\n### Padding/Margin Options\n\nAdd margins to most elements by adding the pd class\n\n```html\n\u003cinput class=\"pd\"\u003e\n\u003cul class=\"col pd\"\u003e\u003c/ul\u003e\n\u003cdiv class=\"alert success pd\"\u003eSuccess\u003c/div\u003e\n\u003cdiv class=\"tabs pd\"\u003e\u003c/div\u003e\n\u003cinput class=\"pd\"\u003e\n\u003ctextarea class=\"pd\"\u003e\u003c/textarea\u003e\n\u003cdiv class=\"panel pd\"\u003e\u003c/div\u003e\n\n\u003c!-- Make element take up full width of page --\u003e\n\u003cul class=\"col full\"\u003e\u003c/ul\u003e\n```\n\n### Alert Banners\n\n```html\n\u003cdiv class=\"alert success\"\u003eSuccess\u003c/div\u003e\n\u003cdiv class=\"alert warning\"\u003eWarning\u003c/div\u003e\n\u003cdiv class=\"alert error\"\u003eError\u003c/div\u003e\n\u003cdiv class=\"alert info\"\u003eInfo\u003c/div\u003e\n```\n\n### Buttons\n\nThere are many different combinations of buttons available. Combine various class names to get different button types.\n\u003cbr\u003e\u003cbr\u003e\nButton class names include:\n\u003cbr\u003e\n\n\u003cli\u003etablet\u003c/li\u003e\n\u003cli\u003esquare\u003c/li\u003e\n\u003cli\u003equote\u003c/li\u003e\n\u003cli\u003ewarning\u003c/li\u003e\n\u003cli\u003eclose\u003c/li\u003e\n\u003cli\u003epush\u003c/li\u003e\n\u003cli\u003efill\u003c/li\u003e\n\u003cli\u003esml\u003c/li\u003e\n\u003cli\u003emed\u003c/li\u003e\n\u003cli\u003elrg\u003c/li\u003e\n\u003cli\u003exlrg\u003c/li\u003e\n\u003cli\u003ered\u003c/li\u003e\n\u003cli\u003eblue\u003c/li\u003e\n\u003cli\u003egreen\u003c/li\u003e\n\u003cli\u003eyellow\u003c/li\u003e\n\u003cli\u003eorange\u003c/li\u003e\n\u003cli\u003epurple\u003c/li\u003e\n\u003cli\u003eblack\u003c/li\u003e\n\u003cli\u003eaqua\u003c/li\u003e\n\u003cli\u003enocol\u003c/li\u003e\n\u003cli\u003enobor\u003c/li\u003e\n\u003cli\u003ecaps\u003c/li\u003e\n\u003cli\u003esm-caps\u003c/li\u003e\n\n\n```html\n\u003cbutton class=\"btn tablet red sm-caps\"\u003eTablet Button\u003c/button\u003e\n\u003cbutton class=\"btn square caps\"\u003eSquare Button\u003c/button\u003e\n\u003cbutton class=\"btn aqua\"\u003eButton\u003c/button\u003e\n\u003cbutton class=\"btn push lrg sm-caps\"\u003ePush Button\u003c/button\u003e\n\u003cbutton class=\"btn tablet med nocol orange fill sm-caps\"\u003eTablet Filling Button\u003c/button\u003e\n\u003cbutton class=\"btn quote sm-caps med\"\u003eQuote\u003c/button\u003e\n\u003cbutton class=\"btn warning lrg\"\u003eWarning!\u003c/button\u003e\n\u003cbutton class=\"btn close lrg\"\u003eClose\u003c/button\u003e \n```\n\n### Panel\n\n```html\n\u003cdiv class=\"panel\"\u003e\n\t\u003ch1\u003eHello World\u003c/h1\u003e\n\t\u003cp\u003eThis is some text\u003c/p\u003e\n\t\u003cbutton class=\"btn tablet\"\u003eGo!\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Grid\n\nUse the following syntax to create a responsive grid.\n\u003cbr\u003e\u003cbr\u003e\nAdd either `grid-2`, `grid-3`, `grid-4` or `grid-6` depending on how many grid objects you want per row.\n\n```html\n\u003cdiv class=\"grid\"\u003e\n\t\u003cdiv\u003e\n\t\t\u003cdiv class=\"content\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"grid grid-2\"\u003e\n\t\u003cdiv\u003e\n\t\t\u003cdiv class=\"content\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003cdiv class=\"content\"\u003e\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Footer\n\n```html\n\u003cdiv class=\"footer\"\u003e\n\t...\n\u003c/div\u003e \n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukakerr%2Ftwo-tone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukakerr%2Ftwo-tone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukakerr%2Ftwo-tone/lists"}