https://github.com/launchpadlab/launch
https://github.com/launchpadlab/launch
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/launchpadlab/launch
- Owner: LaunchPadLab
- License: mit
- Created: 2015-06-22T21:15:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-31T06:47:37.000Z (about 10 years ago)
- Last Synced: 2025-04-09T19:55:35.558Z (10 months ago)
- Language: Ruby
- Size: 194 KB
- Stars: 0
- Watchers: 15
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE
Awesome Lists containing this project
README
# Launch
Launch 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.
# Installation
Gemfile:
```ruby
gem "launch"
```
Terminal:
```
bundle
```
With 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:
```sass
@import "launch/settings/base";
```
# Components
## Card
### Structure
- Card
- Header (optional)
- Title or Image
- Body
- Content
- Footer (optional)
### Implementation
**SASS**
```sass
// app/assets/stylesheets/settings/components/_card.scss
// Card Variables
// customize these for your app
$card-settings: (
background-color: $white-base,
border: 1px solid $grey-light,
border-radius: 2px,
margin: 30px 0,
padding: 20px,
shadow-color: rgba(0, 0, 0, 0.15),
shadow-spread: 0 0 10px,
header-background-colors: (
primary: $yellow-base
),
footer-margin: 15px,
footer-padding: 25px
);
```
```sass
// app/assets/stylesheets/settings/settings.scss
@import 'components/card';
```
```sass
// app/assets/stylesheets/application.scss
@import "launch/components/card";
```
**HTML**
```html
Header area
The 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.
Some footer content...
```
### Launch Component Generator
**Card with header, body, and footer**
```erb
<%= content_for :my_card_body do %>
This is the body of the card
I can put as much information
in the body of this card as I want
<% end %>
<%= content_for :my_card_footer do %>
This is the footer of the card
<% end %>
<%= launch_component(:card, {
add_class: "card__is-hidden", # hides card on mobile
header: {
title: "My great card"
},
body: {
content: yield(:my_card_body),
footer: yield(:my_card_footer)
}
}) %>
```
**Card with only body**
```erb
<%= content_for :my_card_body do %>
This is the body of the card
<% end %>
<%= launch_component(:card, {
body: yield(:my_card_body)
}) %>
```
**Card with image in header**
```erb
<%= content_for :my_card_body do %>
This is the body of the card
<% end %>
<%= launch_component(:card, {
header: {
image: "logo.png"
},
body: yield(:my_card_body)
}) %>
```
## Alert
### Structure
- Alert
- Message (success, warning, or info)
### Implementation
```sass
// app/assets/stylesheets/settings/components/_alerts.scss
// Alert Variables
// customize these for your app
$alerts: (
success $green-base $green-dark,
danger $yellow-base $yellow-dark,
warning $red-base $red-dark,
default $blue-base $blue-dark
);
```
```sass
// app/assets/stylesheets/settings/settings.scss
@import 'components/alerts';
```
```sass
// app/assets/stylesheets/application.scss
@import "launch/components/alerts";
```
```js
// application.js
//= require launch/components/_alerts
```
**Banner Alert: pushes content down**
```erb
<%= launch_component("alert/banner", warning_message: "My message which is a bad thing") %>
<%= launch_component("alert/banner", success_message: "My message which is a good thing") %>
<%= launch_component("alert/banner", info_message: "My message which is a neither good nor bad") %>
<%= launch_component("alert/banner", warning_message: alert, success_message: notice) %>
```
**Standard Alert: overlays on top of content**
```erb
<%= launch_component(:alert, warning_message: "My message") %>
```
## Tabs
```sass
// app/assets/stylesheets/settings/components/_tabs.scss
// Tabs Component
// ========================================
$tabs-settings: (
link-active-border: 5px solid $yellow-base,
link-active-offset: -1px,
link-margin: 20px,
link-font-settings: (
type: $secondary-sans-serif,
style: normal,
weight: 700
)
)
```
```sass
// app/assets/stylesheets/settings/settings.scss
@import 'components/tabs';
```
```sass
// app/assets/stylesheets/application.scss
@import "launch/components/tabs";
```
```js
// application.js
//= require launch/components/_tabs
```
```html
Content for truck
Content for user
```
## Modal
### Implementation
```sass
// app/assets/stylesheets/settings/components/_modal.scss
// Modal Component
// ========================================
$modal-settings: (
background: $white-base,
border-radius: 2px,
padding: 15px
)
```
```sass
// app/assets/stylesheets/settings/settings.scss
@import 'components/modal';
```
```sass
// app/assets/stylesheets/application.scss
@import "launch/components/modal";
```
```js
// application.js
//= require launch/components/_modal
```
```html
Some title...
Modal body tag
Modal body title...
Do you want to save your load estimate?
Create an account for free today.
<%= link_to 'Sign Up', '#' %>
<%= link_to 'Cancel', '#', class: 'modal-close' %>
```
## Buttons