Skip to content

Instantly share code, notes, and snippets.

@benallfree
Last active August 29, 2015 14:05
Show Gist options
  • Save benallfree/f5494251f4f2a294fee2 to your computer and use it in GitHub Desktop.
Save benallfree/f5494251f4f2a294fee2 to your computer and use it in GitHub Desktop.
Initial Laravel setup

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>&copy; 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment