Category: CSS

HTML: how to vertically center an object with CSS?

xml tag

There are several ways to vertically center an object with CSS:

Flexbox

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>
.container {
  display: flex;
  align-items: center;
  height: 100%;
}

This method uses the CSS flexbox layout to center the child element vertically within the parent container. The align-items property set to center aligns the child element along the cross axis.

Grid Layout

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>
.container {
  display: grid;
  place-items: center;
  height: 100%;
}

This method uses the CSS grid layout to center the child element vertically and horizontally within the parent container. The place-items property set to center aligns the child element both vertically and horizontally.

Table Cell

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>
.container {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

This method uses the CSS table layout to center the child element vertically within the parent container. The display: table-cell and vertical-align: middle properties treat the parent container as a table cell and vertically center the child element within it.

Transforms

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>
.container {
  position: relative;
  height: 100%;
}
.center-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

This method uses CSS transforms to center the child element vertically within the parent container. The top: 50% property positions the child element vertically halfway down the parent container, and the transform: translateY(-50%) property moves the child element upwards by half its own height, effectively centering it vertically within the parent container.

Foto von Jackson Sophat auf Unsplash.

 

Customizing Bootstrap 4 without changing the core files

A simple instruction to customize the Bootstrap 4.0 using SASS and Autoprefixer.

But why? You can either…

  1. download the compiled version of Bootstrap or
  2. use the source of Bootstrap 4 and compile a custom version or
  3. use the CDN server

When you choose number 2, then it’s necessary to use SASS for compiling the style sheet and Autoprefixer for CSS vendor prefixing. And this is how to get a customized version of Bootstrap:

First make sure, you’ve installed Node.js and SASS.

Then create an empty folder my_directory with the following folders and some empty text files:

my_directory
+- node_modules [folder]
+- custom.scss
+- package.json

The node_modules folder is required for some node.js modules. custom.css will hold all your customized stylesheets and package.json is used for some node.js package settings. You will see this later.

Now it’s time to load the current version of Bootstrap. Download the source of Bootstrap 4 and extract the zip to the folder /node_modules/bootstrap/.

Point your terminal to my_directory and install some node.js modules with the following command:

npm install postcss-cli autoprefixer npm-run-all

Now you can open the custom.scss file and add some costumized styles. This file can look like this:

// Custom.scss

$mixable: #ca0027;

$colors: (
 "mixable": $mixable,
);
$theme-colors: (
 "primary": $mixable
);

// Required
@import "node_modules/bootstrap/scss/bootstrap";

In this simple example, we just set a new color and use this color as primary color. A more detailed description on how to customize your theme can be found in the Bootstrap docs.

Let’s say we have made all of our customizations, so let’s open the empty file package.json. Add the following lines, which are required to combine your custom stylesheet and the Bootstrap source:

{
  "scripts": {
    "style":"sass custom.scss | postcss --use autoprefixer -o custom.css",
    "style-min":"sass custom.scss --style compressed | postcss --use autoprefixer -o custom.min.css",
    "all":"npm-run-all --parallel style style-min"
  }
}

This file contains three scripts, which can be executed like this:

To create the output file custom.css:

npm run style

To create a compressed output file custom.min.css:

npm run style-min

And to create both files at once:

npm run all

That’s it. Keep in mind, that this will just compile the stylesheet. To compile the javascript, you should refer to the Bootstrap docs and the build tools there.

 

Less (CSS) unter macOS installieren

Der einfachste Weg Less auf einem Server zu installieren ist über npm (dem node.js Paketmanager) mit:

$ npm install -g less

Wenn nicht vorhanden: Command Line Tools für Xcode installieren

xcode-select --install

Wenn nicht vorhanden: HomeBrew installieren

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Wenn nicht vorhanden: Node.js installieren

brew install node

LessCSS installieren

sudo npm install -g less

Nun lassen sich die lessc Befehle ausführen.

CSS: inline-block und der Internet Explorer

Auch im Jahre 2012 ärgert man sich noch mit so mancher Eigenart des Internet Explorers herum. Was andere Browser (Chrome, Safari, Firefox) schon lange können, muss man dem Internet Explorer wieder gesondert beibringen. Die Rede ist diesmal von der CSS-Eigenschaft display:inline-block. Eigentlich eine schöne Sache, um bspw. einem Inline-Container feste Abmessungen (Breite, Höhe) zuzuordnen. Doch der IE scheint diese Eigenschaft nicht zu unterstützen. Für ihn gibt es NUR display:inline oder NUR display:block, aber nicht beides “zusammen”. Bevor ich aber nun weiter über den IE herziehe, hier eine mögliche Lösung:

HTML5 Boilerplate – das Grundgerüst für HTML5

HTML5 Boilerplate bietet ein kompaktes Grundgerüst zum Gestalten von Webseiten oder wie auch ich es nicht besser ausdrücken kann:

HTML5 Boilerplate ist ein professionelles HTML/CSS/JS-Template als Basis für eine schnelle, robuste und zukunftssichere Website.
Nach mehr als zwei Jahren Entwicklung, bekommt ihr das beste der besten Techniken zusammengefasst: Cross-Browser-Normalisierung, Performance-Optimierungen und sogar optionale Features wie Cross-Domain AJAX und Flash. Eine starter .htaccess-Konfigurationsdatei kommt mit praktischen Caching-Regeln, bereitet deine Seite für HTML5-Video vor und erlaubt dir einfache @font-face-Nutzung und gzip-Auslieferung deiner Ressourcen.
Boilerplate ist weder ein Framework, noch schreibt es dir eine Entwicklungsphilosophie vor. Es ist eine Sammlung von Tipps und Tricks, die dir helfen sollen, dein Projekt schnellstmöglich und flexibel auf die Beine zu stellen.

… ohne dabei eine Menge Zeit in die Anpassung einer Webseite an die verschiedensten Browser zu vergeuten. Weitere Informationen gibt es auf http://html5boilerplate.com/.

Web-Development: eine Sammlung an hilfreichen Tutorials und Webseiten

Auch beim Gestalten von Webseiten gibt es immer wieder Dinge, welche schon einmal irgendwo in den tiefen des Internet beschrieben wurden. Damit das Rad also nicht neu erfunden werden muss, hier eine Liste mit hilfereichen Tutorials, wenn es um Web-Development geht. Neben allgemeinen Themen zum Webdesign soll es hierbei auch um die Verwendung der aktuellen Standards von HTML5 und CSS3 gehen.

HTML-Sonderzeichen in CSS content

CSS 'content' akzeptiert keine benannten oder numerischen HTML Sonderzeichen wie &copy; oder &#169;, diese können wirklich nur in HTML-Quelltext verwendet werden. Um Sonderzeichen in CSS verwenden zu können, muss man auf die Text-Darstellung in ASCII oder Unicode zurückgreifen. In CSS sieht das Ganze dann wie folgt aus:

.text:before { content:"\00a9"; }

Eine Tabelle mit allen möglichen Unicode-Zeichen (sortiert nach Blöcken) findet sich unter: http://www.fileformat.info/info/unicode/block/index.htm