https://github.com/morficus/responsive-modal-styles

A series of sample CSS to style modals that behave nicely on a variety of screen sizes
https://github.com/morficus/responsive-modal-styles

Last synced: about 1 month ago
JSON representation

A series of sample CSS to style modals that behave nicely on a variety of screen sizes

• Host: GitHub
• URL: https://github.com/morficus/responsive-modal-styles
• Owner: morficus
• License: mit
• Created: 2014-04-23T02:22:48.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-04-26T03:54:53.000Z (over 10 years ago)
• Last Synced: 2023-03-22T15:08:01.452Z (almost 2 years ago)
• Language: CSS
• Size: 130 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Responsive Modal Styles

=======================

A series of sample CSS to style modals that behave nicely on a variety of screen sizes

Motivations

---

I find most of the modals provided by the CSS frameworks I normally use (most of the time, Bootstrap). Are just not great...and they really suck on mobile devices:  

* some don't adjust to the users screen size

* others can't properly handle lengthy content on a smaller or lower resolution screen

* action buttons aren't always visible

* and the list goes on

So I took it upon my self to fix this issue in as many CSS frameworks as I could.  

This solution promises the following:

* the modal will occupy the optimal amount of screen real estate, regardless of screen size.

* modal controls (close button and footers) will always be accessible, regardless of content length.

* title (or header) will also always be visible (in most cases), regardless of content length.

How To Use

---

Go into the folder named after the CSS framework you are using and grab the "responsive-modal.css" file.  

You can either use the file directly in your project, or copy/paste its content into one of your existing style sheets.  

And then, of course, modify the commented properties (to adjust height and width) to fit your needs.

Missing a framework?

---

Are you using a framework that is not represented in this repo?  

Open an issue to let me know your interested, and I'll make it happen.

Missing a framework?

---

Are you using a framework that is not represented in this repo?  

Open an issue to let me know your interested, and I'll make it happen.

Contributing

---

Looking to add a framework into the mix? Just fork the repo, do your thing and issue a pull request. 

Make sure to take a look at the existing stylesheets and try to match the code formatting as much as possible (just for consistency).