Bootstrap Basis-Setup

Less

Ich habe das Paket für OSX installiert von http://nodejs.org. Damit habe ich das Kommando lessc verfügbar und den Node Installer npm unter /usr/local/bin/npm.

Bootstrap

Hier bin ich meinen eigenen Weg gegangen, um unabhängig von den Fedext/Ecodev Extensions zu sein. Ich habe mir zunächst das Bootstrap framework geladen von https://github.com/twbs/bootstrap. Aber nicht den Standard Download sondern den master branch mit allen nötigen Dateien, da ich unter anderem less nutzen will.

Erstellt: 07/2013| Geändert: 10/2015

Grundstruktur einrichten

Analog zu der Beschreibung im Link oben, das Bootstrap Package laden.

Erstellt: 07/2013| Geändert: 10/2015

Dateistruktur

Zunächst den Ordner bootstrap anlegen im Webroot - das wird die neue statische Seite. Im Unterordner assets kommt folgende Struktur:

Erstellt: 07/2013| Geändert: 10/2015

Make

bootstrap

Ich habe eine Ordner make angelegt, in dem Skripte liegen sowie die Sourcen. Im Unterordner bootstrap liegt die Bootstrap source. Dort zunächst Bootstrap Make ausführen mit

npm install

Damit werden die node_modules angelegt.

jQuery

jquery und jqueryui laden (ich nehme smoothness als Theme, das dezenteste in grau) und im Ordner jquery ablegen.

make.sh

Das Skript make.sh im Ordner /make anlegen mit folgendem Inhalt:

 

#!/bin/bash

#---------------------------
# make css
#---------------------------
cp  bootstrap/less/*.less ../less/

# make application.less
echo '// -------------------------------' > ../less/application.less
echo '// rootsystem custom less' >> ../less/application.less
echo '// -------------------------------' >> ../less/application.less

# compile css
/usr/local/bin/lessc ../less/bootstrap.less > ../css/bootstrap.css
/usr/local/bin/lessc --yui-compress  ../less/bootstrap.less > ../css/bootstrap.min.css

# compile responsive css
/usr/local/bin/lessc ../less/responsive.less > ../css/bootstrap-responsive.css
/usr/local/bin/lessc --yui-compress  ../less/responsive.less > ../css/bootstrap-responsive.min.css


if [ "$1" = "css" ]; then
    exit   
fi

#---------------------------
# make bootstrap js
#---------------------------

# concat
cat bootstrap/js/bootstrap-transition.js bootstrap/js/bootstrap-alert.js bootstrap/js/bootstrap-button.js bootstrap/js/bootstrap-carousel.js bootstrap/js/bootstrap-collapse.js bootstrap/js/bootstrap-dropdown.js bootstrap/js/bootstrap-modal.js bootstrap/js/bootstrap-tooltip.js bootstrap/js/bootstrap-popover.js bootstrap/js/bootstrap-scrollspy.js bootstrap/js/bootstrap-tab.js bootstrap/js/bootstrap-typeahead.js bootstrap/js/bootstrap-affix.js > ../js/bootstrap.js

# minimize
bootstrap/node_modules/uglify-js/bin/uglifyjs -nc ../js/bootstrap.js > ../js/bootstrap.min.tmp.js

# make copyright
echo "/**" > ../js/copyright.js
echo "* Bootstrap.js v2.3.2 by @fat & @mdo" >> ../js/copyright.js
echo "* Copyright 2012 Twitter, Inc." >> ../js/copyright.js
echo "* http://www.apache.org/licenses/LICENSE-2.0.txt" >> ../js/copyright.js
echo "*/" >> ../js/copyright.js

# make bootstrap js
cat ../js/copyright.js ../js/bootstrap.min.tmp.js > ../js/bootstrap.min.js
rm ../js/bootstrap.min.tmp.js
rm ../js/copyright.js

#---------------------------
# copy other js from docs
#---------------------------
cp bootstrap/docs/assets/js/html5shiv.js ../js/

#---------------------------
# make application.js
#---------------------------
echo '// -------------------------------' > ../js/application.js
echo '// rootsystem custom js' >> ../js/application.js
echo '// -------------------------------' >> ../js/application.js
echo '!function ($) {' >> ../js/application.js
echo '    $(function(){' >> ../js/application.js
echo '        console.log('application.js loaded');'  >> ../js/application.js
echo '    })' >> ../js/application.js
echo '}(window.jQuery)' >> ../js/application.js

#---------------------------
# copy other resources
#---------------------------
cp bootstrap/img/* ../img/
cp bootstrap/docs/assets/ico/* ../ico/


#---------------------------
# make jquery
#---------------------------
cp  jquery/jquery-1*.js  ../js/jquery.js
cp  jquery/jquery-ui*.js  ../js/jquery-ui.js

bootstrap/node_modules/uglify-js/bin/uglifyjs -nc  ../js/jquery.js > ../js/jquery.min.js
bootstrap/node_modules/uglify-js/bin/uglifyjs -nc  ../js/jquery-ui.js > ../js/jquery-ui.min.js

 

Das Skript ausführen und es kopiert, concateniert, minimiert alle nötigen Dateien in die Unterverzeichnisse von assets/.

Application

Die beiden von mir erzeugten Dateien application.js und application.less müssen noch inkludiert werden.

in assets/less/bootstrap.less als vorletztes einfügen:

// rsys
@import "application.less";

Und application.js eben im HTML wie üblich einbinden.

Erstellt: 07/2013| Geändert: 10/2015

compile.sh

Das kompilieren der less Dateien muss immer wiederholt werden nach Änderungen. Deshalb noch ein zweites Skript, welches nur diese Task ausführt

#!/bin/bash

#---------------------------
# compile css
#---------------------------

# compile css
/usr/local/bin/lessc ../less/bootstrap.less > ../css/bootstrap.css
/usr/local/bin/lessc --yui-compress  ../less/bootstrap.less > ../css/bootstrap.min.css

# compile responsive css
/usr/local/bin/lessc ../less/responsive.less > ../css/bootstrap-responsive.css
/usr/local/bin/lessc --yui-compress  ../less/responsive.less > ../css/bootstrap-responsive.min.css

Shortcut

Dann noch mit pqrs.org/macosx/keyremap4macbook/ ein Applescript, welches das compile script aufruft auf eine Taste legen (z.B. Numpad Taste 9) mit:

<vkopenurldef>
    <name>KeyCode::VK_OPEN_URL_APP_bootstrapcompile</name>
    <url>file:///Users/erwin/Applications/compile_bootstrap.app</url>
</vkopenurldef>
<item>
    <autogen>--KeyToKey-- KeyCode::KEYPAD_9, KeyCode::VK_OPEN_URL_APP_bootstrapcompile</autogen>
</item>

und man kann durch Drücken der Taste die less Dateien compilieren. Das Applescript ist wie folgt:

-- bootstrap compile css
do shell script "/bin/bash  -c  '/Users/.../bootstrap/assets/make/compile.sh'"

Erstellt: 07/2013| Geändert: 10/2015

Less Editoren

Textwrangler

Mit Textwrangler kann man Less Dateien editieren - Syntax Highlighting kann man nachrüsten durch github.com/mcguffin/bbedit-lesscss-language-module- funktioniert auch für Textwrangler.

Die Datei LESS.plist kopieren in ~/Library/Application Support/Text Wrangler/Language Modules/

Eclipse

Über die Update Site www.normalesup.org/~simonet/soft/ow/update/ kann man den Less Editor von Vincent Simonet installieren (http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html). Funktioniert super!

Erstellt: 07/2013| Geändert: 10/2015

HTML Seite

Basis Seite

Ich lege die Seite rsys.html an mit folgendem Inhalt als Basis (HTML5 doctype)

<!DOCTYPE html>
<html>
    <head>
        <!-- meta data -->
        <meta charset="utf-8">
        <title>Rsys Bootstrap Base Template</title>
        <meta name="description" content="">
        <meta name="author" content="">
       
        <!-- set viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <!-- bootstrap css -->
        <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
       
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="assets/js/html5shiv.js"></script>
        <![endif]-->
       
        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
        <link rel="shortcut icon" href="assets/ico/favicon.png">
   
    </head>
    <body>
   
       
        <div class="container">
       
            <!-- Main hero unit for a primary marketing message or call to action -->
            <div class="hero-unit">
                <h1>Rsys Pagetemplate</h1>
                <p>This is a template for a basic page with header, footer and three columns.</p>
                <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
            </div>
           
            <!-- Example row of columns -->
            <div class="row">
                <div class="span4">
                    <h2>Column 1</h2>
                    <p>Some text here</p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
                <div class="span4">
                    <h2>Column 2</h2>
                    <p>Some text here</p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
                <div class="span4">
                    <h2>Column 3</h2>
                    <p>Some text here</p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
            </div>
           
            <hr>
           
            <footer>
                <p>&copy; Rootsystem 2013</p>
            </footer>
           
        </div> <!-- /container -->
       
       
         <!--
         -----------------------------------------------------
         Javascript includes
         Placed at the end of the document so the pages load faster
         -----------------------------------------------------
         -->
         <script src="assets/js/jquery.js"></script>
        <script src="assets/js/bootstrap.js"></script>
    </body>
</html>

Vorlage mit allen Elementen

Aus der Doku (https://github.com/twbs/bootstrap/base-css.html) habe ich alle Elemente zusammenkopiert in eine Seite. Damit kann ich die Änderungen an den less Dateien direkt sehen mit allen möglichen Elementen.


Der Quellcode ist zu lange, deshalb eine Preview unter http://www.typo3-nürnberg.de/fileadmin/static/rsys.html.

Erstellt: 07/2013| Geändert: 10/2015