{"id":18336392,"url":"https://github.com/launchpadlab/launch","last_synced_at":"2025-08-10T23:49:00.923Z","repository":{"id":34076491,"uuid":"37881016","full_name":"LaunchPadLab/launch","owner":"LaunchPadLab","description":null,"archived":false,"fork":false,"pushed_at":"2016-01-31T06:47:37.000Z","size":199,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-09T19:55:35.558Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"openva/richmondsunlight.com","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LaunchPadLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-22T21:15:35.000Z","updated_at":"2016-01-31T06:47:38.000Z","dependencies_parsed_at":"2022-07-17T22:00:43.313Z","dependency_job_id":null,"html_url":"https://github.com/LaunchPadLab/launch","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/LaunchPadLab%2Flaunch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flaunch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flaunch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LaunchPadLab%2Flaunch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LaunchPadLab","download_url":"https://codeload.github.com/LaunchPadLab/launch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103911,"owners_count":21048245,"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-11-05T20:07:48.586Z","updated_at":"2025-04-09T19:55:39.220Z","avatar_url":"https://github.com/LaunchPadLab.png","language":"Ruby","readme":"# Launch\n\nLaunch is a repository of frontend components that are extendable and customizable. Each component includes necessary sass and javascript and offer an html generator for consistent, centralized generation of the component.\n\n# Installation\n\nGemfile:\n\n```ruby\ngem \"launch\"\n```\n\nTerminal:\n\n```\nbundle\n```\n\nWith Launch, there is no need to manually add standard settings like mixins and the reset file. At the bottom of app/assets/stylesheets/settings/settings.scss, simply add:\n\n```sass\n@import \"launch/settings/base\";\n```\n\n# Components\n\n## Card\n\n\u003cimg src=\"http://cl.ly/image/1y052J2Q3j2l/Screenshot%202015-06-24%2018.39.24.png\" width=\"200\" alt=\"Sign In\" /\u003e\n\u003cimg src=\"http://cl.ly/image/1s283i2M2E2J/Screenshot%202015-06-24%2018.45.21.png\" width=\"200\" alt=\"Trip Form\" /\u003e\n\u003cimg src=\"http://cl.ly/image/1K3w2G0d3E1S/Screenshot%202015-06-24%2018.45.28.png\" width=\"200\" / alt=\"Generic\" /\u003e\n\n### Structure\n\n- Card\n  - Header (optional)\n    - Title or Image\n  - Body\n    - Content\n    - Footer (optional)\n\n### Implementation\n\n**SASS**\n\n```sass\n// app/assets/stylesheets/settings/components/_card.scss\n\n// Card Variables\n// customize these for your app\n\n$card-settings: (\n  background-color: $white-base,\n  border: 1px solid $grey-light,\n  border-radius: 2px,\n  margin: 30px 0,\n  padding: 20px,\n  shadow-color: rgba(0, 0, 0, 0.15),\n  shadow-spread: 0 0 10px,\n  header-background-colors: (\n    primary: $yellow-base\n  ),\n  footer-margin: 15px,\n  footer-padding: 25px\n);\n```\n\n```sass\n// app/assets/stylesheets/settings/settings.scss\n@import 'components/card';\n```\n\n```sass\n// app/assets/stylesheets/application.scss\n@import \"launch/components/card\";\n```\n\n**HTML**\n\n```html\n\u003cdiv class=\"card\"\u003e\n  \u003cheader role=\"banner\" class=\"card--header color--primary\"\u003e\n    \u003ch2\u003eHeader area\u003c/h2\u003e\n  \u003c/header\u003e\n  \u003cdiv class=\"card--body\"\u003e\n    \u003cp\u003eThe Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.\u003c/p\u003e\n    \u003cfooter role=\"contentinfo\" class=\"card--footer\"\u003e\n      \u003cp\u003eSome footer content...\u003c/p\u003e\n    \u003c/footer\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Launch Component Generator\n\n**Card with header, body, and footer**\n\n```erb\n\u003c%= content_for :my_card_body do %\u003e\n  \u003cp\u003eThis is the body of the card\u003c/p\u003e\n  \u003cdiv\u003e\n    \u003cp\u003eI can put as much information\u003c/div\u003e\n    \u003cp\u003ein the body of this card as I want\u003c/p\u003e\n  \u003c/p\u003e\n\u003c% end %\u003e\n\n\u003c%= content_for :my_card_footer do %\u003e\n  \u003cp\u003eThis is the footer of the card\u003c/p\u003e\n\u003c% end %\u003e\n\n\u003c%= launch_component(:card, {\n  add_class: \"card__is-hidden\", # hides card on mobile\n  header: {\n    title: \"My great card\"\n  },\n  body: {\n    content: yield(:my_card_body),\n    footer: yield(:my_card_footer)\n  }\n}) %\u003e\n\n```\n\n**Card with only body**\n\n```erb\n\u003c%= content_for :my_card_body do %\u003e\n  \u003cp\u003eThis is the body of the card\u003c/p\u003e\n\u003c% end %\u003e\n\n\u003c%= launch_component(:card, {\n  body: yield(:my_card_body)\n}) %\u003e\n\n```\n\n**Card with image in header**\n\n```erb\n\u003c%= content_for :my_card_body do %\u003e\n  \u003cp\u003eThis is the body of the card\u003c/p\u003e\n\u003c% end %\u003e\n\n\u003c%= launch_component(:card, {\n  header: {\n    image: \"logo.png\"\n  },\n  body: yield(:my_card_body)\n}) %\u003e\n\n```\n\n\n## Alert\n\n\u003cimg src=\"http://cl.ly/image/27303h403i12/Screenshot%202015-06-24%2019.11.00.png\" width=\"200\" alt=\"Alert\" /\u003e\n\n\n### Structure\n\n- Alert\n  - Message (success, warning, or info)\n\n### Implementation\n\n```sass\n// app/assets/stylesheets/settings/components/_alerts.scss\n\n// Alert Variables\n// customize these for your app\n\n$alerts: (\n  success   $green-base   $green-dark,\n  danger    $yellow-base  $yellow-dark,\n  warning   $red-base     $red-dark,\n  default   $blue-base    $blue-dark\n);\n```\n\n```sass\n// app/assets/stylesheets/settings/settings.scss\n@import 'components/alerts';\n```\n\n```sass\n// app/assets/stylesheets/application.scss\n@import \"launch/components/alerts\";\n```\n\n```js\n// application.js\n\n//= require launch/components/_alerts\n```\n\n\n**Banner Alert: pushes content down**\n\n```erb\n\u003c!-- Error message --\u003e\n\u003c%= launch_component(\"alert/banner\", warning_message: \"My message which is a bad thing\") %\u003e\n\n\u003c!-- Success message --\u003e\n\u003c%= launch_component(\"alert/banner\", success_message: \"My message which is a good thing\") %\u003e\n\n\u003c!-- Info message --\u003e\n\u003c%= launch_component(\"alert/banner\", info_message: \"My message which is a neither good nor bad\") %\u003e\n\n\u003c!-- Catch all using Rails alert and notice helpers --\u003e\n\u003c%= launch_component(\"alert/banner\", warning_message: alert, success_message: notice) %\u003e\n```\n\n**Standard Alert: overlays on top of content**\n\n```erb\n\u003c%= launch_component(:alert, warning_message: \"My message\") %\u003e\n```\n\n## Tabs\n\n\u003cimg src=\"http://cl.ly/image/3o4609322q13/Screenshot%202015-07-06%2010.48.35.png\" width=\"400\" alt=\"Simple Tabs\" /\u003e\n\n```sass\n// app/assets/stylesheets/settings/components/_tabs.scss\n\n// Tabs Component\n// ========================================\n\n$tabs-settings: (\n  link-active-border: 5px solid $yellow-base,\n  link-active-offset: -1px,\n  link-margin: 20px,\n  link-font-settings: (\n    type: $secondary-sans-serif,\n    style: normal,\n    weight: 700\n  )\n)\n```\n\n```sass\n// app/assets/stylesheets/settings/settings.scss\n@import 'components/tabs';\n```\n\n```sass\n// app/assets/stylesheets/application.scss\n@import \"launch/components/tabs\";\n```\n\n```js\n// application.js\n\n//= require launch/components/_tabs\n```\n\n```html\n\u003cul class=\"tabs--menu\"\u003e\n  \u003cli class=\"tabs--link is-active\"\u003e\u003c%= link_to 'Truck Profile', '#truck' %\u003e\u003c/li\u003e\n  \u003cli class=\"tabs--link\"\u003e\u003c%= link_to 'User Profile', '#user' %\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv id=\"truck\" class=\"tabs--content is-active\"\u003e\n  \u003cp\u003eContent for truck\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv id=\"user\" class=\"tabs--content\"\u003e\n  \u003cp\u003eContent for user\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Modal\n\n\u003cimg src=\"http://cl.ly/image/0E1A2U2P2o0N/Screenshot%202015-07-07%2019.03.18.png\" width=\"400\" alt=\"Modal\" /\u003e\n\n### Implementation\n\n```sass\n// app/assets/stylesheets/settings/components/_modal.scss\n\n// Modal Component\n// ========================================\n\n$modal-settings: (\n  background: $white-base,\n  border-radius: 2px,\n  padding: 15px\n)\n```\n\n```sass\n// app/assets/stylesheets/settings/settings.scss\n@import 'components/modal';\n```\n\n```sass\n// app/assets/stylesheets/application.scss\n@import \"launch/components/modal\";\n```\n\n```js\n// application.js\n\n//= require launch/components/_modal\n```\n\n```html\n\u003cdiv class=\"modal\"\u003e\n  \u003clabel for=\"modal-1\"\u003e\n    \u003cdiv class=\"modal-trigger\"\u003eClick for Modal\u003c/div\u003e\n  \u003c/label\u003e\n  \u003cinput class=\"modal-state\" id=\"modal-1\" type=\"checkbox\" /\u003e\n  \u003cdiv class=\"modal-window\"\u003e\n    \u003cdiv class=\"modal-container\"\u003e\n      \u003cheader class=\"modal-header\"\u003e\n        \u003ch4 class=\"modal-header-title\"\u003eSome title...\u003c/h4\u003e\n      \u003c/header\u003e\n      \u003cdiv class=\"modal-inner\"\u003e\n        \u003cdiv class=\"modal-body center\"\u003e\n          \u003cp class=\"modal-body--tag\"\u003eModal body tag\u003c/p\u003e\n          \u003ch3 class=\"modal-body--title\"\u003eModal body title...\u003c/h3\u003e\n          \u003cp\u003eDo you want to save your load estimate?\u2028 \u003cbr\u003eCreate an account for free today.\u003c/p\u003e\u003cbr\u003e\n          \u003c%= link_to 'Sign Up', '#' %\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cfooter class=\"modal-footer\"\u003e\n        \u003c%= link_to 'Cancel', '#', class: 'modal-close' %\u003e\n      \u003c/footer\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Buttons\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Flaunch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaunchpadlab%2Flaunch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaunchpadlab%2Flaunch/lists"}