Jonathan Smiley smileyj68
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| &>.tab, &>.tab-content, &>input { | |
| @if $i == 2 { | |
| &:nth-child(-n+30) { order: 5; | |
| &:checked + label + .tab-content { order: 6; } | |
| } | |
| &:nth-child(-n+24) { order: 4; | |
| &:checked + label + .tab-content { order: 5; } | |
| } | |
| &:nth-child(-n+18) { order: 3; | |
| &:checked + label + .tab-content { order: 4; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @for $i from 1 through 6 { | |
| &.small-#{$i}-up { | |
| .tab { | |
| width: percentage(1 / $i); | |
| } | |
| &>.tab, &>.tab-content, &>input { | |
| @if $i == 2 { | |
| &:nth-child(-n+30) { order: 5; | |
| &:checked + label + .tab-content { order: 6; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .tabs { | |
| display: flex; | |
| flex-flow: row wrap; | |
| border: 0px solid #ddd; | |
| border-width: 1px 0 0 1px; | |
| .tab { | |
| background: #f4f4f4; | |
| height: 40px; | |
| padding: 0 1rem; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Foundation for Apps Tabcordions | |
| .tabs { | |
| display: flex; | |
| flex-flow: row wrap; | |
| border: 0px solid #ddd; | |
| border-width: 1px 0 0 1px; | |
| // Styling for the label element | |
| .tab { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="tabs small-1-up medium-3-up"> | |
| <input type="radio" name="mainTabs" checked id="tab1" /> | |
| <label for="tab1" class="tab">Tab 1</label> | |
| <div class="tab-content"> | |
| <p>The Hitchhiker’s Guide to the Galaxy has a few things to say on the subject of towels.</p> | |
| <p>A towel, it says, is about the most massively useful thing an interstellar hitch hiker can have...</p> | |
| </div> | |
| <input type="radio" name="mainTabs" id="tab2" /> |
smileyj68
/ f-apps-alpha-unstack.html
Created
June 26, 2014 04:57
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="group stack large-unstack"> | |
| <div class="small-6 block"> | |
| <!-- This block will be 50% height of the group. Stacking like requires using a frame --> | |
| </div> | |
| <div class="small-6 block"> | |
| <!-- This block will be 50% height of the group. Stacking like requires using a frame --> | |
| </div> | |
| </div> |
smileyj68
/ f-apps-alpha-stack.html
Created
June 26, 2014 04:56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="group stack"> | |
| <div class="small-6 block"> | |
| <!-- This block will be 50% height of the group. Stacking like requires using a frame --> | |
| </div> | |
| <div class="small-6 block"> | |
| <!-- This block will be 50% height of the group. Stacking like requires using a frame --> | |
| </div> | |
| </div> |
smileyj68
/ f-apps-alpha-frame.html
Created
June 26, 2014 04:48
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class="frame"> | |
| <div class="large-4 stack group"> | |
| <div class="small-6 block"> | |
| <!-- Top Sidebar Content --> | |
| </div> | |
| <div class="small-6 block"> | |
| <!-- Bottom Sidebar Content --> | |
| </div> | |
| </div> | |
| <div class="large-8 group"> |
smileyj68
/ f-apps-alpha-nested-sizing.html
Created
June 26, 2014 04:42
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="group"> | |
| <div class="small-6 group"> | |
| <div class="small-4 block"> | |
| <!-- Content goes here --> | |
| </div> | |
| <div class="small-8 block"> | |
| <!-- Content goes here --> | |
| </div> | |
| </div> | |
smileyj68
/ f-apps-alpha-nested-groups.html
Created
June 26, 2014 04:40
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="group"> | |
| <div class="group"> | |
| <!-- Blocks go here --> | |
| </div> | |
| </div> |
NewerOlder