as

imswarnil · web-flow · commit 8c42766c9933 · 2025-08-05T23:24:38.000-07:00
diff --git a/index.md b/index.md
@@ -3,6 +3,42 @@ layout: default
 title: Bangalore Job Seekers Guide
 description: "An open-source Jekyll theme crafted using the Bulma CSS framework. This theme utilizes Bulma SCSS, making it incredibly easy to customize and adapt to your specific needs. With over 7 layouts and 10+ collections"
 ---
+
+<div class="l-main__body"><main id="content"><div class="l-front-page"><div class="post-heading"><p class="post-heading__headline">Eleventy / Spruce CSS</p><h1 class="post-heading__title">Document your next project a little bit better.</h1><p class="post-heading__description">Do you work on a project that requires a documentation? This theme is for you. It's a simple, clean and responsive theme for Eleventy.</p><div class="post-heading__actions"><a class="btn btn--lg btn--primary btn--primary-shadow" href="/getting-started/introduction/">Introduction</a> <a class="btn btn--lg btn--outline-primary" href="/changelog/">Changelog</a></div></div><div class="group"><h2>Overview</h2><div class="l-card"><div class="post-card"><span class="post-card__serial-number"></span><h2 class="post-card__title">Getting Started</h2><p>Start here and get to know this minimalistic Eleventy theme.</p><a class="btn btn--primary btn--primary-shadow" href="/getting-started/">Read More <span class="sr-only">Getting Started</span></a></div><div class="post-card"><span class="post-card__serial-number"></span><h2 class="post-card__title">Customization</h2><p>Built on the top of Spruce CSS, you can easily customize its look.</p><a class="btn btn--primary btn--primary-shadow" href="/customization/">Read More <span class="sr-only">Customization</span></a></div></div></div><div class="group"><h2>Frequently Asked Questions</h2><div class="accordion-list"><div class="accordion-card accordion-card--js"><h3 class="accordion-card__title">
+      <button class="accordion-card__toggle" aria-expanded="false">
+        Why Make Another CSS Framework?
+        <svg aria-hidden="true" focusable="false" height="18px" viewBox="0 0 18 18" width="18px">
+          <path d="M13.5,8.625c0,-0.207 -0.168,-0.375 -0.375,-0.375l-8.25,0c-0.207,0 -0.375,0.168 -0.375,0.375l0,0.75c0,0.207 0.168,0.375 0.375,0.375l8.25,0c0.207,0 0.375,-0.168 0.375,-0.375l0,-0.75Z" style="fill:currentColor;"></path>
+          <path class="vertical-line" d="M9.375,13.5c0.207,-0 0.375,-0.168 0.375,-0.375l0,-8.25c0,-0.207 -0.168,-0.375 -0.375,-0.375l-0.75,0c-0.207,0 -0.375,0.168 -0.375,0.375l-0,8.25c-0,0.207 0.168,0.375 0.375,0.375l0.75,-0Z" style="fill:currentColor;"></path>
+        </svg>
+      </button>
+    </h3><div class="accordion-card__content" hidden=""><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 accordion-card--js"><h3 class="accordion-card__title">
+      <button class="accordion-card__toggle" aria-expanded="false">
+        It Is Opinionated
+        <svg aria-hidden="true" focusable="false" height="18px" viewBox="0 0 18 18" width="18px">
+          <path d="M13.5,8.625c0,-0.207 -0.168,-0.375 -0.375,-0.375l-8.25,0c-0.207,0 -0.375,0.168 -0.375,0.375l0,0.75c0,0.207 0.168,0.375 0.375,0.375l8.25,0c0.207,0 0.375,-0.168 0.375,-0.375l0,-0.75Z" style="fill:currentColor;"></path>
+          <path class="vertical-line" d="M9.375,13.5c0.207,-0 0.375,-0.168 0.375,-0.375l0,-8.25c0,-0.207 -0.168,-0.375 -0.375,-0.375l-0.75,0c-0.207,0 -0.375,0.168 -0.375,0.375l-0,8.25c-0,0.207 0.168,0.375 0.375,0.375l0.75,-0Z" style="fill:currentColor;"></path>
+        </svg>
+      </button>
+    </h3><div class="accordion-card__content" hidden=""><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 accordion-card--js"><h3 class="accordion-card__title">
+      <button class="accordion-card__toggle" aria-expanded="false">
+        We Left the Grid Out
+        <svg aria-hidden="true" focusable="false" height="18px" viewBox="0 0 18 18" width="18px">
+          <path d="M13.5,8.625c0,-0.207 -0.168,-0.375 -0.375,-0.375l-8.25,0c-0.207,0 -0.375,0.168 -0.375,0.375l0,0.75c0,0.207 0.168,0.375 0.375,0.375l8.25,0c0.207,0 0.375,-0.168 0.375,-0.375l0,-0.75Z" style="fill:currentColor;"></path>
+          <path class="vertical-line" d="M9.375,13.5c0.207,-0 0.375,-0.168 0.375,-0.375l0,-8.25c0,-0.207 -0.168,-0.375 -0.375,-0.375l-0.75,0c-0.207,0 -0.375,0.168 -0.375,0.375l-0,8.25c-0,0.207 0.168,0.375 0.375,0.375l0.75,-0Z" style="fill:currentColor;"></path>
+        </svg>
+      </button>
+    </h3><div class="accordion-card__content" hidden=""><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 accordion-card--js"><h3 class="accordion-card__title">
+      <button class="accordion-card__toggle" aria-expanded="false">
+        Coding Style Guide and Practices
+        <svg aria-hidden="true" focusable="false" height="18px" viewBox="0 0 18 18" width="18px">
+          <path d="M13.5,8.625c0,-0.207 -0.168,-0.375 -0.375,-0.375l-8.25,0c-0.207,0 -0.375,0.168 -0.375,0.375l0,0.75c0,0.207 0.168,0.375 0.375,0.375l8.25,0c0.207,0 0.375,-0.168 0.375,-0.375l0,-0.75Z" style="fill:currentColor;"></path>
+          <path class="vertical-line" d="M9.375,13.5c0.207,-0 0.375,-0.168 0.375,-0.375l0,-8.25c0,-0.207 -0.168,-0.375 -0.375,-0.375l-0.75,0c-0.207,0 -0.375,0.168 -0.375,0.375l-0,8.25c-0,0.207 0.168,0.375 0.375,0.375l0.75,-0Z" style="fill:currentColor;"></path>
+        </svg>
+      </button>
+    </h3><div class="accordion-card__content" hidden=""><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></div></main><footer class="footer"><div class="footer__inner"><div class="footer__column"><h3 class="footer__title" id="footer-title-getting-started">Getting Started</h3><ul class="footer__navigation" aria-labelledby="footer-title-getting-started"><li><a href="/getting-started/introduction/">Introduction</a></li><li><a href="/getting-started/features/">Features</a></li><li><a href="/getting-started/structure/">Structure</a></li><li><a href="/getting-started/setup/">Setup</a></li></ul></div><div class="footer__column"><h3 class="footer__title" id="footer-title-spruce-css">Spruce CSS</h3><ul class="footer__navigation" aria-labelledby="footer-title-spruce-css"><li><a href="https://sprucecss.com/docs/getting-started/introduction/" target="_blank" rel="noopener">Introduction <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li><li><a href="https://sprucecss.com/docs/customization/themes/" target="_blank" rel="noopener">Themes <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li><li><a href="https://sprucecss.com/ui/getting-started/introduction/" target="_blank" rel="noopener">Components <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li></ul></div><div class="footer__column"><h3 class="footer__title" id="footer-title-more-from-us">More From Us</h3><ul class="footer__navigation" aria-labelledby="footer-title-more-from-us"><li><a href="https://conedevelopment.com/services/" target="_blank" rel="noopener">Services <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li><li><a href="https://pineco.de/" target="_blank" rel="noopener">Pine development blog <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li><li><a href="https://root.conedevelopment.com/" target="_blank" rel="noopener">Root Laravel admin <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li><li><a href="https://bite-sized-a11y.com/" target="_blank" rel="noopener">Bite-Sized Accessibility <span class="sr-only">Open in new window</span> <svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" class="btn__icon"><path d="M1.111,1.907c0,1.049 0.858,1.908 1.907,1.908l14.478,-0l-16.938,16.938c-0.744,0.744 -0.744,1.945 -0,2.689c0.744,0.744 1.945,0.744 2.689,0l16.938,-16.938l0,14.478c0,1.049 0.859,1.907 1.908,1.907c1.049,-0 1.907,-0.858 1.907,-1.907l0,-19.075c0,-1.049 -0.858,-1.907 -1.907,-1.907l-19.075,0c-1.049,0 -1.907,0.858 -1.907,1.907Z"></path></svg></a></li></ul></div></div></footer></div>
+
+<!-- 
 <style>
     /*
     ==========================================================================
@@ -217,4 +253,4 @@ description: "An open-source Jekyll theme crafted using the Bulma CSS framework.
                 </div>
             </div>
         </div>
-    </section>
+    </section> -->
