CSS Transitions

Super cool and super easy

Two States

Transitions calculate all points between a beginning and end.

Transition Properties

  • transition-property

  • transition-duration

  • transition-timing-function

  • transition-delay

Shorthand

transition: 1s ease all;

Setup

HTML and CSS

Features

  • Authenticate users
  • Let users pay to subscribe
  • Charge monthly recurring
  • Multiple tiers of membership
  • Only show content to subscribers 
  • Let users change their subscription

Database 

Migrations

Database 

Model Factories

Database 

Seeding

Routing

  • Site
  • Auth
  • Subscribe
  • Account

Blade Templating

Cashier

Account

Setup

Account

Changing Subscriptions

Account

Cancelling Subscriptions

Account

Re-Subscribing

Getting Started

  • Node and npm
  • npm install -g gulp-cli
  • gulpfile.js

Using Gulp

  • gulp.task()
  • gulp.src()
  • gulp.dest()
  • gulp.watch()

A CSS Task

A JS Task

Auto-Loading Plugins

Watching for File Changes

Reloading the Browser

Database Migrations

users

  • name
  • email
  • avatar
  • username
  • password
  • role

posts

  • user_id
  • title
  • slug
  • image
  • content
  • status
  • published_at

Model Factories

Create sample data quickly.

Seeding Our Database

Fill our database with sample data.

Routing Our App

Top down overview.

 

  • Home Page
  • Single Page
  • Contact Page

Assets

CSS and JS for our application.

 

  • Using gulp and Laravel Elixir
  • Using Sass
  • Using jQuery
  • Using Bootstrap

Styling the Site

Styling Post Components

Blade Layouts

Simple and extendable views.

Contact Page

  • Showing a Form
  • Processing a form
  • Sending an email

Authentication

  • Built-in Laravel authentication
  • Creating login/register views

Profile Pages

  • View a user profile
  • Let a user edit their own profile

Admin Dashboard

  • Only admins can access
  • CRUD posts
  • New Dashboard namespace

Dashboard Routes

  • Home page
  • Posts resource controller

List All Posts

Create a Post

Edit a Post

Delete a Post

Authenticating the Dashboard

Only admins can access.

Dashboard Links

Only admins can see.

CSS Transitions

By Chris Sevilleja

CSS Transitions

  • 1,121