Skip to content

Instantly share code, notes, and snippets.

View RedHatter's full-sized avatar

Ava Johnson RedHatter

View GitHub Profile
@una
una / color-functions.md
Last active March 11, 2020 13:15
CSS Color Functions

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

  • Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
  • Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
  • Uniformity among transformations between components with different primary colors

Proposal

@denniske
denniske / custom-solution.dart
Last active May 30, 2021 09:48
Flutter Modal bottom sheet will not overlap keyboard (Fixed)
import 'package:flutter/material.dart';
class CustomPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(