Flexbox is a great new tool we can fit into the web development toolkit, with Bootstrap 4 and other frameworks moving across to flexbox, it is becoming more important to start learning it.
Found this great cheat sheet which has interactive demos / explanations, there is plenty other resources out there, but I find this one easy to quickly get my bearings if the brain freezes!
Lately I have been working on a full screen office dashboard project which is going to be shown on various 50″ screens throughout an office space, wanted to add some basic information such as weather! Came across this cool CSS3 written animated weather icons.
Give it a look and thank you to the author
Some useful bootstrap 3 media queries for both mobile first and non mobile first development styles, to make modifications to your front end simplier and follow the bootstrap 3 standard breakpoints.
Origional article can be found here.
Min-Width: Refers to everything greater than or equal to the amount given.
Max-Width: Refers to everything less than or equal to the amount given.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (min–width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min–width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min–width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min–width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min–width : 1200px) { } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max–width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max–width : 992px) { } /* Small Devices, Tablets */ @media only screen and (max–width : 768px) { } /* Extra Small Devices, Phones */ @media only screen and (max–width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max–width : 320px) { } |