Foreword
This is a demo showcasing the default styles of the Skeleton SASS and the functionality of the media queries. Resize your browser window or view this file on a smart phone and see the magic!
Also, a special note on the form elements at the bottom of the page. These utilize new HTML 5 form types such as tel, search, url, and email. Video these on mobile device to see how easy they make life for mobile users! Seriously, you'll be amazed.
Your default viewport size:
Your current viewport size (resize to change):
Code
@include grid($baseWidth, true); // desktop grid @include grid($tabletWidth, true); // tablet grid
Paragraph & Alignment
Left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit. Vestibulum non condimentum turpis. Ut adipiscing pulvinar enim non elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam adipiscing pharetra lectus, at malesuada ipsum ullamcorper a. Ut in lorem turpis, id lobortis arcu. Morbi pharetra lectus a sem tincidunt in convallis nunc ultricies. Fusce et dignissim velit. Quisque vel nunc sit amet libero semper tempor sed id urna. Pellentesque imperdiet lacinia risus hendrerit vehicula. Ut eu elit magna, id scelerisque dolor.
Right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et.
Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et.
Justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit. Vestibulum non condimentum turpis. Ut adipiscing pulvinar enim non elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam adipiscing pharetra lectus, at malesuada ipsum ullamcorper a. Ut in lorem turpis, id lobortis arcu. Morbi pharetra lectus a sem tincidunt in convallis nunc ultricies. Fusce et dignissim velit. Quisque vel nunc sit amet libero semper tempor sed id urna. Pellentesque imperdiet lacinia risus hendrerit vehicula. Ut eu elit magna, id scelerisque dolor.
Headings
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Bold Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Italic Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Underline Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Anchors
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Unordered List
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
Ordered List
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
Definition Lists
- Lorem
- Ipsum
- Lorem
- Ipsum
- Lorem
- Ipsum
- Lorem
- Ipsum
Forms
Width Manipulation
Two Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Four Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Eight Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada.
Ten & Six
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Seven & Nine
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Four & Twelve (Good sidebar configuration!)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius dolor quis risus placerat malesuada. Sed dapibus ante in justo vehicula sed ultricies nibh vehicula. Aenean rutrum venenatis turpis, non condimentum magna aliquam et. Integer pretium rhoncus nulla id feugiat. Curabitur eget pharetra elit.