Download

Du kannst "columns" kostenlos herunterladen (eigentlich rauskopieren).

html-Schnipsel | Das CSS für das flatsite-Theme mit columns

Wer sich noch nicht so gut mit dem CMS Yellow von Datenstrom auskennt, sollte sich zuerst die Website anschauen um herauszufinden, ob man damit klar kommt (es gibt auch eine Demo zum testen). Herunterladen kann man Yellow bei Github.

Alle "columns"-html-Schnipsel

Am einfachsten ist, man kopieren jene html-Schnipsel hier raus, die gerade gebraucht werden und setzt sie an betreffender Stelle in den Texteditor von Yellow ein. Bei ungleichen Blocks wie z. B. col8 + col4 kann die Reihenfolge selbstverständlich auch getauscht werden.

<!-- 6-spaltig -->

<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="clear"></div>

<!-- 4-spaltig -->

<div class="col3">
    <h2>col3</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="col3">
    <h2>col3</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="col3">
    <h2>col3</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="col3">
    <h2>col3</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="clear"></div>

<!-- 3-spaltig -->

<div class="col4">
    <h2>col4</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="col4">
    <h2>col4</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="col4">
    <h2>col4</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="clear"></div>

<!-- 2-spaltig -->

<div class="col6">
    <h2>col6</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="col6">
    <h2>col6</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="clear"></div>

<!-- Eine breite und eine schmale Spalte.  -->

<div class="col8">
    <h2>col8</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="col4">
    <h2>col4</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="clear"></div>

<!-- Wie vorher, nur etwas anders  -->

<div class="col9">
    <h2>col9</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="col3">
    <h2>col3</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="clear"></div>

<!-- Eine sehr breite und eine sehr schmale Spalte -->

<div class="col10">
    <h2>col10</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non in reprehenderit proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.</p>
</div>
<div class="col2">
    <h2>col2</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
<div class="clear"></div>

Das komplette CSS für das flatsite-Theme mit "columns"

/* Flatsite theme, https://github.com/datenstrom/yellow-themes/tree/master/flatsite */
/* Copyright (c) 2013-2018 Datenstrom, https://datenstrom.se */
/* This file may be used and distributed under the terms of the public license. */

html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
@font-face {
    font-family:'Open Sans';
    font-style:normal;
    font-weight:300;
    src:url(opensans-light.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    src:url(opensans-regular.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style:normal;
    font-weight:700;
    src:url(opensans-bold.woff) format('woff');
}
body {
    margin:1em;
    background-color:#fff; color:#717171;
    font-family:'Open Sans',Helvetica,sans-serif;
    font-size:1em;
    font-weight:300;
    line-height:1.5;
}
h2, h3, h4, h5, h6 { color:#111; font-weight:normal; }
h1 { font-size:2.0em; color:#cfcfcf; font-weight:normal; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, code { padding:10px; }
hr { height:1px; background:#ddd; border:0; }
strong { font-weight:bold; }
code { font-size:1.1em; }
a { color:#07d; text-decoration:none; }
a:hover { color:#07d; text-decoration:none; }
.content h1:first-child, .content>*:first-child { margin-top:0; }
.content h1 a { color:#111; }
.content h1 a:hover { color:#111; text-decoration:none; }
.content img { max-width:100%; height:auto; }
.content form { margin:1em 0; }
.content table { border-spacing:0; border-collapse:collapse; }
.content th { text-align:left; padding:0.3em; border-bottom:1px solid #ddd; }
.content td { text-align:left; padding:0.3em; border-top:1px solid #ddd; }
.content blockquote { margin-left:.5em; padding-left:1em; border-left:.5em solid #dee077; }
.content blockquote blockquote { margin-left:-1.5em; border-left:.5em solid #dee077; }
.content blockquote blockquote blockquote { border-color:#dee077; }
.content code, pre { font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace; font-size:90%; }
.content code { padding:0.15em 0.4em; margin:0; background-color:#dee077; border-radius:3px; }
.content pre>code { padding:0; margin:0; white-space:pre; background:transparent; border:0; font-size:inherit; }
.content pre { padding:1em; overflow:auto; line-height:1.45; background-color:#dee077; border-radius:3px; }
.content .flexible { position:relative; padding-top:0; padding-bottom:56.25%; }
.content .flexible iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.content .stretchable ul { margin:0 -0.5em; padding:0; list-style:none; text-align:center; }
.content .stretchable li { margin:0; padding:1em 0; display:inline-block; text-align:center; vertical-align:top; }
.content .stretchable a { color:#717171; text-decoration:none; }
.content .toc { margin:0; padding:0; list-style:none; }
.content .entry-links .previous { margin-right:1em; }
.content .pagination .previous { margin-right:1em; }
.content .pagination { margin:1em 0; }
.content .left { float:left; margin:0 1em 0 0; }
.content .center { display:block; margin:0 auto; }
.content .right { float:right; margin:0 0 0 1em; }
.content .rounded { border-radius:4px; }

/* Header */

.header .sitename { display:block; float:left; }
.header .sitename h1 { margin:0; }
.header .sitename h1 a { color:#111; text-decoration:none; }
.header .sitename h2 { margin-top:0; color:#717171; font-size:1.0em; font-weight:300; }

/* Navigation */

.navigation { display:block; float:right; padding:10px; }
.navigation { margin-top:0.9em; margin-bottom:0.9em; line-height:2; }
.navigation a { padding:0 0.3em; }
.navigation ul { margin:0 -0.3em; padding:0; list-style:none; font-weight:700; }
.navigation li a.active { color:#333; }
.navigation li { display:inline; }
.navigation-tree { display:block; float:right; }
.navigation-tree { margin-top:0.9em; margin-bottom:0.9em; line-height:2; }
.navigation-tree a { padding:0 0.3em; }
.navigation-tree ul { margin:0 -0.3em; padding:0; list-style:none; }
.navigation-tree li { display:inline; }
.navigation-tree ul li { display:inline-block; position:relative; cursor:pointer; margin:0; }
.navigation-tree ul li ul { padding:0.3em; position:absolute; width:13em; background:#fff; z-index:100; display:none; }
.navigation-tree ul li ul { border:1px solid #bbb; border-radius:4px; box-shadow:2px 4px 10px rgba(0, 0, 0, 0.2); }
.navigation-tree ul li ul li { display:block; }
.navigation-tree>ul>li:hover>ul { display:block; }
.navigation-banner { clear:both; }
.navigation-search { padding-bottom:1em; }
.navigation-search .search-form { position:relative; }
.navigation-search .search-text { font-family:inherit; font-size:inherit; font-weight:inherit; }
.navigation-search .search-text { padding:0.5em; border:1px solid #bbb; border-radius:4px; width:100%; box-sizing:border-box; }
.navigation-search .search-text { background-color:#fff; background-image:linear-gradient(to bottom, #fff, #fff); }
.navigation-search .search-button { position:absolute; top:0; right:0; }
.navigation-search .search-button { font-family:inherit; font-size:inherit; font-weight:inherit; }
.navigation-search .search-button { margin:5px; padding:0.3em; border:none; background-color:transparent; }

/* cols begin */
.col2, .col3, .col4, .col6, .col8, .col9, .col10 {
    display:block;
    position:relative;
    float:left;
    padding:0;
    margin-right:0;
}
.col2 {
    width: 16.66667%;
}
.col3 {
    width:25%;
}
.col4 {
    width:33.3333%;
}
.col6 {
    width:50%;
}
.col8 {
    width: 66.66667%;
}
.col9 {
  width: 75%;
}
.col10 {
  width: 83.33333%;
}

/* clear */
.clear {
    clear:both;
}
/* Optional: Vertical centered text */
.middle {
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.white {
    color:#fff;
}
.center {
    text-align:center;
}
/* cols end */

.pix1 {
    display:inline-block;
    background-image:url(/yellow-master/media/images/graphic-bg.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    height:333px;
}
.grey {
    display: table-cell;
    background:#efefef;
    height:333px;
}

/* Footer */

.footer { margin:2em 0;}
.footer .siteinfo a { color:#07d; padding:10px; }
.footer .siteinfo a:hover { color:#07d; text-decoration:underline; }
.footer .siteinfo a.language img { vertical-align:middle; margin-top:-5px; margin-right:0.75em; }
.footer .siteinfo-left { float:left; }
.footer .siteinfo-right { float:right; }
.footer .siteinfo-banner { clear:both; }

/* Sidebar */

.with-sidebar .main { margin-right:17em; }
.with-sidebar .sidebar { float:right; width:16em; margin-top:3.9em; padding:2px; overflow:hidden; font-size:0.9em; }
.with-sidebar .sidebar .search-form input { width:100%; box-sizing:border-box; }
.with-sidebar .content:after { content:""; display:table; clear:both; }

/* Forms and buttons */

.form-control {
    margin:0; padding:2px 4px;
    display:inline-block; min-width:7em;
    background-color:#fff; color:#555;
    background-image:linear-gradient(to bottom, #fff, #fff);
    border:1px solid #bbb;
    border-radius:4px;
    font-size:0.9em; font-family:inherit; font-weight:normal; line-height:normal;
}
.btn {
    margin:0 0 0 10px; padding:10px 22px;
    display:inline-block; min-width:7em;
    background-color:#eaeaea; color:#333333;
    background-image:linear-gradient(to bottom, #f8f8f8, #e1e1e1);
    border:1px solid #bbb;
    border-color:#c1c1c1 #c1c1c1 #aaaaaa;
    border-radius:4px;
    outline-offset:-2px;
    font-size:0.9em; font-family:inherit; font-weight:normal; line-height:1;
    text-align:center; text-decoration:none;
    box-sizing:border-box;
}
.btn:hover, .btn:focus, .btn:active {
    color:#333333;
    background-image:none; 
    text-decoration:none;
}
.btn:active { box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.1); }

/* Misc */

.template-default .content img.screenshot { margin:0 -0.5em; }
.template-language .content div.language { font-size:1.2em; text-align:left; width:9em; margin:0 auto; }
.template-language .content div.language p { margin:1.5em 0em; }
.template-language .content div.language img { vertical-align:middle; margin-top:-5px; margin-right:1.5em; }
.highlight .kw1, .highlight .kw2, .highlight .kw3, .highlight .kw4 { color:#b0b; }
.highlight .st0, .highlight .st_h, .highlight .nu0 { color:#b0b; }
.highlight .re0, .highlight .re1, .highlight .re2, .highlight .re3, .css .nu0 { color:inherit; }
.highlight .co1, .highlight .coMULTI, .highlight .sc0, .highlight .sc-1 { color:inherit; }

/* Responsive and print */

.page { margin:0 auto; max-width:1000px; }

@media screen and (min-width:62em) {
    body { width:60em; margin:1em auto; }
    .page{ margin:0; max-width:none; }
}

/* columns on smartphones and small tablets */
@media screen and (max-width:45em) {
    .col2, .col3, .col4, .col6, .col8, .col9, .col10 {float:none; width:100%;}
}


@media screen and (max-width:32em) {
    body { margin:0.5em; font-size:0.9em; }
    .header .sitename h1, .content h1, .content h2 { font-size:1.3em; }
    .header .sitename h1, .header .sitename h2, .page { margin:0; padding:0; }
    .footer {margin:2em 0;} 
    .header .sitename, .navigation, .navigation-tree { float:none; }
    .navigation { margin-top:0.5em; margin-bottom:0.5em;}
    .navigation-search { padding-bottom:1em; }
    .with-sidebar .main { margin-right:0; }
    .with-sidebar .sidebar { display:none; }
    .sitename {padding-top:20px; padding-left:10px;}
}
@media print {
    .page { border:none !important; }
}