Skip to content

Commit

Permalink
Accordion WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamlaki
adamlaki committed Aug 3, 2023
1 parent 8c6e21c commit 10b18a9
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 21 deletions.
78 changes: 57 additions & 21 deletions src/_includes/partial/accordion.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,67 @@ <h2 class="section-title section-title--vertical">
</h2>
{% endif %}
<div class="l-accordion__body">
<h3>Laravel Development</h3>
<p>Fugiat sit et pariatur cupidatat exercitation sunt</p>
<div class="accordion-list">
<div class="accordion-card">
<h3 class="accordion-card__title">Why Make Another CSS Framework?</h3>
<div class="accordion-card__content">
<p>As you may know, there are many CSS frameworks (hundreds of them, and a lot of them are not maintained today). Everybody can choose one that suits their work style or project requirements. So why make another one? It is certainly not because we can do it better but because we want to do it our way. We want to be in control and make decisions.</p>
</div>
<div class="l-accordion__block">
<div class="l-accordion__heading">
<h3 class="l-accordion__title">Laravel Development</h3>
<p>Fugiat sit et pariatur cupidatat exercitation sunt</p>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">It Is Opinionated</h3>
<div class="accordion-card__content">
<p>Each system is opinionated but on a different level; this is valid for Spruce too. We don’t want to vote for (strictly) any particular solution (because there is always more than one), but we will show you what we think is the best for us (and maybe for you too). We don’t believe there is a good or bad solution, but we can learn from any of them.</p>
<div class="accordion-list">
<div class="accordion-card">
<h3 class="accordion-card__title">Why Make Another CSS Framework?</h3>
<div class="accordion-card__content">
<p>As you may know, there are many CSS frameworks (hundreds of them, and a lot of them are not maintained today). Everybody can choose one that suits their work style or project requirements. So why make another one? It is certainly not because we can do it better but because we want to do it our way. We want to be in control and make decisions.</p>
</div>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">We Left the Grid Out</h3>
<div class="accordion-card__content">
<p>One controversial decision we made with Spruce is to leave a classical grid system out. Because of the late CSS layout model developments like Flexbox and Grid, we think it can be eliminated; this doesn’t mean that we won’t show you how to make layouts with ease, but we try to make it the modern way.</p>
<div class="accordion-card">
<h3 class="accordion-card__title">It Is Opinionated</h3>
<div class="accordion-card__content">
<p>Each system is opinionated but on a different level; this is valid for Spruce too. We don’t want to vote for (strictly) any particular solution (because there is always more than one), but we will show you what we think is the best for us (and maybe for you too). We don’t believe there is a good or bad solution, but we can learn from any of them.</p>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">We Left the Grid Out</h3>
<div class="accordion-card__content">
<p>One controversial decision we made with Spruce is to leave a classical grid system out. Because of the late CSS layout model developments like Flexbox and Grid, we think it can be eliminated; this doesn’t mean that we won’t show you how to make layouts with ease, but we try to make it the modern way.</p>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">Coding Style Guide and Practices</h3>
<div class="accordion-card__content">
<p>Where it is possible, we use elements and/or attributes to style elements, but it is still a class-based framework.</p>
</div>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">Coding Style Guide and Practices</h3>
<div class="accordion-card__content">
<p>Where it is possible, we use elements and/or attributes to style elements, but it is still a class-based framework.</p>
</div>
<div class="l-accordion__block">
<div class="l-accordion__heading">
<h3 class="l-accordion__title">Laravel Development</h3>
<p>Fugiat sit et pariatur cupidatat exercitation sunt</p>
</div>
<div class="accordion-list">
<div class="accordion-card">
<h3 class="accordion-card__title">Why Make Another CSS Framework?</h3>
<div class="accordion-card__content">
<p>As you may know, there are many CSS frameworks (hundreds of them, and a lot of them are not maintained today). Everybody can choose one that suits their work style or project requirements. So why make another one? It is certainly not because we can do it better but because we want to do it our way. We want to be in control and make decisions.</p>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">It Is Opinionated</h3>
<div class="accordion-card__content">
<p>Each system is opinionated but on a different level; this is valid for Spruce too. We don’t want to vote for (strictly) any particular solution (because there is always more than one), but we will show you what we think is the best for us (and maybe for you too). We don’t believe there is a good or bad solution, but we can learn from any of them.</p>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">We Left the Grid Out</h3>
<div class="accordion-card__content">
<p>One controversial decision we made with Spruce is to leave a classical grid system out. Because of the late CSS layout model developments like Flexbox and Grid, we think it can be eliminated; this doesn’t mean that we won’t show you how to make layouts with ease, but we try to make it the modern way.</p>
</div>
</div>
<div class="accordion-card">
<h3 class="accordion-card__title">Coding Style Guide and Practices</h3>
<div class="accordion-card__content">
<p>Where it is possible, we use elements and/or attributes to style elements, but it is still a class-based framework.</p>
</div>
</div>
</div>
</div>
Expand Down
24 changes: 24 additions & 0 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1659,10 +1659,34 @@ legend {
gap: 1.5rem clamp(3rem, 5vw, 4.5rem);
justify-content: space-between;
}
.l-accordion__heading > * {
margin-block-end: 0;
margin-block-start: 0;
}
.l-accordion__heading > * + * {
margin-block-start: 0.5rem;
}
.l-accordion__title {
font-size: clamp(1.66015625rem, 2vw + 1rem, 1.953125rem);
}
.l-accordion__block > * {
margin-block-end: 0;
margin-block-start: 0;
}
.l-accordion__block > * + * {
margin-block-start: 1.5rem;
}
.l-accordion__body {
flex: 1;
max-inline-size: 50rem;
}
.l-accordion__body > * {
margin-block-end: 0;
margin-block-start: 0;
}
.l-accordion__body > * + * {
margin-block-start: 3rem;
}

.skip-link {
inset: -50vh auto auto 1.5rem;
Expand Down
13 changes: 13 additions & 0 deletions src/scss/layout/_accordion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,20 @@
justify-content: space-between;
}

&__heading {
@include layout-stack('xs');
}

&__title {
font-size: font-size('h2');
}

&__block {
@include layout-stack('m');
}

&__body {
@include layout-stack('l');
flex: 1;
max-inline-size: 50rem;
}
Expand Down

0 comments on commit 10b18a9

Please sign in to comment.