Laravel Foundation package
UOverride Laravel Auth/Pagination views using Zurb Foundation instead of Twitter Bootstrap., (*1)
1. Installation
To install this package run, (*2)
composer require milose/laravel-foundation
If you are using Laravel version >= 5.5 you can skip the next step., (*3)
Add the service provider to your config/app.php file by finding providers key, and adding this to the end of the list:, (*4)
Milose\LaravelFoundation\LaravelFoundationServiceProvider::class,
2. Using the views
Auth scafolding
In order for Laravel to use the custom views for Authentication, we must import this package traits to the appropriate controllers. These traits override the original methods with updated view names., (*5)
Open all of the files in app/Http/Controllers/Auth, and before every trait add \Milose\LaravelFoundation\Auth\ to override the default view. So, for example, Login controller trait inside the class sould look like:, (*6)
use \Milose\LaravelFoundation\Auth\AuthenticatesUsers;
Instead of:, (*7)
use AuthenticatesUsers;
Do this for all files., (*8)
In your blade files you can paginate as usual, by adding:, (*9)
{{ $users->links('lf::pagination.default') }}
Or if you're using simplePaginate then add:, (*10)
{{ $users->links('lf::pagination.simple') }}
3. Customizing the views
If you want to change how the views look, you need to publish the them to your resources/views/vendor directory by running, (*11)
php artisan vendor:publish --tag=lf
After this, in resources/views/vendor/laravelFoundation you will find Blade templates for both authentication and pagination., (*12)
4. Adding Zurb Foundation to your project
Import npm package and copy settings and utils so you can customize Foundation:, (*13)
yarn add foundation-sites motion-ui --dev
mkdir resources/assets/sass/foundation/
cp node_modules/foundation-sites/scss/settings/_settings.scss resources/assets/sass/foundation/
cp -R node_modules/foundation-sites/scss/util/ resources/assets/sass/foundation/util/
SCSS
In your resources/assets/sass/app.scss file remove:, (*14)
// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
And add:, (*15)
// Foundation
@import 'node_modules/foundation-sites/scss/foundation';
@import "foundation/settings";
@include foundation-everything; //or @include only the components you need
// Motion-Ui
@import 'node_modules/motion-ui/motion-ui'
JavaScript
In your resources/assets/js/bootstrap.js file remove:, (*16)
require('bootstrap-sass');
And add:, (*17)
require('motion-ui')
require('what-input')
require('foundation-sites') // or individual components
$(document).ready(function() {
$(document).foundation()
})
Then run gulp to recompile the assets., (*18)
TODO
Wallogit.com
