Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
https://github.com/johnuberbacher/lethalin
Lethalin is a new solution for front-end web develpment. A lightweight, minimal and customizable boilerplate framework.
https://github.com/johnuberbacher/lethalin
boilerplate-template css deprecated framework html javascript obsolete
Last synced: 8 months ago
JSON representation
Lethalin is a new solution for front-end web develpment. A lightweight, minimal and customizable boilerplate framework.
- Host: GitHub
- URL: https://github.com/johnuberbacher/lethalin
- Owner: johnuberbacher
- Archived: true
- Created: 2016-11-04T21:18:50.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-03T13:14:02.000Z (over 8 years ago)
- Last Synced: 2025-03-21T11:50:55.514Z (10 months ago)
- Topics: boilerplate-template, css, deprecated, framework, html, javascript, obsolete
- Language: CSS
- Homepage: http://lethalin.com
- Size: 82 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lethalin
Lethalin 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.
Visit http://lethalin.com for more information and documentation.
## Get Lethalin
For stable release, download Lethalin directly from http://lethalin.com
Lethalin is also available in minified CSS
To clone directly from Github: `git clone https://github.com/johnuberbacher/Lethalin.git`
## Get Started
[Responsive Boilerplate](#responsive-boilerplate)
[Navigation](#navigation)
[Anchors & Buttons](#anchors-and-buttons)
[Images](#images)
[Forms](#forms)
[Tables](#tables)
[Modals](#modals)
[Utility Classes](#utility-classes)
## Responsive Boilerplate
Lethalin's is designed around a 24 column based system. It was built to scale with mobile-design first.
The syntax for creating responsive columns is simple:
```
.column
```
The .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.
The syntax for multiple columns is just as simple:
```
.column .sm-12
.column .sm-12
```
Lethalin uses 3 different sizes for responsive columns: .sm-#, .md-# and .lg-#
```
.column .sm-12 .md-6
.column .sm-12 .md-6
.column .sm-12 .md-6
.column .sm-12 .md-6
```
Multiple sized columns can also be stacked:
```
.column .sm-12 .md-6
.column .sm-12 .md-6
.column .sm-12 .md-6
.column .sm-12 .md-6
```
Also remember that when not supplying a .sm-# class, .column will treat itself as a 24-width column.
```
.column .md-12
.column .md-12
```
Adding the .wide utility class to any .grid object will set your grid to a maximum width of 1200px
```
.column .md-12
```
## Navigation
Navigation markdown is very simple
```
```
You can give your header the .sticky class to create a fixed header, just make sure to give your body a corresponding margin-top.
```
```
## Anchors and Buttons
Anchor Button's can be styled into buttons using the .button class
```
Anchor
```
Turn inputs into buttons using the same .button class
```
```
Center a button with the .display-table utility class
```
```
For full-width buttons, stack .button-wide after .button
```
```
## Images
Adding .image will make any image mobile responsive
Stacking .image-round will make any image a circle
Stacking .image-rounded will give any image rounded corners
Stacking .display-block will center any image
```
```
## Forms
Form 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 < form >
```
Name
Password
Email Address
Message
```
## Tables
Tables are also very easy, just wrap your standard table inside a .table class.
```
Rank
Movie Title
Genre
Year
1
The Fellowship of the Ring
Adventure, Fantasy
2001
2
Star Wars
Adventure, Sci-fi
1977
3
Iron Man
Sci-fi, Comic Book
2008
```
## Modals
Modal overlays require very little mark up and are supported on devices of all different sizes.
It's always best practice to place your modals towards the top of your document to avoid any confliction with other elements.
To create modals, use the following mark up:
```
```
Every 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.
To trigger and open a modal, give any anchor, button or element the "button-modal" class and a matching id.
```
Get Started Today
```
## Utility Classes
Basic helper classes, these will be updated as the framework grows.
```
.wide
```
```
.column-center
```
```
.display-block
```
```
.display-table
```
```
.display-inline-block
```
```
.display-none
```
```
.float-left
```
```
.float-right
```
```
.text-center
```
```
.text-right
```
```
.text-left
```
```
.text-justify
```