Mar 11, 2013
Explain it
“If you can’t explain it simply, you don’t understand it well enough.”
Quote from Albert Einstein.
Dec 18, 2012
Extend & customize Bootstrap
If the words 'Bootstrap' & 'LESS' are familiar to you then feel free to stick around for a few minutes.
During 2012 I did a talk about Bootstrap & LESS at various conferences including Joomladay NL, Joomladay DE and Nooku Jam 12.2. Focus of the talk was to teach people how to extend and customize Bootstrap.
Separate custom stylesheet
Often I see websites loading a separate stylesheet (see custom.css in the example below) to override the default Bootstrap stylesheets from the outside.
link href="css/bootstrap.min.css" rel="stylesheet" link href="css/bootstrap-responsive.min.css" rel="stylesheet" link href="css/custom.css" rel="stylesheet"
Let me bring you up to speed how to extend and customize Bootstrap without a separate stylesheet.
Bootstrap + LESS
Bootstrap is made with LESS at its core, a dynamic stylesheet language. It makes developing systems-based CSS faster, easier, and more fun.
Instead of downloading the pre-compiled Bootstrap stylesheets download the LESS source files of Bootstrap from github.com/twitter/bootstrap and put them into your template.
For example, you might have something like this:
template/
css/
bootstrap.css (compiled from bootstrap.less)
responsive.css (compiled from responsive.less)
img/
glyphicons-halflings.png
glyphicons-halflings-white.png
js/
bootstrap.js
less/
bootstrap.less
responsive.less
...
index.html
Compile Bootstrap
Since the Bootstrap source files are written with LESS and utilizes variables and mixins, they need to be compiled for final production implementation.
One of the many tools available to compile .less into ordinary .css is CodeKit. It watches directories of .less files and compiles the code to .css files after every save. You can even toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
Simply add the /less/ folder to CodeKit (or any other tool) and set the output path for bootstrap.less and responsive.less to the /css/ folder
Grab a drink, you are now compiling your own Bootstrap stylesheets.
Extend Bootstrap
Extending Bootstrap is even more simple, just add a custom .less file (_custom.less) to the /less/ folder.
For example, you might have something like this:
template/
css/
bootstrap.css (compiled from bootstrap.less)
responsive.css (compiled from responsive.less)
img/
glyphicons-halflings.png
glyphicons-halflings-white.png
js/
bootstrap.js
less/
_custom.less
bootstrap.less
responsive.less
...
index.html
Last step is to add the _custom.less file at the bottom of bootstrap.less.
@import "_custom.less";
As of this point you can use the custom file (_custom.less) to:
- add custom LESS or CSS code
- override Bootstrap variables
- use the mixins provided by Bootstrap
- use all the awesome LESS features including variables, mixins, nested rules, colour functions, …
Enjoy the power of Bootstrap, the way it is meant!
Oct 7, 2012
Set open minds on fire
“Do not try to satisfy your vanity by teaching a great many things. Awaken people’s curiosity. It is enough to open minds; do not overload them. Put there just a spark. If there is some good inflammable stuff, it will catch fire.”
Quote from Anatole France.
Jun 1, 2012
Going mobile, take 1
Do you know what happens when you take the following tools and shake them together on a sunny sunday afternoon?
You get a little mobile app, installed on your iOS device, that parses JSON data into a touchable UI.
This post is an overview of all the resources I used to built my first mobile app a few weeks ago.
1. Install Nooku Server
For my mobile app I used the JSON output of Nooku Server (see step 4), therefor I published a Nooku Server powered site.
Nooku Server allows you to retrieve any view as JSON data, you don't need to do anything special. You only need to add the output format as 'format=json' to the URL, see:
http://foobar.com?format=json
2. Install Xcode
Xcode is Apple’s powerful integrated development environment for creating great apps for Mac, iPhone, and iPad. Xcode includes the Instruments analysis tool, iOS Simulator, and the latest Mac OS X and iOS SDKs.
Download Xcode from the App Store.
3. Install PhoneGap
PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.
To get started, follow the Installation guide and "PhoneGap Ajax Sample" tutorial.
This tutorial is meant for fledgling developers who are unwise to the wild world of the mobile web and have little to some experience in JavaScript, HTML and CSS.
By the end of this tutorial you will be able to make AJAX calls within PhoneGap to the Twitter API services and render the response being returned.
Since the tutorial is referencing to an external host (twitter.com), you need to add this host in PhoneGap.plist under the “ExternalHosts” key. If you open the plist file in Xcode, you won’t need to fiddle with the XML syntax.
4. Install Sencha Touch
Sencha Touch is the leading mobile web app framework based on HTML5 for amazing mobile apps. By following the installation guide you will be up and running easily.
Make sure to generate your Sencha Touch skeleton inside the “www” folder of your PhoneGap project.
Afterwards, follow the "First app" tutorial and modify the sample code to use your own JSON streams.
5. Join Apple iOS Developer Program (optional)
To test and debug your code on iPad, iPhone and iPod touch you need to join the iOS Developer Program.
After you signed up you need to add your device to the Provisioning Portal. Help information about this process can be found in the Apple Developer Member Center.
6. Sign Up for TestFlight (optional)
TestFlight is a web service for mobile developers, project managers, and app testers.
It allows you to distribute your application to other people, so called 'app testers'. These people do not need an iOS Developer Program.
Jul 5, 2011
Gmail’s new look, only one thing missing
Last week Google announced a preview of Gmail’s new look. Only one thing missing for me: CSS3 Flexible Box Model (aka Flexbox) power for people not using Chrome.
People who attended my presentation together with Stian Didriksen about How to Build Native Web Apps with HTML5 & CSS3 at J and Beyond on friday 6 May 2011 will probably already know about my preference for the amazing power of Flexbox. Since J! and Beyond we also added Flexbox power to Nooku Server Alpha3.
Last weekend I started a new little weekend project with a simple goal: add Flexbox power to Gmail’s new look as proof-of-concept. On sunday evening I finished the first version of a Flexbox powered Gmail.
A little feature list:
- Flexbox for the layout (no CSS float properties used);
- Rounded corners, gradients, shadows using CSS3 (no images used);
- Custom scrollbars for Webkit powered browsers
- LESS: The Dynamic Stylesheet language
Make sure to check the demo for a sneak peek or source code on GitHub.
May 31, 2010
Nooku Community Contributors at JAB 2010
Nooku Community Contributors at J and Beyond 2010.
Mathias Verraes, David Deutsch, Tom Janssens, Johan Janssens, Gergő Erdősi, Stian Didriksen, Torkil S. Johnsen.