Quickstart: Bootstrap

Impress your friends when you show them a page that looks fantastic across any and all devices and screens! Start the timer! You’ll be a maker of responsive pages in 15 minutes!

1. Get Bootstrap & jQuery

For Bootstrap, you can either download it and include it or use the code below to pull it from Bootstrap’s CDN buddy, MaxCDN.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Same story with jQuery. You can use Google’s hosted library or download your own copy. Here is the Google option:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Create an HTML grid layout

Your page must use the HTML5 doctype so make sure it uses the same doctype listed below.

<!DOCTYPE html>
<html>
... jQuery/Bootstrap scripts/css from above...
<body>
<!-- responsive layout -->
</body>
</html>

Responsive frameworks usually work within some sort of grid. For Bootstrap, your layout is separated into 12 %-based columns equaling 100% of the container. You can divvy up your content however you see fit within those columns via the different column css classes.

There are 3 main column classes. There is .col-sm-n for 768px and up, .col.md-n for 992px and up, and .col.lg-n for 1200px and up. Keep in mind, in the class names above, n is the number of columns. So .col-sm-3, .col-md-8, .col-lg-4 are all valid examples.

You can apply multiple column classes to get different layouts based on the width of the screen. To use the same layout across the board, you would use one of the lowest column classes, .col-sm-n.

For example, if you want your layout to have a left nav that takes up 3 columns and the rest of the content to take the remaining 9 columns. 9 + 3 = 12.

<div class="container">
<div class="row">
<div class="col-sm-3">Left Content</div>
<div class="col-sm-9">Right Content</div>
</div>
</div>

If you want the left content and right content to both take up the width of the screen that is 992px or less (.col-sm-n), but maintain the 3 and 9 column layout for anything above (.col-md-n and .col-lg-n).

<div class="container">
<div class="row">
<div class="col-md-3">Left Content</div>
<div class="col-md-9">Right Content</div>
</div>
</div>

Quickstart: Laravel 4

Your mileage may vary with this particular quickstart depending on your host. I am using hostmonster, a fairly poor choice for current web development trends, but we aren’t exactly creating the next InstaBookSpaceGramChat here.

1. Download Composer

In SSH, navigate to  the root of your project folder and run the following to download Composer.

curl -sS https://getcomposer.org/installer | php

2. Create your Laravel project

Before you go all copy-pasta crazy down below, make sure to replace your-project-name with whatever it is you are making.

By default, the command to install Laravel project is:

composer create-project laravel/laravel your-project-name --prefer-dist

For my particular environment, I needed to add php and change composer to composer.phar. Again, this is more than likely due to my shared server environment. The updated command looked something like this:

php composer.phar create-project laravel/laravel your-project-name --prefer-dist

Update 09/10/14: For Dreamhost servers, I ended up installing Composer in ~/bin so my Composer command ended up being php ~/bin/composer.phar. I solved this mess by creating an alias via alias composer='php ~/bin/composer.phar'. This allowed me to run composer all over the place.

3. Make /public directory work properly

At this point, your Laravel app is ready to go. Unfortunately, by default, everything needs to be accessed via /public. So if http://www.instabookspacegramchat.com is pointing to your new Laravel project directory, you would need to go to http://www.instabookspacegramchat.com/public to see your new project at work.

This, to me, is a horrible flaw with the base Laravel install. To get around it you can either a) set your document root to /public for your domain or b) create an .htaccess file in your project root.

For option b, I used the following in my newly created .htaccess file:

RewriteEngine on
RewriteCond %{REQUEST_URI} !^public
RewriteRule ^(.*)$ public/$1 [L]

4. Create a view and route

If you open up your /app/routes.php file, you’ll see that your default route is being handled by the hello view. The hello view lives in /app/views as hello.php.

To create a view and route to call your very own, you’ll need to go back to your /app/routes.php file and add the following:

Route::get('/foo', function()
{
return View::make('foo');
});

The parameter of View::make() refers to the view. In our case, foo refers to /app/views/foo.php

Keep in mind this is one of the more basic methods of creating a route.  In your later Laravel travels, your route-fu will be much stronger.

Next we need to make our foo view. Save & close your routes.php and create /app/views/foo.php. Throw whatever HTML you want to in this new view and hop on over to http://[url]/foo.

5. Next Steps

  • Creating Blade templates
  • Advanced routing
  • Creating controllers
  • Creating models

Quickstart: Ember.js

Need to dive into the MVC Javascript web application framework known as Ember.js and only have 10 minutes? Look no more!

The following is all done in the same page. In my case, it is index.html.

1. Get Ember.js, Handlebars.js and jQuery


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com/tags/v1.3.0/ember.js"></script>

2. Start your application

In this case myApp is our application. myApp can be changed to whatever you want. Just be sure to keep it in mind to reference later.

<script type="text/javascript">
window.myApp = Ember.Application.create();
</script>

3. Setup a route or two

<script type="text/javascript">
myApp.Router.map(function() {
this.resource('index', { path: '/' });
this.resource('about', { path: 'about' });
});
</script>

The first parameter of this.resource() corresponds to a <script type="text/x-handlebars"> element with a matching data-template-name attribute.

For example:

this.resource('foo', { path: '/foo-page' });

refers to:

<script type="text/x-handlerbars" data-template-name="foo">
<p>some html...</p>
</script>

and would be accessed by http://[your url]/foo-page.

4. Make your views

<html>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h1>Index Page</h1>
<p>{{#link-to 'about'}}about{{/link-to}}</p>
</script>


<script type="text/x-handlebars" data-template-name="about">
<h1>About Page</h1>
<p>{{#link-to 'index'}}home{{/link-to}}</p>
</script>
</body>
</html>

View the final product here.

5. Next Steps

  • Exploring Handlebars
  • Data Binding/Modeling