{"id":20528687,"url":"https://github.com/johnuberbacher/lethalin","last_synced_at":"2025-05-09T11:30:39.689Z","repository":{"id":113697458,"uuid":"72886157","full_name":"johnuberbacher/Lethalin","owner":"johnuberbacher","description":"Lethalin is a new solution for front-end web develpment. A lightweight, minimal and customizable boilerplate framework.","archived":true,"fork":false,"pushed_at":"2017-08-03T13:14:02.000Z","size":84,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T11:50:55.514Z","etag":null,"topics":["boilerplate-template","css","deprecated","framework","html","javascript","obsolete"],"latest_commit_sha":null,"homepage":"http://lethalin.com","language":"CSS","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/johnuberbacher.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":"2016-11-04T21:18:50.000Z","updated_at":"2024-02-23T16:42:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"72d3734d-4a19-4bb4-ae79-adad7ef83554","html_url":"https://github.com/johnuberbacher/Lethalin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnuberbacher%2FLethalin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnuberbacher%2FLethalin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnuberbacher%2FLethalin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnuberbacher%2FLethalin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnuberbacher","download_url":"https://codeload.github.com/johnuberbacher/Lethalin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253240350,"owners_count":21876593,"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":["boilerplate-template","css","deprecated","framework","html","javascript","obsolete"],"created_at":"2024-11-15T23:26:39.229Z","updated_at":"2025-05-09T11:30:39.678Z","avatar_url":"https://github.com/johnuberbacher.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lethalin\nLethalin is the new solution for front-end web develpment. One framework that scales across all devices, Lethalin's boilerplate markup is fast, simple and easy to customize. With less than 500 lines of code, Lethalin is easy to maintain and expand on, making it the perfect framework to start a responsive project with.\n\nVisit http://lethalin.com for more information and documentation.\n\n## Get Lethalin\nFor stable release, download Lethalin directly from http://lethalin.com\n\nLethalin is also available in minified CSS\n\n\nTo clone directly from Github: `git clone https://github.com/johnuberbacher/Lethalin.git`\n\n## Get Started\n[Responsive Boilerplate](#responsive-boilerplate)\n\n[Navigation](#navigation)\n\n[Anchors \u0026 Buttons](#anchors-and-buttons)\n\n[Images](#images)\n\n[Forms](#forms)\n\n[Tables](#tables)\n\n[Modals](#modals)\n\n[Utility Classes](#utility-classes)\n\n\n## Responsive Boilerplate\nLethalin's is designed around a 24 column based system. It was built to scale with mobile-design first. \nThe syntax for creating responsive columns is simple:\n```\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nThe .grid class holds all the columns together. It has a default max-width of 1000px, which can be changed easily. Anything smaller than 1000px retains a responsive width and height.\n\nThe syntax for multiple columns is just as simple:\n```\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"column sm-12\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nLethalin uses 3 different sizes for responsive columns: .sm-#, .md-# and .lg-#\n```\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nMultiple sized columns can also be stacked:\n```\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column sm-12 md-6\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .sm-12 .md-6\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nAlso remember that when not supplying a .sm-# class, .column will treat itself as a 24-width column.\n```\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"column md-12\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .md-12\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column md-12\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .md-12\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nAdding the .wide utility class to any .grid object will set your grid to a maximum width of 1200px\n```\n\u003cdiv class=\"grid wide\"\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"example-column\"\u003e\n      .column .md-12\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Navigation\nNavigation markdown is very simple\n```\n\u003cheader\u003e\n  \u003cdiv class=\"grid\"\u003e\n    \u003ca href=\"#\" class=\"header\"\u003e\n      Website Logo\n    \u003c/a\u003e\n    \u003cdiv class=\"navbar\"\u003e\n      \u003ca class=\"navbar-open\"\u003e\u003c/a\u003e\n      \u003cul class=\"nav-expand\"\u003e\n        \u003cli\u003e\u003ca href=\"#intro\"\u003eIntro\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#code\"\u003eCode\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#demo\"\u003eDemos\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/header\u003e\n```\nYou can give your header the .sticky class to create a fixed header, just make sure to give your body a corresponding margin-top.\n```\n\u003cheader class=\"sticky\"\u003e\n```\n\n\n## Anchors and Buttons\nAnchor Button's can be styled into buttons using the .button class\n```\n\u003ca href=\"#\" class=\"button\"\u003eAnchor\u003c/a\u003e\n```\n\nTurn inputs into buttons using the same .button class\n```\n\u003cinput type=\"submit\" class=\"button\" value=\"Submit\"\u003e\n```\n\nCenter a button with the .display-table utility class\n```\n\u003cinput type=\"submit\" class=\"button display-table\" value=\"Submit\"\u003e\n```\n\nFor full-width buttons, stack .button-wide after .button\n```\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"column md-12\"\u003e\n    \u003ca class=\"button button-wide\"\u003e.button .button-wide\u003c/a\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column md-12\"\u003e\n    \u003ca class=\"button button-wide\"\u003e.button .button-wide\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n## Images\nAdding .image will make any image mobile responsive\n\nStacking .image-round will make any image a circle\n\nStacking .image-rounded will give any image rounded corners\n\nStacking .display-block will center any image\n\n```\n\u003cimg src=\"http://placehold.it/200x200\" class=\"image image-example\"\u003e\n\u003cimg src=\"http://placehold.it/200x200\" class=\"image image-example\"\u003e\n\u003cimg src=\"http://placehold.it/200x200\" class=\"image image-example\"\u003e\n```\n\n\n## Forms\nForm syntax is nearly unchanged. By default form fields have basic styles just to clean up paddings and margins, just surround the necessary columns in a \u003c form \u003e\n```\n\u003cform\u003e\n  \u003cdiv class=\"column md-12\"\u003e\n    \u003clabel\u003eName\u003c/label\u003e\n    \u003cinput type=\"text\" placeholder=\"name\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column md-12\"\u003e\n    \u003clabel\u003ePassword\u003c/label\u003e\n    \u003cinput type=\"password\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column md-24\"\u003e\n    \u003clabel\u003eEmail Address\u003c/label\u003e\n    \u003cinput type=\"email\" placeholder=\"contact@lethalin.com\"\u003e\n    \u003clabel\u003eMessage\u003c/label\u003e\n    \u003ctextarea rows=\"3\"\u003e\u003c/textarea\u003e\n    \u003cinput type=\"submit\" class=\"button\" value=\"Submit\"\u003e\n    \u003cinput type=\"submit\" class=\"button\" value=\"Cancel\"\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n\n## Tables\nTables are also very easy, just wrap your standard table inside a .table class.\n```\n\u003cdiv class=\"column\"\u003e\n  \u003cdiv class=\"table\"\u003e\n    \u003ctable\u003e\n      \u003ctr\u003e\n        \u003cth\u003eRank\u003c/th\u003e\n\t\t\u003cth\u003eMovie Title\u003c/th\u003e\n\t\t\u003cth\u003eGenre\u003c/th\u003e\n\t\t\u003cth\u003eYear\u003c/th\u003e\n      \u003c/tr\u003e\n\t  \u003ctr\u003e\n\t    \u003cth\u003e1\u003c/th\u003e\n\t    \u003ctd\u003eThe Fellowship of the Ring\u003c/td\u003e\n\t    \u003ctd\u003eAdventure, Fantasy\u003c/td\u003e\n\t    \u003ctd\u003e2001\u003c/td\u003e\n\t  \u003c/tr\u003e\n\t  \u003ctr\u003e\n\t    \u003cth\u003e2\u003c/th\u003e\n\t    \u003ctd\u003eStar Wars\u003c/td\u003e\n\t    \u003ctd\u003eAdventure, Sci-fi\u003c/td\u003e\n\t    \u003ctd\u003e1977\u003c/td\u003e\n\t  \u003c/tr\u003e\n\t  \u003ctr\u003e\n\t    \u003cth\u003e3\u003c/th\u003e\n\t    \u003ctd\u003eIron Man\u003c/td\u003e\n\t    \u003ctd\u003eSci-fi, Comic Book\u003c/td\u003e\n\t    \u003ctd\u003e2008\u003c/td\u003e\n\t  \u003c/tr\u003e\n    \u003c/table\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n## Modals\nModal overlays require very little mark up and are supported on devices of all different sizes. \nIt's always best practice to place your modals towards the top of your document to avoid any confliction with other elements. \n\nTo create modals, use the following mark up:\n```\n\u003cdiv id=\"examplemodal-modal\" class=\"overlay\"\u003e\n  \u003cdiv class=\"modal\"\u003e\n    \u003ch2\u003eModal Overlay\u003c/h2\u003e\n    \u003cdiv class=\"content\"\u003e\n\t  \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\nEvery instance of a modal will require the id to be \"IDNAME-modal\". Javascript checks the DOM for any elements with an id ending in \"-modal\", if it's found, its considered a modal.\nTo trigger and open a modal, give any anchor, button or element the \"button-modal\" class and a matching id. \n```\n\u003ca id=\"examplemodal\" class=\"button button-modal\"\u003eGet Started Today\u003c/a\u003e\n```\n\n\n## Utility Classes\nBasic helper classes, these will be updated as the framework grows.\n```\n.wide\n```\n\n```\n.column-center\n```\n\n```\n.display-block \n```\n\n```\n.display-table\n```\n\n```\n .display-inline-block\n```\n\n```\n .display-none\n```\n\n```\n.float-left\n```\n\n```\n.float-right\n```\n\n```\n.text-center\n```\n\n```\n.text-right\n```\n\n```\n.text-left\n```\n\n```\n.text-justify\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnuberbacher%2Flethalin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnuberbacher%2Flethalin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnuberbacher%2Flethalin/lists"}