Ansprechende Webdesigns mit dem Bootflat Flat UI KIT erstellen

2014-01-09 | Toni Pohl

Jede moderne Website braucht es: Ein ansprechendes und adaptives Design. Ein aktueller Standard für die HTML/CSS/Javascript Umsetzung sind die Bootstrap-Designs. Die Anwendung davon soll natürlich so einfach wie möglich sein.

Genau das stellt das neue Open Source Projekt Bootflat Flat UI KIT bereit. Dieses Framework basiert auf dem Bootstrap 3 CSS und wurde für Designer, Developer und Agenturen erstellt, um die Zeit für die Umsetzung von responsive HTML Designs zu minimieren.

Bootflat besteht aus verschiedenen UI-Elementen in einem Block-Rahmen. Jeder Block steht für eine bestimmte Website-Größe mit verschiedener Darstellung von header, content layout, blog, tables und footer. Das anpassbare Design passt sich so im Idealfall an die einzelnen Endgeräte an.

image

Das Bootflat Flat UI KIT steht auf GitHub zum Download bereit. Die Website http://www.flathemes.com informiert über das Framework und den Einsatz der UI-Controls. Der Download beinhaltet alle erforderlichen Komponenten – jedoch keine HTML-Beispieldatei.

image

In http://www.flathemes.com/getting-started.html sind die wichtigsten Informationen für den raschen Start enthalten. Das Framework ist sehr schlank, das Download-Paket enthält (nur) diese Komponenten:

image

Das Basis-Layout in einem HTML-Dokument sieht so aus:

   1: <!DOCTYPE html>
   2: <html>
   3:     <head>
   4:       <title>Bootflat Template</title>
   5:       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6:       <!-- Bootstrap -->
   7:       <link href="bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
   8:       <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
   9:       <link href="css/bootflat.css" rel="stylesheet" media="screen">
  10:       <link href="css/bootflat-extensions.css" rel="stylesheet" media="screen">
  11:       <link href="css/bootflat-square.css" rel="stylesheet" media="screen">
  12:  
  13:       <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  14:       <!--[if lt IE 9]>
  15:         <script src="js/html5shiv.js"></script>
  16:         <script src="js/respond.min.js"></script>
  17:       <![endif]-->
   1:  
   2:     </head>
   3:     <body>
   4:         <h1>Hello, world!</h1>
   5:  
   6:         <div class="row">
   7:         <div class="col-md-6">
   8:             <h3>Two Styles</h3>
   9:             <p>To enrich your choice, one style is based on the improved style of boostrap 3.0, the other is Square UI style with the rounded corner removed.</p>
  10:         </div>
  11:         <div class="col-md-6">
  12:             <h3>Defaults</h3>
  13:             <p>These components generally normalize HTML elements for cross browser functionality and add some very basic styling.</p>
  14:         </div>
  15:         </div>
  16:                 
  17:       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  18:       <script src="//code.jquery.com/jquery.js">
   1: </script>
   2:       <!-- Include all compiled plugins (below), or include individual files as needed -->
   3:       <script src="js/bootstrap.min.js">
</script>
  18:     </body>
  19: </html>

Die Seite http://www.flathemes.com/docs/components.html zeigt die fertigen UI Controls.
Soll zum Beispiel eine Menüleiste eingebaut werden, kann dies sehr einfach erfolgen, siehe http://www.flathemes.com/docs/navbar.html usw.

Das Bootflat Flat UI KIT unterstützt alle gängigen Browser in ihren letzten Versionen:

Zusätzlich funktioniert Bootflat laut der Website auch in älteren Browsern wie Chromium for Linux und Internet Explorer 7 – jedoch wird dies nicht offiziell unterstützt.

In diesem Sinne: Ansehen, Ausprobieren und viel Spaß damit!

Categories: ASP.NET, App, Design, HTML5, Javascript, SEO, Tools, Windows, Mobile

Source: https://blog.atwork.at/post/Bootflat-Flat-UI-KIT