Notes CSS part 2

https://github.com/FrontendMasters/front-end-handbook-2018/blob/master/learning/html-css.md

Use calc() right
https://codepen.io/nicolasjengler/post/don-t-misuse-the-calc-css-function

What is flexbox ?
https://flexbox.io/

Table to Div from Hell to Hell
https://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/

Do some research on how to write HTML, CSS faster, more productive and less maintenance cost.
https://www.quora.com/How-can-I-code-CSS-faster

Agreed that wrong, improper HTML (often from customer, Frontend team) that lead to extra work to reinforcement,working around, tricky or hacky way of coding.
And although agreed that most of CSS by the time is not needed but rarely we remove this because of aware that something removed may be used somewhere else. Especial with handover project.
React require we write/rewrite everything, so it may be very effective in this case to tackle problems.

Calc rounding number

https://stackoverflow.com/questions/25938915/css-calc-rounding

https://softwareengineering.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs

Complex media query but seem reliable work, many technique and explain. It look simple logic condition but other developers (ie. Backend) dare/afraid jump to it.
https://css-tricks.com/approaches-media-queries-sass/
May be used for iPad detect since it have many retina/dpi filter.
https://raw.githubusercontent.com/eduardoboucas/include-media/master/dist/_include-media.scss

Some mixin functions. May be add more from past project that useful.
https://engageinteractive.co.uk/blog/top-10-scss-mixins

https://en.wikipedia.org/wiki/Analysis_paralysis

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Test scss pick device range (currently not work, some variable string error NG 6)
/**
*
* Testing
*
**/

.lionheart-pc, .lionheart-mobi {
    @include media("<=phone") {
        background-color: #def;

        &:before {
            content: "<=phone";
        }
    }

    @include media(">phone") {
        background-color: #abc;

        &:before {
            content: ">phone";
        }
    }

    @include media(">=815px", "<desktop") {
        background-color: #fed;

        &:before {
            content: ">=815px, <desktop";
        }
    }

    @include media(">=desktop") {
        background-color: #fab;

        &:before {
            content: ">=desktop";
        }
    }

    @include media("retina2x") {
        &:after {
            content: "Retina" !important;
        }
    }
}



@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    /* css rules for ipad landscape */
    .lionheart-pc {
        display: none;
    }
    .lionheart-mobi {
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    .lionheart-mobi {
        display: none;
    }
    .lionheart-pc {
        display: block;
    }
}


$ipad-pro-portrait-breakpoint: "(min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px)";
$ipad-pro-landscape-breakpoint: "(min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px)";

original post: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106