<commit_before>---
layout: "default.html"
title: "Minimal and responsive CSS toolkit for flat and clean designs"
---
<div class="siimple-jumbotron siimple-jumbotron--large siimple--color-primary siimple--bg-light" align="center">
    <div class="sw-toolkits-css-welcome-title1">
        A <strong>flat</strong>, <strong>minimal</strong> and <strong>different</strong> CSS framework.</div>
    <div class="sw-toolkits-css-welcome-title2">
        That is <strong class="siimple-brand">siimple</strong>.
    </div>
    <div class="sw-toolkits-css-welcome-buttons">
        <a href="https://docs.siimple.xyz/css/" class="siimple-btn siimple--color-white siimple--bg-primary">
            Let's <strong>get started</strong>
        </a>
        <a href="#" class="siimple-btn siimple--color-white siimple--bg-primary">
            Download <strong>latest</strong>
        </a>
    </div>
    <div class="sw-toolkits-css-welcome-detail">
        Current version: <strong>{{ site.version }}</strong>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5" align="center">
    <div class="siimple--py-4">
        <div class="siimple-h2 siimple--mb-2 siimple--text-normal">
            Why <strong class="siimple-brand">siimple</strong>?
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            Build responsive, flat and clean web designs with the minimalist and flexible <strong>siimple</strong> CSS framework. 
        </div>
        <div class="siimple-grid-row">
            {{#each data.toolkits.css.features }}
            <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col-sm--12 sw-toolkits-css-feature">
                <div class="sw-toolkits-css-feature-image website-icons">
                    <img src="" width="100%" height="100%" />
                </div>
                <div class="sw-toolkits-css-feature-title">{{ this.title }}</div>
                <div class="sw-toolkits-css-feature-description">
                    {{{ this.description }}}
                </div>
            </div>
            {{/each}}
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5">
    <div align="center">
        <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
            So <strong>siiiimple</strong> to use!
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            <strong>siimple</strong> provides intuitive classes to style your elements.
        </div>
    </div>
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--5 siimple-grid-col--sm-12">
            <div class="siimple-field">
                <div class="siimple-field-label">Your email</div>
                <input type="email" class="siimple-input siimple-input--fluid" value="<EMAIL>">
                <div class="siimple-field-helper">Provide a valid email</div>
            </div>
            <div class="siimple-field">
                <div class="siimple-field-label">Your message</div>
                <textarea class="siimple-textarea siimple-textarea--fluid" rows="4">Siimple is awesome!</textarea>
            </div>
            <div class="siimple-field">
                <span class="siimple-btn siimple-btn--success">Submit</span>
                <span class="siimple-btn siimple-btn--error">Cancel</span>
            </div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre sw-code sw-code--small">
<span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field-label"</span><span class="b">&gt;</span>Your email<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;input </span><span class="y">type=</span><span class="g">"email"</span> <span class="y">class=</span><span class="g">"siimple-input siimple-input--fluid"</span> <span class="y">value=</span><span class="g">"<EMAIL>"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field-helper"</span><span class="b">&gt;</span>Provide a valid email<span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field-label"</span><span class="b">&gt;</span>Your message<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;textarea </span><span class="y">class=</span><span class="g">"siimple-textarea siimple-textarea--fluid"</span> <span class="y">rows=</span><span class="g">"4"</span><span class="b">&gt;</span>Siimple is awesome!<span class="b">&lt;/textarea&gt;</span>
    <span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">&gt;</span>
        <span class="b">&lt;span </span><span class="y">class=</span><span class="g">"siimple-btn siimple-btn--success"</span><span class="b">&gt;</span>Submit<span class="b">&lt;/span&gt;</span>
        <span class="b">&lt;span </span><span class="y">class=</span><span class="g">"siimple-btn siimple-btn--error"</span><span class="b">&gt;</span>Cancel<span class="b">&lt;/span&gt;</span>
    <span class="b">&lt;/div&gt;</span>
<span class="b">&lt;/div&gt;</span>
</pre>
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5">
    <div align="center">
        <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
            With a flexible <strong>grid</strong> system!
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            Build responsive layouts using our twelve-columns grid system.
        </div>
    </div>
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre sw-code sw-code--small">
<span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid"</span><span class="b">&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-row"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--5"</span><span class="b">&gt;</span>5<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--7"</span><span class="b">&gt;</span>7<span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-row"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--8"</span><span class="b">&gt;</span>8<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--4"</span><span class="b">&gt;</span>4<span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;/div&gt;</span>
<span class="b">&lt;/div&gt;</span>
</pre>
        </div>
        <div class="siimple-grid-col siimple-grid-col--5 siimple-grid-col--sm-12">
            <div class="siimple-grid sw-toolkits-css-example-grid">
                <div class="siimple-grid-row">
                    <div class="siimple-grid-col siimple-grid-col--5">
                        <div class="sw-toolkits-css-example-grid-content">5</div>
                    </div>
                    <div class="siimple-grid-col siimple-grid-col--7">
                        <div class="sw-toolkits-css-example-grid-content">7</div>
                    </div>
                </div>
                <div class="siimple-grid-row">
                    <div class="siimple-grid-col siimple-grid-col--8">
                        <div class="sw-toolkits-css-example-grid-content">8</div>
                    </div>
                    <div class="siimple-grid-col siimple-grid-col--4">
                        <div class="sw-toolkits-css-example-grid-content">4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5 siimple--mb-4" align="center">
    <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
        Let's get started with <strong class="siimple-brand">siimple</strong>
    </div>
    <div class="siimple-paragraph siimple-paragraph--lead">
        You can get started with <strong>siimple</strong> reading the official documentation: 
        learn how to add <strong>siimple</strong> to your project and discover how to style your buttons, forms and more!
    </div>
    <div align="center">
        <a href="https://docs.siimple.xyz/css/" class="siimple-btn siimple-btn--primary">
            Read the <strong>documentation</strong>
        </a>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--bg-light siimple--py-5">
    <div align="center">
        <div class="website-icons website-icons-announcement"></div>
    </div>
    <div class="siimple-h3 siimple--mb-2 siimple--text-normal" align="center">
        What people say about <strong class="siimple-brand">siimple</strong>?
    </div>
    <div class="siimple-grid-row siimple--py-4">
        {{#each data.toolkits.css.reviews }}
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col--sm-12 sw-toolkits-css-reviews-column">
            <div class="siimple-h5">{{ this.site }}</div>
            <div class="siimple-paragraph sw-toolkits-css-reviews-content">
                <strong class="sw-toolkits-css-reviews-quote">&#8220;</strong> 
                {{{ this.content }}} 
                <strong class="sw-toolkits-css-reviews-quote">&#8221;</strong>
            </div>
            <a href="{{{ this.url }}}" class="siimple-btn siimple-btn--primary sw-toolkits-css-reviews-btn" target="_blank">
                Read <strong>more</strong> <strong>&raquo;</strong>
            </a>
        </div>
        {{/each}}
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5" align="center">
    <div class="siimple--py-4">
        <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
            Contribute to <strong class="siimple-brand">siimple</strong>
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            Contribute to our repository on <strong>GitHub</strong>. Bug reports, improvements and new ideas are always welcome!
        </div>
        <div>
            <a href="https://github.com/siimple/siimple" class="siimple-btn siimple-btn--primary" target="_blank">
                Contribute to <strong>siimple</strong>
            </a>
        </div>
    </div>
</div>

<commit_msg>website: redesign hero section of the css toolkit promo page<commit_after>---
layout: "default.html"
title: "Minimal and responsive CSS toolkit for flat and clean designs"
---
<div class="website-hero siimple-content--large siimple--bg-light">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
            <div class="website-hero-content" align="left">
                <div class="website-hero-head">
                    <strong class="siimple-brand">siimple</strong>css
                </div>
                <div class="website-hero-subhead" style="opacity:0.8;">
                    A <strong>flat</strong> and <strong>minimal</strong> CSS toolkit.
                </div>
                <div class="website-hero-text" style="opacity:0.8;">
                    <strong>siimple css</strong> is an open source CSS toolkit that provides a clean starting point for designing flat and responsive websites.
                </div>
                <div class="website-hero-buttons siimple--mt-4 siimple--mb-3">
                    <a href="/docs/css/" class="siimple-btn siimple-btn--primary">
                        Let's <strong>get started</strong>
                    </a>
                    <a href="/docs/css" class="siimple-btn siimple-btn--primary">
                        Read the <strong>docs</strong>
                    </a>
                </div>
                <div class="siimple-small">
                    Current version: <strong>vxx.xx.xx</strong>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5" align="center">
    <div class="siimple--py-4">
        <div class="siimple-h2 siimple--mb-2 siimple--text-normal">
            Why <strong class="siimple-brand">siimple</strong>?
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            Build responsive, flat and clean web designs with the minimalist and flexible <strong>siimple</strong> CSS framework. 
        </div>
        <div class="siimple-grid-row">
            {{#each data.toolkits.css.features }}
            <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col-sm--12 sw-toolkits-css-feature">
                <div class="sw-toolkits-css-feature-image website-icons">
                    <img src="" width="100%" height="100%" />
                </div>
                <div class="sw-toolkits-css-feature-title">{{ this.title }}</div>
                <div class="sw-toolkits-css-feature-description">
                    {{{ this.description }}}
                </div>
            </div>
            {{/each}}
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5">
    <div align="center">
        <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
            So <strong>siiiimple</strong> to use!
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            <strong>siimple</strong> provides intuitive classes to style your elements.
        </div>
    </div>
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--5 siimple-grid-col--sm-12">
            <div class="siimple-field">
                <div class="siimple-field-label">Your email</div>
                <input type="email" class="siimple-input siimple-input--fluid" value="<EMAIL>">
                <div class="siimple-field-helper">Provide a valid email</div>
            </div>
            <div class="siimple-field">
                <div class="siimple-field-label">Your message</div>
                <textarea class="siimple-textarea siimple-textarea--fluid" rows="4">Siimple is awesome!</textarea>
            </div>
            <div class="siimple-field">
                <span class="siimple-btn siimple-btn--success">Submit</span>
                <span class="siimple-btn siimple-btn--error">Cancel</span>
            </div>
        </div>
        <div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre sw-code sw-code--small">
<span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field-label"</span><span class="b">&gt;</span>Your email<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;input </span><span class="y">type=</span><span class="g">"email"</span> <span class="y">class=</span><span class="g">"siimple-input siimple-input--fluid"</span> <span class="y">value=</span><span class="g">"<EMAIL>"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field-helper"</span><span class="b">&gt;</span>Provide a valid email<span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field-label"</span><span class="b">&gt;</span>Your message<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;textarea </span><span class="y">class=</span><span class="g">"siimple-textarea siimple-textarea--fluid"</span> <span class="y">rows=</span><span class="g">"4"</span><span class="b">&gt;</span>Siimple is awesome!<span class="b">&lt;/textarea&gt;</span>
    <span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-field"</span><span class="b">&gt;</span>
        <span class="b">&lt;span </span><span class="y">class=</span><span class="g">"siimple-btn siimple-btn--success"</span><span class="b">&gt;</span>Submit<span class="b">&lt;/span&gt;</span>
        <span class="b">&lt;span </span><span class="y">class=</span><span class="g">"siimple-btn siimple-btn--error"</span><span class="b">&gt;</span>Cancel<span class="b">&lt;/span&gt;</span>
    <span class="b">&lt;/div&gt;</span>
<span class="b">&lt;/div&gt;</span>
</pre>
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5">
    <div align="center">
        <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
            With a flexible <strong>grid</strong> system!
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            Build responsive layouts using our twelve-columns grid system.
        </div>
    </div>
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre sw-code sw-code--small">
<span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid"</span><span class="b">&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-row"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--5"</span><span class="b">&gt;</span>5<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--7"</span><span class="b">&gt;</span>7<span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-row"</span><span class="b">&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--8"</span><span class="b">&gt;</span>8<span class="b">&lt;/div&gt;</span>
        <span class="b">&lt;div </span><span class="y">class=</span><span class="g">"siimple-grid-col siimple-grid-col--4"</span><span class="b">&gt;</span>4<span class="b">&lt;/div&gt;</span>
    <span class="b">&lt;/div&gt;</span>
<span class="b">&lt;/div&gt;</span>
</pre>
        </div>
        <div class="siimple-grid-col siimple-grid-col--5 siimple-grid-col--sm-12">
            <div class="siimple-grid sw-toolkits-css-example-grid">
                <div class="siimple-grid-row">
                    <div class="siimple-grid-col siimple-grid-col--5">
                        <div class="sw-toolkits-css-example-grid-content">5</div>
                    </div>
                    <div class="siimple-grid-col siimple-grid-col--7">
                        <div class="sw-toolkits-css-example-grid-content">7</div>
                    </div>
                </div>
                <div class="siimple-grid-row">
                    <div class="siimple-grid-col siimple-grid-col--8">
                        <div class="sw-toolkits-css-example-grid-content">8</div>
                    </div>
                    <div class="siimple-grid-col siimple-grid-col--4">
                        <div class="sw-toolkits-css-example-grid-content">4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5 siimple--mb-4" align="center">
    <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
        Let's get started with <strong class="siimple-brand">siimple</strong>
    </div>
    <div class="siimple-paragraph siimple-paragraph--lead">
        You can get started with <strong>siimple</strong> reading the official documentation: 
        learn how to add <strong>siimple</strong> to your project and discover how to style your buttons, forms and more!
    </div>
    <div align="center">
        <a href="https://docs.siimple.xyz/css/" class="siimple-btn siimple-btn--primary">
            Read the <strong>documentation</strong>
        </a>
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--bg-light siimple--py-5">
    <div align="center">
        <div class="website-icons website-icons-announcement"></div>
    </div>
    <div class="siimple-h3 siimple--mb-2 siimple--text-normal" align="center">
        What people say about <strong class="siimple-brand">siimple</strong>?
    </div>
    <div class="siimple-grid-row siimple--py-4">
        {{#each data.toolkits.css.reviews }}
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col--sm-12 sw-toolkits-css-reviews-column">
            <div class="siimple-h5">{{ this.site }}</div>
            <div class="siimple-paragraph sw-toolkits-css-reviews-content">
                <strong class="sw-toolkits-css-reviews-quote">&#8220;</strong> 
                {{{ this.content }}} 
                <strong class="sw-toolkits-css-reviews-quote">&#8221;</strong>
            </div>
            <a href="{{{ this.url }}}" class="siimple-btn siimple-btn--primary sw-toolkits-css-reviews-btn" target="_blank">
                Read <strong>more</strong> <strong>&raquo;</strong>
            </a>
        </div>
        {{/each}}
    </div>
</div>
<div class="siimple-content siimple-content--large siimple--py-5" align="center">
    <div class="siimple--py-4">
        <div class="siimple-h3 siimple--mb-2 siimple--text-normal">
            Contribute to <strong class="siimple-brand">siimple</strong>
        </div>
        <div class="siimple-paragraph siimple-paragraph--lead">
            Contribute to our repository on <strong>GitHub</strong>. Bug reports, improvements and new ideas are always welcome!
        </div>
        <div>
            <a href="https://github.com/siimple/siimple" class="siimple-btn siimple-btn--primary" target="_blank">
                Contribute to <strong>siimple</strong>
            </a>
        </div>
    </div>
</div>


{'fraction_non_alphanumeric': 0.2005475404136972, 'fraction_numerical': 0.006822527377020685, 'mean_word_length': 2.715969643145487, 'pattern_counts': {'":': 0, '<': 767, '<?xml version=': 0, '>': 767, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4025566', 'n_tokens_mistral': 7844, 'n_tokens_neox': 7230, 'n_words': 1271}