Content for Tab One
https://github.com/lukakerr/two-tone
Minimalistic CSS framework with light or dark options, completely responsive. Currently a work in progress
https://github.com/lukakerr/two-tone
css css-framework css3 minimal responsive
Last synced: 2 months ago
JSON representation
Minimalistic CSS framework with light or dark options, completely responsive. Currently a work in progress
- Host: GitHub
- URL: https://github.com/lukakerr/two-tone
- Owner: lukakerr
- License: mit
- Created: 2017-05-13T04:19:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-11T10:14:43.000Z (over 7 years ago)
- Last Synced: 2025-02-09T21:30:30.397Z (4 months ago)
- Topics: css, css-framework, css3, minimal, responsive
- Language: CSS
- Homepage:
- Size: 64.5 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# two-tone
Compile `/src` by running `sass src/style.scss dist/style.css` from `/two-tone`.
Watch all `.scss` file changes by running `sass --watch src/style.scss:dist/style.css` from `/two-tone`.
### Different Body Themes
```html
```
### Standard Navigation
The 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.
```html
```
### Mobile Navigation
```html
```
### Multiple Sections
```html
...
...
...
```
### Variable Width Columns
```html
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rutrum orci, quis accumsan quam mollis vel.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rutrum orci, quis accumsan quam mollis vel.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere rutrum orci, quis accumsan quam mollis vel.
```
### Column options
```html
- tablet
- square
- quote
- warning
- close
- push
- fill
- sml
- med
- lrg
- xlrg
- red
- blue
- green
- yellow
- orange
- purple
- black
- aqua
- nocol
- nobor
- caps
- sm-caps
```
### Tabs
```html
Tab One
Tab Two
Content for Tab Two
Tab Three
Content for Tab Three
```
### Padding/Margin Options
Add margins to most elements by adding the pd class
```html
Success
```
### Alert Banners
```html
Success
Warning
Error
Info
```
### Buttons
There are many different combinations of buttons available. Combine various class names to get different button types.
Button class names include:
```html
Tablet Button
Square Button
Button
Push Button
Tablet Filling Button
Quote
Warning!
Close
```
### Panel
```html
Hello World
This is some text
Go!
```
### Grid
Use the following syntax to create a responsive grid.
Add either `grid-2`, `grid-3`, `grid-4` or `grid-6` depending on how many grid objects you want per row.
```html
```
### Footer
```html
```