Contao Clean Theme 1.0

Das Contao Basic Theme ist eine kleine Hilfestellung für alle Webprojekte, die gerne ohne einen absoluten Kaltstart auskommen wollen. Es handelt sich hierbei jedoch nicht um vorgefertigte CSS-Klassen (wie bei BT, Foundation, etc.).

Das CBT dient ausschließlich dazu, Elemente, die stets gebraucht werden, mit einem Klick ins Projekt zu implementieren (css | less, jQuery Funktionen). Es werden kaum neue CSS-Klassen erstellt und benötigt, außer Basics wie .clr als clearfix oder .out zum Anzeigen des Hauptmenüs in der responsive Version.

Das Contao Basic Theme verlangt von seiner Frontenderin / seinem Frontender, sich mit einem individuellen Layout auseinander zu setzen und dementsprechend die Elemente anzupassen. Die evtl. eingetragenen Werte (z.B. font-family: "Georgia", serif; etc.) MÜSSEN geändert werden, außer die Gestaltung sieht ebendiese Schriftart vor.

Es kann dennoch, falls erwünscht, mit wenigen Angaben das Grundlayout erreicht werden. Gestalter Marcus Dorau aus Wuppertal und ich haben unsere veröffentlichen Projekte studiert, und sind zum Ergebnis gekommen, dass wir einige Parameter & Größenangaben im identischen Verhältnis ständig verwenden, wie z.B. line-height und margin-bottom, die wiederrum anhand einer einzigen Größenangabe fest gelegt werden können, und zwar an font-size. Aber auch das ist in wenigen Klicks veränderbar.

Durch die calc() Funktion des CSS kann font-size als einzige Größenangabe weitergereicht und verschiednenen Elementen in veränderlichen Maßen zugeschrieben werden. Dank .less lässt sich dieses Vorgehen in Variablen festlegen, was uns die Arbeit ungemein erleichtert.

Variablen in der _variab.less


/* --------------------------------------------------------- VARIAB.LESS ----- */

@white: rgb(255, 255, 255);
@black: rgb(0, 0, 0);
@transpa: transparent;
@error: red;
@fontFam: "Georgia", serif;
@fontForm: @fontFam;
@fontSize: 1rem; // 16px
@borderColor: fadeout(@black, 70%);
@border: 1px solid @borderColor;
@borderError: 1px solid @error;
@focusBorder: blue;
@linkHover: green;
@menuMainBG: @white;
@formWidthMax: 600px;
@inputPadding: 5px;


CSS-Initiierung in der sty.less

@import "include/_variab";
@import "include/_mixins";
@import "include/_box_sizing_global";
@import "include/_reset";
@import "include/_font_face";

/* --------------------------------------------------------- DEFAULT STYLE ----- */

html{
	font-size: 60%;
	font-weight: 100;
	letter-spacing: .1px;
}

body{
	font-family: @fontFam;
}

a {
	color: fade(@black, 80%);
	.transition(color ease 0.35s);

	&:hover{

		color: @linkHover;
	}

	img{
		display: block;
	}
}

li, p{
	font-size: @fontSize; // 16px
	line-height: 1.5;
}

h1											{font-size: calc(@fontSize * 1.8)}

h2											{font-size: calc(@fontSize * 1.8)}

h3, h4, h5									{font-size: @fontSize}

h1, h2, h3, h4, h5, h5, h6					{line-height: 1.3}

h1, h2, h3, h4, h5, h5, h6, ul, p, iframe	{margin: 0 0 calc(@fontSize * 1.5)}

iframe										{max-width: 100%;}

@import "include/_clearfix";
@import "include/_invisib";
@import "include/_classes";
@import "include/_hamburger";
/* --------------------------------------------------------- FORMS ----- */
.formbody{
	padding: 0 0 @fontSize;
}

fieldset{
	padding: 0 0 @fontSize;
}

legend{
	font-size: calc(@fontSize * 1.5);
	font-weight: bold;
	margin: 0 0 @fontSize;

	&:empty{
		display: none; // Capcha legend is empty :-/
	}
}

.widget{
	width: 100%;
	display: block;
	padding: 0 0 @fontSize;
}

label{
	width: 100%;
	display: block;
	line-height: 1.2;
	margin: 0 0 calc(@fontSize * .25);
}

.text,
.textarea,
.submit,
.captcha{
	width: 100%;
	max-width: @formWidthMax;
	display: block;
	padding: 0 @inputPadding;
	font-size: @fontSize;
	line-height: 2;
	border: @border;
	background-color: @white;
	.transition(border .3s ease .1s);

	&.error{
		border: @borderError;
	}

	&:focus{
		border-color: @focusBorder;
	}
}

.checkbox{
	width: auto;
	display: inline-block;
	vertical-align: baseline;
	margin: 0 calc(@fontSize * .25) 0 0;
}

.checkbox_container{
	padding: 0 0 calc(@fontSize * .75);

	label{
		width: auto;
		display: inline-block;
		vertical-align: baseline;
	}
}

.widget-select{

	select{
		width: 100%;
		display: block;
		font-size: @fontSize;
		font-family: @fontForm;
		line-height: 2;
		border: @border;
		border-radius: 0;
		background-color: @white;
		padding: @inputPadding;
		-webkit-appearance: none;
		-moz-appearance:    none;
		appearance:         none;
	}
}

.submit_container{
	padding: 0 0 @fontSize 0;
}

.error{
	color: @error;
	margin: 0 0 calc(@fontSize * .25);
}
/* --------------------------------------------------------- FORMS END ----- */

/* --------------------------------------------------------- WRAPPER ----- *


.inside{
//	max-width: 960px;
//	margin: 0 auto;
}


/* --------------------------------------------------------- HEADER ----- *
#header{}

/* --------------------------------------------------------- LOGO ----- *
#logo{}

/* --------------------------------------------------------- MENU ----- */
#menu_main{
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(120%);
	.transition(transform .2s ease .1s);
    overflow-y: auto;
    backface-visibility: hidden;
    background-color: @menuMainBG;
    z-index: 10;

    &.out{
	    transform: translateX(0);
	}


	a, span{
		display: block;
	}

	span{}
}

/* --------------------------------------------------------- CONTAINER ----- */
#container{

	[class*="ce_"]{
		padding: 0 0 @fontSize;
	}

	.image_container{
		max-width: 30%;
		min-width: 200px;
		position: relative;
		margin: 0 auto @fontSize;

		&.float_left{
			margin: 0 calc(@fontSize * 1.2) calc(@fontSize * .5) 0;
		}

		&.float_right{
			margin: 0 0 calc(@fontSize * .5) calc(@fontSize * 1.2);
		}
	}

	.caption{
		font-size: calc(@fontSize * .8);
		line-height: 1.5;
	}

	@import "include/_magnifier";
}
/* --------------------------------------------------------- FOOTER ----- */
#footer{

	ul{
		margin: 0;
	}

	li{}

	a,span{
		display: block;
	}

	span{}
}

Das Theme bedient vorhandene Elemente (.ce_image, etc.) und ist überall einsetzbar.

Hier kann das Contao Clean Theme heruntergeladen (.zip) und bei der Projektiniitierung importiert werden. Mit am Start sind der "jQuery Sticky Footer" und die animierten Hamburger von Jonathan Suh, die ich komplett in .less "erstellt" habe, sowie das dazugehörige (HTML5_konforme) HTML-Modul, sowie minimal gestaltete Formulare.

Es sind zuerst alle Hamburger sichbar. Somit kann der Passende (vom Kunden, z.B.) bestimmt werden. Dieser wird anschließend im separaten, eigenen HTML-Modul veröffentlicht. In der hamburger.less wird nur die benötigte Animation inkludiert.

Die functions.js enthält, neben dem jQuery sticky footer, eine toggleClass() basierte Funktion, mit der das #menu_main aufgerufen, bzw. versteckt werden kann. Zusätzlich wir abgefragt, ob js an oder aus ist und als body.js_off | .js_on eingetragen. Es ist zudem eine Funktion integriert, mit der das Defaultverhalten der <a> Elemente außer Kraft gesetzt werden kann - dem entsprechenden Element wird einfach manuell .no_link gegeben.

Die jQuery-Funktionen

jQuery(function($){


	var body = $("#top"),

		view = $(window),

		aNoLink = $("a.no_link"),

        wrapper = $("#wrapper"),

        container = $("#container"),

        menuMain = $("#menu_main"),

		hamburger = $(".hamburger"),			// for toggleMenu()

        main = $("#main"),

        footer = $("#footer"),

        viewHeight = view.height(),							// Fensterhöhe

        wrapperHeight = wrapper.height(),
        
        footerHeight = footer.height(),

        mainOffset = main.offset(),							// offset.top = Headerhöhe

        headFootHeight = mainOffset.top + footerHeight,		// vorhandene Header- und Footerhöhe

        minContentHeight = viewHeight - headFootHeight;		// Minimalhöhe des #container, um das Browserfenster auszufüllen


	function checkJS(){

		body.toggleClass("js_off js_on");
	}


	function noLink(){

		aNoLink.click(function(event){

  			event.preventDefault();

		});
	}


	function menuInOut(){

		hamburger.click(function(){

			$(this).toggleClass("active");
			menuMain.toggleClass("out");

		});
	}


    function stickyFooter(){

        if ( wrapperHeight < viewHeight ) {						// erst feuern, falls #wrapper kleiner als Browserfenster

        	container.css("min-height", minContentHeight);
        }

        footer.addClass("loaded");								// Anti-Flash-Effect, benötigt sticky_footer.css / sticky_footer.less

    }


	$(document).ready(function(){
		checkJS();
		noLink();
		menuInOut();
	});


    $(window).load(function(){									// Erst wenn ALLE Elemente "gefüllt" sind, kann man die Werte auslesen
    	stickyFooter();
    });

});

Diese Website wurde mit dem Contao Basic Theme erstellt. Bei Fragen benutzt bitte die Kommentarfunktion, damit alle Antworten zentral gesammelt und bei Bedarf stets abrufbar sind.

Zurück

Einen Kommentar schreiben