Skip to content
This repository has been archived by the owner on May 27, 2022. It is now read-only.

Commit

Permalink
Flatten assets directory, add custom checkbox, clean up some files (#5)
Browse files Browse the repository at this point in the history
* Update readme

* Upgrade less

* Flatten assets directory

https://twitter.com/taylorotwell/status/1024391862445113344

* Update meta tags

* Inline html and body height fixes

* Remove semicolons

* Use getAttribute

* Remove comments

* Use custom checkbox

* oops

* Remove stupid period

* Use heading instead of div

* Use consistent wording

Use "sign in" instead of "login" (which isn't a verb, anyway), use "sign up" instead of "register."

* Update preview

* Update tailwind.js

* Update minimum framework dependency

* Cleanup mix configuration

* Remove redundant method

laravel/framework#25112

* Cleanup installScripts method

* Lower minimum framework requirement

* Update install message

* Use custom directory checking

* Add height classes to welcome page

* ugh

* Add verify page

* Locale fix

* Update readme

* Don't forget about this file

* Add nova to welcome view

* Update readme.md

* Update readme.md

* Fix Nova link

* Add custom 503 message
  • Loading branch information
zaknesler committed Sep 4, 2018
1 parent 6d75eee commit 735ddb4
Show file tree
Hide file tree
Showing 18 changed files with 162 additions and 143 deletions.
6 changes: 3 additions & 3 deletions preview.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
![Welcome Page](https://user-images.githubusercontent.com/7189795/40496997-244892aa-5f49-11e8-858f-65d970ba446b.png)
![preview of welcome.blade.php](https://user-images.githubusercontent.com/7189795/43691209-15b4d88e-98e7-11e8-8621-97ee8682fbaa.png)

![Login Page](https://user-images.githubusercontent.com/7189795/40496998-24658388-5f49-11e8-96b3-e55876e354a6.png)
![preview of login.blade.php](https://user-images.githubusercontent.com/7189795/43691210-15c172a6-98e7-11e8-93b4-dd608439aef5.png)

![Dashboard](https://user-images.githubusercontent.com/7189795/40496999-24827a74-5f49-11e8-8d8c-b7b6996f4539.png)
![preview of home.blade.php](https://user-images.githubusercontent.com/7189795/43691211-15cb26fc-98e7-11e8-94b5-e2c823a59eee.png)
18 changes: 10 additions & 8 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@
[![Total Downloads](https://poser.pugx.org/zaknesler/tailwind-preset/downloads)](https://packagist.org/packages/zaknesler/tailwind-preset)
[![License](https://poser.pugx.org/zaknesler/tailwind-preset/license)](https://packagist.org/packages/zaknesler/tailwind-preset)

This preset will replace the default Bootstrap scaffolding with a custom Tailwind CSS preset. This preset includes the Vue JavaScript framework, and is compiled using Laravel Mix and PurgeCSS.
This is a Laravel front-end preset for Tailwind CSS. This preset will replace the default Bootstrap scaffolding, including the example Vue.js component. It will also compile the assets using Laravel Mix and PurgeCSS in order to generate the smallest files possible.

[**Demo**](https://preset.zaknesler.com) · [View Screenshots](preview.md)

### Installation

> **Warning**: Installing presets will affect your existing views and assets. Presets should be installed on a fresh installation of Laravel.
> **Warning**: Installing this preset will **overwrite** your existing views and assets, and should only be installed on a fresh installation of Laravel. Please use with caution.
To install, you must first add it as a composer dependency. Laravel will automatically register the service provider for you.
To install this preset, you must first require the composer dependency. Laravel will automatically register the service provider for you.

```
composer require zaknesler/tailwind-preset
```

Next, install either the `tailwind` preset or the `tailwind-auth` preset. The `tailwind-auth` preset includes authentication views, routes, and a controller.
Next, install either the `tailwind` or the `tailwind-auth` preset. The `tailwind-auth` preset includes authentication views, routes, and a controller.

```
php artisan preset tailwind
Expand All @@ -28,19 +28,21 @@ php artisan preset tailwind
php artisan preset tailwind-auth
```

> **Note:** If you install the `tailwind-auth` preset on a version of Laravel that is older than 5.7, you may delete the `views/auth/verify.blade.php` file, as it will not be used.
Install the NPM packages using your favorite package manager.

```
yarn install
yarn // npm install
```

Now just compile the assets using any of the Laravel build scripts (dev, prod, watch).
Now you can compile the assets using any of the Laravel build scripts (dev, prod, watch).

```
yarn run dev
yarn dev // npm run dev
```

Make sure your database is configured and migrated, and you're done. At this point, you are free to remove the composer dependency, as it is no longer needed.
Ensure that your database is properly configured and migrated, and you're done! At this point, you may remove the composer dependency, as it is no longer needed.

```
composer remove zaknesler/tailwind-preset
Expand Down
43 changes: 28 additions & 15 deletions src/Tailwind.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class Tailwind extends Preset
*/
private static function setup()
{
static::ensureComponentDirectoryExists();
static::ensureResourceDirectoriesExist();
static::updatePackages();

static::installScripts();
Expand Down Expand Up @@ -83,7 +83,7 @@ protected static function updatePackageArray(array $packages)
'cross-env' => '^5.2',
'laravel-mix' => '^2.1',
'laravel-mix-purgecss' => '^2.2',
'less' => '^3.0',
'less' => '^3.8',
'less-loader' => '^4.1',
'tailwindcss' => '^0.6',
'vue' => '^2.5',
Expand All @@ -104,19 +104,38 @@ protected static function compileControllerStub()
);
}

/**
* Create any directories that do not exist.
*
* @return void
*/
protected static function ensureResourceDirectoriesExist()
{
if (! file_exists(resource_path('less'))) {
File::makeDirectory(resource_path('less'), 0755, true);
}

if (! file_exists(resource_path('js'))) {
File::makeDirectory(resource_path('js'), 0755, true);
}

if (! file_exists(resource_path('js/components'))) {
File::makeDirectory(resource_path('js/components'), 0755, true);
}
}

/**
* Install all JavaScript files.
*
* @return void
*/
protected static function installScripts()
{
copy(__DIR__.'/stubs/tailwind.stub', base_path('tailwind.js'));
copy(__DIR__.'/stubs/webpack.stub', base_path('webpack.mix.js'));

copy(__DIR__.'/stubs/js/app.stub', resource_path('assets/js/app.js'));
copy(__DIR__.'/stubs/js/bootstrap.stub', resource_path('assets/js/bootstrap.js'));

copy(__DIR__.'/stubs/tailwind.stub', base_path('tailwind.js'));
copy(__DIR__.'/stubs/js/app.stub', resource_path('js/app.js'));
copy(__DIR__.'/stubs/js/bootstrap.stub', resource_path('js/bootstrap.js'));
}

/**
Expand All @@ -126,13 +145,9 @@ protected static function installScripts()
*/
protected static function installStyles()
{
File::deleteDirectory(resource_path('assets/sass'));

if (! file_exists(resource_path('assets/less'))) {
File::makeDirectory(resource_path('assets/less'), 0777, true);
}
File::deleteDirectory(resource_path('sass'));

copy(__DIR__.'/stubs/less/app.stub', resource_path('assets/less/app.less'));
copy(__DIR__.'/stubs/less/app.stub', resource_path('less/app.less'));
}

/**
Expand All @@ -142,11 +157,9 @@ protected static function installStyles()
*/
protected static function updateExampleComponent()
{
File::cleanDirectory(resource_path('assets/js/components'));

copy(
__DIR__.'/stubs/js/components/ExampleComponent.stub',
resource_path('assets/js/components/ExampleComponent.vue')
resource_path('js/components/ExampleComponent.vue')
);
}
}
2 changes: 1 addition & 1 deletion src/TailwindServiceProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,6 @@ public function boot()
protected function installMessage($command)
{
$command->info('Tailwind scaffolding installed successfully.');
$command->comment('Please run "npm install && npm run dev" to compile your fresh scaffolding.');
$command->comment('Please run "yarn && yarn dev" to compile your fresh scaffolding.');
}
}
10 changes: 5 additions & 5 deletions src/stubs/js/app.stub
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import './bootstrap';
import './bootstrap'

import ExampleComponent from './components/ExampleComponent.vue';
import ExampleComponent from './components/ExampleComponent.vue'

Vue.component('example-component', ExampleComponent);
Vue.component('example-component', ExampleComponent)

const app = new Vue({
el: '#app',
Expand All @@ -13,7 +13,7 @@ const app = new Vue({

methods: {
logout() {
this.$refs.logoutForm.submit();
this.$refs.logoutForm.submit()
}
}
});
})
14 changes: 7 additions & 7 deletions src/stubs/js/bootstrap.stub
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Vue from 'vue';
import axios from 'axios';
import Vue from 'vue'
import axios from 'axios'

window.Vue = Vue;
window.axios = axios;
window.Vue = Vue
window.axios = axios

axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};
}
95 changes: 30 additions & 65 deletions src/stubs/less/app.stub
Original file line number Diff line number Diff line change
@@ -1,74 +1,39 @@
/**
* This injects Tailwind's base styles, which is a combination of
* Normalize.css and some additional base styles.
*
* You can see the styles here:
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*
* If using `postcss-import`, use this import instead:
*
* @import "tailwindcss/preflight";
*/
@tailwind preflight;

/**
* This injects any component classes registered by plugins.
*
* If using `postcss-import`, use this import instead:
*
* @import "tailwindcss/components";
*/
@tailwind components;
@tailwind utilities;

/**
* Here you would add any of your custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities could still
* override them.
*
* Example:
*
* .btn { ... }
* .form-input { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @import "components/buttons";
* @import "components/forms";
*/
[v-cloak] {
@apply .hidden;
}

/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*
* If using `postcss-import`, use this import instead:
*
* @import "tailwindcss/utilities";
*/
@tailwind utilities;
input[type=checkbox] {
@apply .relative .border .bg-grey-lighter .rounded-sm .outline-none .appearance-none .cursor-pointer .overflow-hidden .w-4 .h-4;

/**
* Here you would add any custom utilities you need that don't come out of the
* box with Tailwind.
*
* Example:
*
* .bg-pattern-graph-paper { ... }
* .skew-45 { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @import "utilities/background-patterns";
* @import "utilities/skew-transforms";
*/
transition: background 100ms ease-in-out;

html {
@apply .h-full;
}
&:focus,
&:active,
&:checked {
@apply .border-blue;
}

body {
@apply .min-h-full .h-full;
}
&::after {
@apply .block .absolute .opacity-0;

[v-cloak] {
@apply .hidden;
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M0 11l2-2 5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E");
width: calc(100% - 4px);
height: calc(100% - 4px);
top: 2px;
left: 2px;
transition: opacity 100ms ease-in-out;
}

&:checked {
@apply .bg-blue;

&::after {
@apply .opacity-100;
}
}
}
9 changes: 5 additions & 4 deletions src/stubs/tailwind.stub
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,7 @@ module.exports = {
shadows: ['responsive', 'hover', 'focus'],
svgFill: [],
svgStroke: [],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColors: ['responsive', 'hover', 'focus'],
textSizes: ['responsive'],
Expand Down Expand Up @@ -926,10 +927,10 @@ module.exports = {
*/

plugins: [
// require('./plugins/container')({
// // center: true,
// // padding: '1rem',
// }),
require('tailwindcss/plugins/container')({
// center: true,
// padding: '1rem',
}),
],


Expand Down
6 changes: 3 additions & 3 deletions src/stubs/views/auth/auth/login.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@extends('layouts/base')

@section('title', 'Login')
@section('title', 'Sign in')

@section('show-header', false)

Expand Down Expand Up @@ -57,11 +57,11 @@
</div>

<div class="block mb-8">
<input class="appearance-none w-full border-0 bg-blue hover:bg-blue-dark text-white rounded cursor-pointer p-3" type="submit" value="Login" />
<input class="appearance-none w-full border-0 bg-blue hover:bg-blue-dark text-white rounded cursor-pointer p-3" type="submit" value="Sign in" />
</div>

<div class="text-center text-sm text-grey-dark">
Don't have an account? <a class="font-semibold text-grey-darker no-underline hover:underline" href="{{ route('register') }}">Sign up</a>.
Don't have an account? <a class="font-semibold text-grey-darker no-underline hover:underline" href="{{ route('register') }}">Sign up</a>
</div>
</form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/stubs/views/auth/auth/passwords/email.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
</div>

<div class="text-center text-sm text-grey-dark">
Remember it? <a class="font-semibold text-grey-darker no-underline hover:underline" href="{{ route('login') }}">Sign in</a>.
Remember it? <a class="font-semibold text-grey-darker no-underline hover:underline" href="{{ route('login') }}">Sign in</a>
</div>
</form>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/stubs/views/auth/auth/register.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@extends('layouts/base')

@section('title', 'Register')
@section('title', 'Sign up')

@section('show-header', false)

Expand Down Expand Up @@ -77,11 +77,11 @@
</div>

<div class="block mb-8">
<input class="appearance-none w-full border-0 bg-blue hover:bg-blue-dark text-white rounded cursor-pointer p-3" type="submit" value="Register" />
<input class="appearance-none w-full border-0 bg-blue hover:bg-blue-dark text-white rounded cursor-pointer p-3" type="submit" value="Sign up" />
</div>

<div class="text-center text-sm text-grey-dark">
Have an account? <a class="font-semibold text-grey-darker no-underline hover:underline" href="{{ route('login') }}">Sign in</a>.
Have an account? <a class="font-semibold text-grey-darker no-underline hover:underline" href="{{ route('login') }}">Sign in</a>
</div>
</form>
</div>
Expand Down
Loading

0 comments on commit 735ddb4

Please sign in to comment.