Add hostname to bootstrap/start.php
:
'local' => array('homestead', 'Bens-MacBook-Pro.local'),
Install Dotenv
:
"require": {
"vlucas/phpdotenv": "dev-master"
}
Create an .env-sample
and .env
file:
# Database settings
DB_CATALOG=
DB_USER=
DB_PASSWORD=
DB_HOST=
Edit bootstrap/start.php
:
Dotenv::load(dirname(__DIR__));
Dotenv::required([
'DB_HOST',
'DB_CATALOG',
'DB_USER',
'DB_PASSWORD',
]);
Edit app/config/database.php
:
'mysql' => array(
'driver' => 'mysql',
'host' => $_ENV['DB_HOST'],
'database' => $_ENV['DB_CATALOG'],
'username' => $_ENV['DB_USER'],
'password' => $_ENV['DB_PASSWORD'],
'charset' => 'utf8',
'collation' => 'utf8_unicode_ci',
'prefix' => '',
),
Install SCSS support:
"require-dev": {
"panique/laravel-sass": "dev-master"
}
Edit bottom of public/index.php
:
if (App::environment('local'))
{
SassCompiler::run("scss/", "css/");
}
$app->run();
Create public/scss/style.scss
:
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
padding-bottom: 19px;
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
Add bootstrapper
to composer.json
and follow setup instructions and documentation
"require": {
"patricktalmadge/bootstrapper": "dev-develop"
}
Add to app/config/app.php
providers:
'Bootstrapper\BootstrapperServiceProvider',
Add to app/config/app.php
aliases:
'Alert' => 'Bootstrapper\\Alert',
'Accordion' => 'Bootstrapper\\Accordion',
'Badge' => 'Bootstrapper\\Badge',
'Breadcrumb' => 'Bootstrapper\\Breadcrumb',
'Button' => 'Bootstrapper\\Button',
'ButtonGroup' => 'Bootstrapper\\ButtonGroup',
'ButtonToolbar' => 'Bootstrapper\\ButtonToolbar',
'Carousel' => 'Bootstrapper\\Carousel',
'DropdownButton' => 'Bootstrapper\\DropdownButton',
'Form' => 'Bootstrapper\\Form',
'Helpers' => 'Bootstrapper\\Helpers',
'Icon' => 'Bootstrapper\\Icon',
'Image' => 'Bootstrapper\\Image',
'Label' => 'Bootstrapper\\Label',
'MediaObject' => 'Bootstrapper\\MediaObject',
'Modal' => 'Bootstrapper\\Modal',
'Navbar' => 'Bootstrapper\\Navbar',
'Navigation' => 'Bootstrapper\\Navigation',
'Paginator' => 'Bootstrapper\\Paginator',
'Panel' => 'Bootstrapper\\Panel',
'Progress' => 'Bootstrapper\\Progress',
'Tabbable' => 'Bootstrapper\\Tabbable',
'Table' => 'Bootstrapper\\Table',
'Thumbnail' => 'Bootstrapper\\Thumbnail',
'Typography' => 'Bootstrapper\\Typography',
Create a app/views/layout.blade.php
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>PoolIt</title>
<link rel="stylesheet" href="/css/style.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<?php
$links = array(
array('Home', URL::to('')),
);
if(Auth::check())
{
$login = array(
array('My account', URL::route('account-change-password') ),
array('Log out', URL::route('account-sign-out')),
);
$links [] = array('My Fields', URL::to('fields'));
} else {
$login = array(
array('Sign in', URL::route('account-sign-in')),
array('Sign up', URL::route('account-create')),
array('Forgot password?', URL::route('account-forgot-password') ),
);
}
echo Navbar::create()
->with_brand('PoolIt', '/')
->with_menus(
Navigation::links($links)
)
->with_menus(
Navigation::links($login),
array('class' => 'pull-right')
)
->collapsible()
?>
</div>
<div class="">
@if(Session::has('message'))
<p class="alert alert-warning">{{ Session::get('message') }}</p>
@endif
@if(Session::has('error'))
<p class="alert alert-error">{{ Session::get('error') }}</p>
@endif
</div>
@yield('content')
<div class="footer">
<p>© PoolIt 2014</p>
</div>
</div> <!-- /container -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
@yield('footer')
</body>
</html>
Create app/views/home.blade.php
:
@extends('layout')
@section('content')
<div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
@stop