Skip to content
This repository was archived by the owner on Sep 18, 2020. It is now read-only.

Commit bed33f6

Browse files
mattfletchermattfletcher
committed
WIP
1 parent 8342a24 commit bed33f6

File tree

3 files changed

+79
-97
lines changed

3 files changed

+79
-97
lines changed

‎README.md

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,67 +2,64 @@
22

33
![](https://torrix.uk/laravel-ui-uikit.jpg)
44

5-
**THIS README IS A WORK IN PROGRESS AND IS NOT YET COMPLETE**
6-
75
Out of the box, Laravel ships with a [UI preset](https://github.com/laravel/ui) for [Bootstrap](https://getbootstrap.com/) and [Vue](https://vuejs.org/) to make getting your website front-end up and running simple.
86

9-
Whilst Bootstrap is a very popular front-end framework, with lots of fans, I much prefer a framework called [UIkit](https://getuikit.com/) myself. It's modern, clean, well-thought-out, and modular. It's my go-to framework now for websites and web applications, from tiny single-page landing sites, to massive web applications with thousands of users.
7+
Whilst Bootstrap is a very popular front-end framework, with lots of fans, I much prefer a framework made by [YOOtheme](https://yootheme.com/) called **[UIkit](https://getuikit.com/)** myself. It's modern, clean, well-thought-out, and modular. It's my go-to framework now for websites and web applications, from tiny single-page landing sites, to massive web applications with thousands of users.
108

119
This repository contains my alternative to the stock preset that [Laravel UI](https://github.com/laravel/ui) provides.
1210

1311
## Getting Started
1412

1513
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
1614

17-
### TODO: Prerequisites
15+
### Prerequisites
1816

19-
To begin, you'll need a fresh install of Laravel 6. Something like the following will get you up and running on an Ubuntu-based development machine:
17+
To begin, you'll need a fresh install of Laravel 6. This in turn needs Composer, which for convenience is best installed globally. Something like the following will get you up and running:
2018

2119
```
22-
Give examples
20+
composer global require laravel/installer
21+
22+
laravel new mysite
23+
24+
php artisan serve
2325
```
2426

25-
### TODO: Installing
27+
Your development site will be served at http://localhost:8000. If you have problems getting this far, refer to the [Laravel installation docs](https://laravel.com/docs/6.x/installation).
2628

27-
A step by step series of examples that tell you how to get a development env running
29+
### Installing this preset
2830

29-
Say what the step will be
31+
To turn a stock bootstrap-based install into a UIkit skeleton site, follow the steps below.
32+
33+
1. Include this repository into your composer dependencies:
3034

3135
```
32-
Give the example
36+
composer require torrix/laravel-ui-uikit dev-master
3337
```
3438

35-
And repeat
39+
2. Run the artisan command to install the preset into your Laravel install. It will ask you if you'd like to overwite welcome.blade.php. As long as you haven't started changing your blade files, this is fine to proceed with:
3640

3741
```
38-
until finished
42+
php artisan ui vue --auth
3943
```
4044

41-
End with an example of getting some data out of the system or using it for a little demo
42-
43-
## TODO: Running the tests
44-
45-
Explain how to run the automated tests for this system
46-
47-
### Break down into end to end tests
48-
49-
Explain what these tests test and why
45+
3. Finally, run NPM to download UIkit, and build your assets using Laravel Mix:
5046

5147
```
52-
Give an example
48+
npm install && npm run dev
5349
```
5450

55-
### And coding style tests
56-
57-
Explain what these tests test and why
51+
4. (optional) Whilst developing your site, running Mix in watch mode makes it easy to make changes and quickly see their results:
5852

5953
```
60-
Give an example
54+
npm run watch
6155
```
6256

63-
## TODO: Deployment
57+
## Deployment
6458

65-
Add additional notes about how to deploy this on a live system
59+
When deploying to a live server, ensure to build your assets in production mode for smaller, faster downloads:
60+
```
61+
npm run prod
62+
```
6663

6764
## Built With
6865

@@ -72,7 +69,7 @@ Add additional notes about how to deploy this on a live system
7269

7370
## Contributing
7471

75-
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
72+
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
7673

7774
## Versioning
7875

‎src/Auth/uikit-stubs/auth/passwords/reset.blade.php

Lines changed: 51 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,58 @@
11
@extends('layouts.app')
22

33
@section('content')
4-
<div class="container">
5-
<div class="row justify-content-center">
6-
<div class="col-md-8">
7-
<div class="card">
8-
<div class="card-header">{{ __('Reset Password') }}</div>
9-
10-
<div class="card-body">
11-
<form method="POST" action="{{ route('password.update') }}">
12-
@csrf
13-
14-
<input type="hidden" name="token" value="{{ $token }}">
15-
16-
<div class="form-group row">
17-
<label for="email"
18-
class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
19-
20-
<div class="col-md-6">
21-
<input id="email" type="email"
22-
class="form-control @error('email') is-invalid @enderror" name="email"
23-
value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
24-
25-
@error('email')
26-
<span class="invalid-feedback" role="alert">
27-
<strong>{{ $message }}</strong>
28-
</span>
29-
@enderror
30-
</div>
31-
</div>
32-
33-
<div class="form-group row">
34-
<label for="password"
35-
class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
36-
37-
<div class="col-md-6">
38-
<input id="password" type="password"
39-
class="form-control @error('password') is-invalid @enderror" name="password"
40-
required autocomplete="new-password">
41-
42-
@error('password')
43-
<span class="invalid-feedback" role="alert">
44-
<strong>{{ $message }}</strong>
45-
</span>
46-
@enderror
47-
</div>
48-
</div>
49-
50-
<div class="form-group row">
51-
<label for="password-confirm"
52-
class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
53-
54-
<div class="col-md-6">
55-
<input id="password-confirm" type="password" class="form-control"
56-
name="password_confirmation" required autocomplete="new-password">
57-
</div>
58-
</div>
59-
60-
<div class="form-group row mb-0">
61-
<div class="col-md-6 offset-md-4">
62-
<button type="submit" class="btn btn-primary">
63-
{{ __('Reset Password') }}
64-
</button>
65-
</div>
66-
</div>
67-
</form>
4+
<div class="uk-section uk-section-small uk-section-muted uk-flex uk-flex-center">
5+
<div class="uk-card uk-card-default uk-card-body uk-width-large">
6+
<h2 class="uk-card-title">Reset Password</h2>
7+
<form method="POST" action="{{ route('password.update') }}" class="uk-form-stacked">
8+
@csrf
9+
<input type="hidden" name="token" value="{{ $token }}">
10+
<div class="uk-margin">
11+
<label for="email" class="uk-form-label">
12+
{{ __('E-Mail Address') }}
13+
</label>
14+
<div class="uk-form-control">
15+
<input class="uk-input @error('email') uk-form-danger @enderror" id="email" name="email" type="email"
16+
value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
17+
@error('email')
18+
<span class="uk-text-danger">{{ $message }}</span>
19+
@enderror
20+
</div>
21+
</div>
22+
<div class="uk-margin">
23+
<label for="password" class="uk-form-label">
24+
{{ __('Password') }}
25+
</label>
26+
<div class="uk-form-control">
27+
<input id="password" type="password"
28+
class="uk-input @error('password') uk-form-danger @enderror" name="password" required
29+
autocomplete="new-password">
30+
@error('password')
31+
<span class="uk-text-danger">{{ $message }}</span>
32+
@enderror
33+
</div>
34+
</div>
35+
<div class="uk-margin">
36+
<label for="password_confirmation" class="uk-form-label">
37+
{{ __('Confirm Password') }}
38+
</label>
39+
<div class="uk-form-control">
40+
<input id="password_confirmation" type="password"
41+
class="uk-input @error('password') uk-form-danger @enderror" name="password_confirmation" required
42+
autocomplete="new-password">
43+
@error('password_confirmation')
44+
<span class="uk-text-danger">{{ $message }}</span>
45+
@enderror
46+
</div>
47+
</div>
48+
<div class="uk-margin">
49+
<div class="uk-form-control">
50+
<button type="submit" class="uk-button uk-button-primary">
51+
{{ __('Reset Password') }}
52+
</button>
6853
</div>
6954
</div>
70-
</div>
55+
</form>
7156
</div>
7257
</div>
73-
@endsection
58+
@endsection

‎src/Auth/uikit-stubs/welcome.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
@section('content')
44
<div class="uk-section uk-section-small uk-section-muted">
55
<div class="uk-container">
6-
<h1 class="uk-heading-medium uk-heading-divider">UIkit frontend preset for Laravel</h1>
6+
<h1 class="uk-heading-divider">UIkit frontend UI preset for Laravel</h1>
77
<p>
88
Congratulations, you've successfuly installed the UIkit preset for
99
Laravel. Have a browse through the links below for inspiration on
1010
how to work with Laravel, UIkit, and Vue.js. Happy coding!
1111
</p>
12-
<div class="uk-grid" data-uk-grid>
12+
<div class="uk-grid" data-uk-grid data-uk-height-match="target:.uk-card">
1313
<div class="uk-width-1-3@l">
1414
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
1515
<h3 class="uk-card-title">Laravel</h3>

0 commit comments

Comments
 (0)