Beiträge der Kategorie css

Foundation Block-Grid mit Gridelements

Ich mag Foundation, unter anderem weil ich das Block Grid so toll finde. Und so kann man mit Gridelements ein Block-Grid im Frontend (mit einer hübschen Backend-Ausgabe) realisieren.

Zunächst man braucht man ein Gridelement mit nur einer Content-Spalte. Da schmeißt man dann alle Inhaltselemente rein und sie werden automatisch in Spalten ausgegeben. In diesem Fall hab ich das Gridelement in einer Datei konfiguriert.

tx_gridelements.setup.blockgrid {
	title = Blocks
	description = Inhalte automatisch auf mehrere Spalten verteilen
	icon = EXT:my_extension/Resources/Public/Icons/columns-3.png
	flexformDS = FILE:EXT:my_extension/Configuration/FlexForms/Gridelements/Blockgrid.xml
	config {
		colCount = 1
		rowCount = 1
		rows {
			1 {
				columns {
					1 {
						name = Inhalt
						colPos = 55
					}
				}
			}
		}
	}
}

Im Flexform habe ich zwei Felder konfiguriert – large, medium und small. Darin gibt man die Anzahl der Elemente für die jeweilige Auflösung an. Default sind es 3 Large, 2 Medium und 1 Small.

Die Ausgabe erfolgt durch ein Fluid-Template. Wie die Konfiguration dazu aussieht, findet man schnell im Internet – einfach nach „gridelements fluid“ suchen. Damit ich keinen eigenen ViewHelper schreiben muss, um auf variable Array-Indizes zuzugreifen, habe ich Vhs verwendet. Jedes Content-Element aus der Spalte wird in <div class="column"></div> gewrappt.

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="row small-up-{data.flexform_large} medium-up-{data.flexform_medium} large-up-{data.flexform_large}">
    <f:for each="{data.tx_gridelements_view_children}" as="content">
        <div class="column">
            <f:format.raw>
                <v:variable.get name="data.tx_gridelements_view_child_{content.uid}" />
            </f:format.raw>
        </div>
    </f:for>
</div>
</html>

So weit passt schonmal das Frontend. Im Backend kann man ein wenig mit CSS tricksen. Ich habe bewusst als colPos 55 gewählt. Diese Zahl wird ins Template reingeschrieben, und macht es so möglich, ein spezielles CSS darauf anzuwenden. Man definiert also ein Backend CSS und schreibt da folgendes rein (Scss):

.t3-page-ce-wrapper[data-colpos='55'] {
  .t3-page-ce[data-uid] {
    width: 46%;
    float: left;
 
    &:nth-child(2n) {
      clear: both;
    }
  }
}

Damit werden die Content Element im Backend in zwei Spalten dargestellt. Theoretisch kann man da auch Breakpoints definieren, der Phantasie sind keine Grenzen gesetzt.

Fancybox mit Icon Font

Ein Kunde von mir liebt die Fancybox, daher möchte er es gerne in seinen Projekten drin haben. Ich finde sie gut, allerdings gefällt mir nicht, wenn die Blätterpfeile und der Schließen-Button mit Hintergrundbildern gestylt werden. In den Zeiten der Icon Fonts finde ich diese einfach viel besser (und flexibler). Font-Awesome habe ich als Scss eingebunden und kann die Mixins und Variablen davon nutzen.

So kann man das X mit Fontawesome umsetzen:

.fancybox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 8040;
  background-color: $white;
  border-radius: 16px;
  border: 3px solid $body-font-color;
  color: $body-font-color;
  box-shadow: 0 5px 10px rgba($dark-gray, 0.5);
  font-size: rem-calc(18);
 
  &::before {
    @include fa-icon;
    content: $fa-var-times;
    display: block;
    position: absolute;
    top: 5px;
    left: 6px;
  }
}

Und so werden aus den Icons für die Pfeile ebenfalls Font Icons:

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 21px;
  margin-top: -8px;
  cursor: pointer;
  z-index: 8040;
  visibility: visible;
  opacity: 0.5;
  color: $white;
  &::before {
    @include fa-icon;
    font-size: rem-calc(24);
    text-shadow: 0px 0px 5px rgba($dark-gray, 0.5);
  }
}
 
.fancybox-prev span {
  left: 10px;
  &::before {
    content: $fa-var-chevron-left;
  }
}
 
.fancybox-next span {
  right: 10px;
  &::before {
    content: $fa-var-chevron-right;
  }
}

Selbst das Loader Bild kann man ersetzen: mit Css Animations. Das zu testen ist allerdings etwas tricky. Man kann beim Aufruf der Seite das Fancybox-Loading anzeigen lassen.

$(document).ready(function () {
    $.fancybox.showLoading();
});

Weil man denn den Loader endlich mal länger sieht, kann man den entsprechend stylen:

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
}
 
#fancybox-loading div {
  width: 44px;
  height: 44px;
  color: $body-font-color;
  &::before {
    @include fa-icon;
    content: $fa-var-spinner;
    font-size: rem-calc(44);
    animation: fa-spin 1s infinite steps(8);
  }
}

Coole Radio-Buttons und Checkboxen ohne JavaScript

Man braucht nur ein zusätzliches Span im Label (wahrscheinlich nicht mal das) und muss darauf achten, dass das for-Attribut beim Label korrekt gesetzt ist.

Das HTML:

<input id="radiobutton" type="radio" name="radiobutton" value="1" />
<label for="radiobutton"><span></span>Radio Button</label>

Man blendet die eigentliche Box aus und „zeichnet“ stattdessen eine Box mit CSS. Wenn die Box angeklickt ist, dann mache ich in dem Fall ein blaues Quadrat rein, man könnte aber auch Iconfont nehmen oder doch Hintergrundbilder (die ich eigentlich damit vermeiden will).

Das Styling als SCSS:

input[type="radio"] {
	display:none;
}
 
input[type="radio"] + label span {
	display:inline-block;
	position: relative;
	width:22px;
	height:22px;
	background-color: $darkgray;
	border: 2px solid #ababab;
	@include border-radius(3px);
	margin-right: 5px;
	cursor:pointer;
}
 
input[type="radio"]:checked + label span {
	&::after {
		content: "";
		@include border-radius(3px);
		width: 10px;
		height: 10px;
		background-color: $blue;
		border: 1px solid darken($blue, 10%);
		position: absolute;
		top: 3px;
		left: 3px;
		display: block;
	}
}

Das gleiche Prinzip lässt sich auch auf Checkboxen übertragen.

Geschrieben in css | Kommentare deaktiviert für Coole Radio-Buttons und Checkboxen ohne JavaScript

Welches Stylesheet greift denn nun?

Das Framework Foundation hat mehrere Breakpoints für Responsive Websites. Vielleicht wissen manche Frontend-Entwickler immer sofort, in welchem Abschnitt (zwischen welchen Breakpoints) sie sich nun befinden. Mir fällt es manchmal schwer, das auf den ersten Blick zu erkennen – ist das schon large oder noch medium. Und so habe ich ein CSS-Schnipsel, das ohne den Code der Seite zu verändern in der oberen Ecke anzeigt, in welche Kategorie die aktuelle Auflösung eingeordnet wird.

body:after {
	content: "other";
	position: fixed;
	top: 0;
	left: 0;
	background-color: white;
	border: 1px solid silver;
	color: silver;
	z-index: 100;
	padding: 10px;
}
@media #{$large-only} {
	body:after {
		content: "large";
	}
}
@media #{$medium-only} {
	body:after {
		content: "medium";
	}
}
@media #{$small-only} {
	body:after {
		content: "small";
	}
}

Geschrieben in css | Kommentare deaktiviert für Welches Stylesheet greift denn nun?

Zebratabellen mit JavaScript und CSS3

Was sind Zebratabellen: total schöne Tabellen bei denen diel Zeilen abwechselnde Farben haben. In meinem Fall unterschied sich die letzte Zeile auch ein wenig. Die Klasse contenttable wird Tabellen gegeben, die im RTE in TYPO3 erstellt worden sind.

Theretisch reicht etwas CSS mit folgenden Selektoren:

table.contenttable {
}
table.contenttable th {
}
table.contenttable td {
}
table.contenttable td:first-child {
}
table.contenttable td.first {
}
table.contenttable td:last-child {
}
table.contenttable td.last {
}
table.contenttable th p,
table.contenttable td p {
}
table.contenttable tr:nth-child(even) td {
}
table.contenttable tr.even td {
}
table.contenttable tr:last-child td {
}
table.contenttable tr.last td {
}

Ähnliche Selektoren, wie z.B. td:last-child und td.last kann man leider nicht zusammenfassen, da der IE sie dann nicht interpretiert.

Im IE7 und IE8 klappt es nur mit CSS natürlich nicht, unterstützt werden muss das Ding ja trotzdem, daher hilft etwas JavaScript:

$('table.contenttable').each( function(index, value) {
	var $s=1;  
	$(this).find("tr").each(function(){ 
		$s++; 
		if($s%2==1)  
			$(this).addClass('odd');
		else
			$(this).addClass('even');
		$(this).children('td').first().addClass('first');
		$(this).children('td').last().addClass('last');
	});
	$(this).find("tr").last().addClass('last');
});

Geschrieben in css, javascript | Kommentare deaktiviert für Zebratabellen mit JavaScript und CSS3

Warum eine größere Schrift auf Webseiten besser ist

Ein interessanter Artikel mit dem Vorschlag größere Schriftgrößen auf Webseiten zu verwenden.
16px body copy, anything less is a mistake
Da hat er Recht der Mann. Kleine Schriften haben auch den Nachteil, dass bei einer Webseitenbreite von 900px und einer Spalte die Zeilen viel zu lang zum Lesen sind. Lesen auf dem Bildschirm ist anstrengender als auf dem Papier, manche Seiten sind eh sehr textlastig und dann noch die kleinen Schriften.

Geschrieben in css | Kommentare deaktiviert für Warum eine größere Schrift auf Webseiten besser ist

Schriften im Web und @font-face

Ich habe mich ein wenig mit Nicht-System-Schriften in Webseiten beschäftigt und das ist dabei herausgekommen. Man kann Schriften, die auf dem System des Benutzers nicht verfügbar sind, mittels @font-face per CSS inkludieren und nutzen. Kleine Anleitung dazu. Natürlich sieht die Seite in jedem Browser etwas anders aus. Im IE schien die Schrift eine ganz andere zu sein. Wie ich diesem Artikel font-face Schriften in Webseiten einbetten erfahren habe, kann der IE nämlich keine OTF-Schriften, daher muss man diese vorher in EOT konvertieren. Fontforge ist nicht mehr als Binary verfügbar und viele Programme wollte ich nun auch nicht installieren und fand dann dieses Tool: Font Squirrel. Das kann nicht nur aus einer OTF-Datei die benötigte EOT erstellen, sondern generiert den korrekten CSS-Schnipsel dazu und erstellt eine Datei, die die Schrift in vielen Größen darstellt, so dass man einen Eindruck davon bekommt, wie sie sich in unterschiedlichen Schriftgrößen verhält.

Geschrieben in css | Kommentare deaktiviert für Schriften im Web und @font-face