<commit_before>---
layout: "default"
title: "siimple: minimal and responsive CSS Framework for flat and clean designs"
root: "./"
---
<title>{{ page.title }}</title>
<div class="siimple-jumbotron siimple-jumbotron--large siimple--color-white siimple--bg-primary" align="center">
    <div class="sw-welcome-title1">
        A <strong>flat</strong>, <strong>minimal</strong> and <strong>different</strong> CSS framework.</div>
    <div class="sw-welcome-title2">That is <strong>siimple</strong>.</div>
    <div class="sw-welcome-buttons">
        <a href="{{ site.links.documentation }}" class="siimple-btn siimple--color-primary siimple--bg-white">Get started</a>
        <a href="{{ site.links.downloads }}" class="siimple-btn siimple--color-primary siimple--bg-white">Download</a>
    </div>
    <div class="sw-welcome-detail">Current version: <strong>{{ site.version }}</strong></div>
</div>
<div class="siimple-content siimple-content--large sd-section siimple--bg-grey-light" align="center">
    <div class="siimple-h2">Why  <strong>siimple</strong>?</div>
    <div class="sd-section-description">
        Build responsive, flat and clean web designs with the minimalist and flexible <strong>siimple</strong> CSS framework. 
    </div>
    <div class="siimple-grid-row sw-features">
        {% for feature_id in site.data.features.all %}
        {% assign feature = site.data.features[feature_id] %} 
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col-sm--12 sw-features-item">
            <img class="sw-features-item-image" src="{{ feature.image }}">
            <div class="sw-features-item-title">{{ feature.title }}</div>
            <div class="sw-features-item-description">{{ feature.description }}</div>
        </div>
        {% endfor %}
    </div>
</div>
<div class="siimple-content siimple-content--large sd-section">
    <div align="center">
        <div class="siimple-h3">So <strong>siiiimple</strong> to use!</div>
        <div class="sd-section-description">
            <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 your message</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" style="font-size:13px;line-height:21px;font-weight:600;">
<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 your message<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 sd-section" align="center">
    <div class="siimple-h3">Let's get started with <strong>siimple</strong></div>
    <div class="sd-section-description">
        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="{{ site.links.documentation }}" class="siimple-btn siimple-btn--primary">
            Read the documentation
        </a>
    </div>
</div>
<div class="siimple-content siimple-content--large sd-section siimple--bg-grey-light">
    <div align="center">
        <img class="sd-section-icon" src="./assets/images/announcement.png">
    </div>
    <div class="siimple-h3" align="center">What people say about <strong>siimple</strong>?</div>
    <div class="siimple-grid-row docs-reviews">
        {% for review in site.data.reviews limit:3 %}
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col--sm-12">
            <div class="siimple-h5">{{ review.site }}</div>
            <div class="siimple-paragraph docs-reviews-content">
                <strong class="docs-reviews-quote">&#8220;</strong> {{ review.content }} <strong class="docs-reviews-quote">&#8221;</strong>
            </div>
            <a href="{{ review.url }}" class="siimple-link docs-reviews-link" target="_blank">Read more <strong>&raquo;</strong></a>
        </div>
        {% endfor %}<commit_msg>Added grid example and code<commit_after>---
layout: "default"
title: "siimple: minimal and responsive CSS Framework for flat and clean designs"
root: "./"
---
<title>{{ page.title }}</title>
<div class="siimple-jumbotron siimple-jumbotron--large siimple--color-white siimple--bg-primary" align="center">
    <div class="sw-welcome-title1">
        A <strong>flat</strong>, <strong>minimal</strong> and <strong>different</strong> CSS framework.</div>
    <div class="sw-welcome-title2">That is <strong>siimple</strong>.</div>
    <div class="sw-welcome-buttons">
        <a href="{{ site.links.documentation }}" class="siimple-btn siimple--color-primary siimple--bg-white">Get started</a>
        <a href="{{ site.links.downloads }}" class="siimple-btn siimple--color-primary siimple--bg-white">Download</a>
    </div>
    <div class="sw-welcome-detail">Current version: <strong>{{ site.version }}</strong></div>
</div>
<div class="siimple-content siimple-content--large sd-section siimple--bg-grey-light" align="center">
    <div class="siimple-h2">Why  <strong>siimple</strong>?</div>
    <div class="sd-section-description">
        Build responsive, flat and clean web designs with the minimalist and flexible <strong>siimple</strong> CSS framework. 
    </div>
    <div class="siimple-grid-row sw-features">
        {% for feature_id in site.data.features.all %}
        {% assign feature = site.data.features[feature_id] %} 
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col-sm--12 sw-features-item">
            <img class="sw-features-item-image" src="{{ feature.image }}">
            <div class="sw-features-item-title">{{ feature.title }}</div>
            <div class="sw-features-item-description">{{ feature.description }}</div>
        </div>
        {% endfor %}
    </div>
</div>
<div class="siimple-content siimple-content--large sd-section">
    <div align="center">
        <div class="siimple-h3">So <strong>siiiimple</strong> to use!</div>
        <div class="sd-section-description">
            <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 your message</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" style="font-size:12px;line-height:20px;font-weight:600;">
<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 your message<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 sd-section">
    <div class="siimple-grid-row">
        <div class="siimple-grid-col siimple-grid-col--7 siimple-grid-col--sm-12">
<pre class="siimple-pre" style="font-size:12px;line-height:20px;font-weight:bold;">
<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>size: 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>size: 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>size: 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>size: 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 example-grid">
                <div class="siimple-grid-row">
                    <div class="siimple-grid-col siimple-grid-col--5">
                        <div class="example-grid-content">size: 5</div>
                    </div>
                    <div class="siimple-grid-col siimple-grid-col--7">
                        <div class="example-grid-content">size: 7</div>
                    </div>
                </div>
                <div class="siimple-grid-row">
                    <div class="siimple-grid-col siimple-grid-col--8">
                        <div class="example-grid-content">size: 8</div>
                    </div>
                    <div class="siimple-grid-col siimple-grid-col--4">
                        <div class="example-grid-content">size: 4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="siimple-content siimple-content--large sd-section" align="center">
    <div class="siimple-h3">Let's get started with <strong>siimple</strong></div>
    <div class="sd-section-description">
        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="{{ site.links.documentation }}" class="siimple-btn siimple-btn--primary">
            Read the documentation
        </a>
    </div>
</div>
<div class="siimple-content siimple-content--large sd-section siimple--bg-grey-light">
    <div align="center">
        <img class="sd-section-icon" src="./assets/images/announcement.png">
    </div>
    <div class="siimple-h3" align="center">What people say about <strong>siimple</strong>?</div>
    <div class="siimple-grid-row docs-reviews">
        {% for review in site.data.reviews limit:3 %}
        <div class="siimple-grid-col siimple-grid-col--4 siimple-grid-col--sm-12">
            <div class="siimple-h5">{{ review.site }}</div>
            <div class="siimple-paragraph docs-reviews-content">
                <strong class="docs-reviews-quote">&#8220;</strong> {{ review.content }} <strong class="docs-reviews-quote">&#8221;</strong>
            </div>
            <a href="{{ review.url }}" class="siimple-link docs-reviews-link" target="_blank">Read more <strong>&raquo;</strong></a>
        </div>
        {% endfor %}
{'fraction_non_alphanumeric': 0.21255831082739995, 'fraction_numerical': 0.006137981831573778, 'mean_word_length': 3.4921422663358146, 'pattern_counts': {'":': 0, '<': 579, '<?xml version=': 0, '>': 579, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '163309', 'n_tokens_mistral': 5583, 'n_tokens_neox': 5167, 'n_words': 930}