View tabcordion-groups.scss
&>.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; }
View tabcordion-nthchild.scss
@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; }
View tabcordion-breakdown.scss
.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;
View tabcordion.scss
// 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 {
View tabcordion-markup.html
<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" />
View f-apps-alpha-unstack.html
<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>
View f-apps-alpha-stack.html
<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>
View f-apps-alpha-frame.html
<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">
View f-apps-alpha-nested-sizing.html
<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>
View f-apps-alpha-nested-groups.html
<div class="group">
<div class="group">
<!-- Blocks go here -->
</div>
</div>