jayholtslander / materialize-fixes Goto Github PK

There's a lot of stuff in Materialize that doesn't quite work right. I've found myself fixing those things repeatedly for different projects. I'm not doing that anymore. (DRY) This repo contains a hosted css file that contains my common fixes for Materialize. Easy to import into a project now and immediately fix many annoyances.

Out of the box Materialize aligns buttons poorly verticaly. This fix centers them properly.

Half of Materialize's documented helper classes don't work. They're just MIA. This fix restores them.

Prevents odd size discepancy between mobile and tablet.

A paragraph needs spacing after it so that two paragraphs don't blend together and look like one. This fixes that.

Make Material icons behave in an expected fashion like Font Awesome icons do.

Demo: https://codepen.io/j_holtslander/pen/prEXEa

Apple's iPhone X has a "notch" to make space for a camera and other various components. The result is some awkward situations for screen design. This code allows for Materialize to display well on the iPhone X.

Demo: https://css-tricks.com/the-notch-and-css/

Small tweak that will allow for other content to be included with a fixed navbar and be fixed as expected.

Demo: https://codepen.io/j_holtslander/pen/XoPJNv

If the class .avatar exists with a .collection-item then the min-height for the .collection-item is 84px even if there is only 1-2 lines. This results in extraneous padding on the bottom of the item. By changing the min-height to 64px the .collection-item has proper spacing.

Demo: https://codepen.io/j_holtslander/pen/OrPQJL?editors=1100

Prevents circular or oval appearance for colored buttons within the expanded toolbar.

Demo: https://codepen.io/j_holtslander/pen/wRqGRv

Better handling of images within cards

Demo: https://codepen.io/j_holtslander/pen/KbXyrq

Self explanatory.

Demo: https://stackoverflow.com/a/42890059/751570

Inclusion of the required css for sticky footer implementation.

Demo: https://materializecss.com/footer.html

Similiar to a fixed header but for a fixed footer.

Gradient overlays for card images that appear underneath card-titles.

Demo: https://codepen.io/j_holtslander/pen/ejZrqG

Tweak to allow for the usage of flow-text within a card-title

Position a title offscreen to hide it while not removing it. Usually for SEO reasons.

When a .collection is within a .card on mobile, it should be the full width of the card. This fix makes it so.

A dark sidebar option.

Demo: https://codepen.io/j_holtslander/pen/oqGWYJ

Utility class for escaping out of an existing container.

Want to use Font awesome icons within Materialize? Now you can.

Demo: https://codepen.io/j_holtslander/pen/JybxXy

1. Save the compiled css file into your project and load it within the head of your document. (Recommended)

<link rel="stylesheet" type="text/css" href="css/fixes.css">

2. Download the Sass version to include in your project's build (Advanced)
3. Link to it from within the head of your document

<link rel="stylesheet" type="text/css" href="https://jayholtslander.github.io/materialize-fixes/fixes.css">

4. Import within your stylesheet (Not recommended)

@import url("https://jayholtslander.github.io/materialize-fixes/fixes.css");

• Add the URL https://codepen.io/j_holtslander/pen/BvOQEa to your Pen's CSS under it's settings window.

Screenshot