toolkit.html

---
layout: default
title: Toolkit
--- 
<div class="toolkit-header header-container">
    <h1>Our Toolkit</h1>
    <p class="toolkit-header__p">Toolkit implies that there is one set of tools that is perfect for the job you are tackling!
What you will find here are tools we have found to be effective. Think of this as the most awesome collective tool shed!
Here you can find, share, and suggest tools that are of use to the open source civic tech software community.</p>
    <div class="toolkit-header__hero-image">
        {% include svg/toolkit-hero.svg %}
    </div>
</div>

<div class="toolkit-header__text-group">
    <p class="toolkit-header__banner-item">Development</p>
    <p class="toolkit-header__banner-item">Design</p>
    <p class="toolkit-header__banner-item">Project Management</p>
    <p class="toolkit-header__banner-item">Professional Development</p>
</div>

<div class="toolkit-background content-section">
    <div class="toolkit__card-list">
        <div class="suggest-guide-group"><h2>Guides (We Made These!)</h2><button class="toolkit-button btn btn-primary">Suggest a guide</button></div>

    <div class="toolkit-flex-container">
        <!-- Searching through toolkitPages collection -->
        <!-- change collection to _guidepages -->
        {%- for item in site.guide-pages -%}
        {%- if item.status == 'active' -%}

            <div class="toolkit-flex-item section-container">
            
                {%- if item.svg -%}
                <div class="toolkit-flex-item-img-container">
                    {% include {{ item.svg }} %}
                </div>
                {%- endif -%}

                <div class="toolkit-info-container">
                    {%- if item.title -%}
                    <h3><a href={{ item.provider-link }}>{{ item.title }}</a></h3>
                    {%- endif -%}

                    {%- if item.short-description -%}
                    <p>{{ item.short-description }}</p>
                    {%- endif -%}
                </div>
                    
            </div>
        {%- endif -%}
        {%- endfor -%}

        {%- for item in site.guide-pages -%}
        {%- if item.status == 'coming-soon' -%}
            <div class="toolkit-flex-item section-container">
            
                {%- if item.svg -%}
                <div class="toolkit-flex-item-img-container">
                    {% include {{ item.svg }} %}
                </div>
                {%- endif -%}

                <div class="toolkit-info-container">
                    {%- if item.title -%}
                    <h3 class="not-clickable">{{ item.title }}</h3>
                    {%- endif -%}

                    {%- if item.short-description -%}
                    <p>{{ item.short-description }}</p>
                    {%- endif -%}

                </div>
                {%- if item.status == 'coming-soon' -%}
                    <span class="toolkit-flex-item-status">coming soon</span>
                {%- endif -%}
            </div>
        {%- endif -%}
        {%- endfor -%}
    </div>

    </div>

    <div class="toolkit__card-list">
        <div class="suggest-guide-group"><h2>External Resources</h2><button class="toolkit-button btn btn-primary">Suggest a resource</button></div>

        <div class="toolkit-flex-container">
            <!-- Searching through toolkitResources collection -->
            {%- for item in site.toolkitResources -%}
            {%- if item.display ==  true -%}
            <div class="toolkit-flex-item section-container">

                {%- if item.svg -%}
                <div class="toolkit-flex-item-img-container resource-svg-icons">
                    {% include {{ item.svg }} %}
                </div>
                {%- endif -%}

                <div class="toolkit-info-container">
                    <h3><a href="{{item.provider-link}}" target="_blank">{{ item.title }}</a></h3>
                    <p>{{ item.description }}</p>
                </div>
                <a href="{{item.provider-link}}" class="toolkit-flex-item-status outer-link" target="_blank">
                    {% include {{ item.link-svg }} %}
                </a>
            </div>
            {%- endif -%}
            {%- endfor -%}
        </div>
    </div>
</div>    

<script>
// Add margin to the bottom of cards with status text
let statusElements = document.getElementsByClassName("toolkit-flex-item-status");
for(let i = 0; i < statusElements.length; i++){
    let parent = statusElements[i].parentElement;
    let infoContainer = parent.getElementsByClassName("toolkit-info-container");
    infoContainer[0].style["margin-bottom"] = "3.5rem";
}
</script>