alert-css-generator

https://alert-css-generator.herokuapp.com/

Welcome!

Welcome to a visual development tool for alerts/modals.

How to use this app

1. Clone repo.
2. Install dependencies with npm install and npm update
3. To run, use command npm run start-dev

A History...

I created this because I love the idea of custom alerts, but when it comes to adding alert styling at the end of a project, I tend to end up trimming this plan off the deliverable, due to time restrictions and it just taking a bit too long. So, I decided to make this app to allow customization visually and quickly, while allowing you to add items to the database!

What stack is this?

This is MEJN, using jQuery. Styling for forms, layout and typography with Bootstrap. I also used tinycolor for the palette generation, as well as jQuery UI for draggable and droppable functions.

Current Features

• Modify alert box, alert message (optional) and button content/styles
• Current style options include:
  • background-color
  • color
  • font-family (4 presets and unset)
  • border-width
  • border-color
  • border-radius
  • dimensions (responsive)
  • spacing
• Custom class names
• Output formatted HTML and CSS
• Save your design to the database, titled or anonymous
• See all user alerts that have been saved!
• Steal others designs, the HTML and CSS are saved too! 👀
• Generate colour palettes in either analogous, monochromatic, split compliment or triadic combinations!
• Modify this palette to your liking on the Palette menu
• Once you switch to styling your alert, simply click and drag from the palette at the top to check out your palette in action.

Upcoming Features

in progress

• layout updates/reworks for color palette and forms on mobile

the backburner

• randomly generated names for untitled alerts