/* -------------------------------------------------------------------------------------------- */ /* ------------------------------------ HARDCORE SETTINGS! ------------------------------------ */ /* -------------------------------------------------------------------------------------------- */ /* resets -------------------------------------------------------------------------------------- The selected font sizes are roughly 1:1.333 Perfect forth ------------------------------------ bpt 2400 1920 1440 960 ------------------------------------ wrp 1280 1152 1024 896 ------------------------------------ max 60 54 48 42 lrg 35 31.5 28 24.5 med 25 22.5 20 17.5 sml 20 18 16 14 min 15 13.5 12 10.5 ------------------------------------ The wrapper and font size increase by the same proportions scale up by percentages. Font size is selected from available numbers that are divisable by wrapper width. This trys to ensure the font size will scale up in percentages that result in whole numbers preventing pixel bluring. This is not always optiminal if you are selecting font size based around a scale. See full times table below. ------------------------------------ 1280 1152 * 1.111111111111111 = 1280 1024 * 1.125 = 1152 896 * 1.142857142857143 = 1024 ------------------------------------ 1280 / 16 = 80 1152 / 16 = 722020 1024 / 16 = 64 896 / 16 = 56 ------------------------------------ font size ---------------------*------------------------ ---------------- bpt 150 135 120 105 90 75 60 45 30 15 percentage ---------------------*------------------------ ---------------- --- 140 126 112 98 84 70 -56- 42 28 14 1.071428571428571 --- 130 117 104 91 78 65 52 39 26 13 1.076923076923077 --- 120 108 96 84 72 60 48 36 24 12 1.083333333333333 --- 110 99 88 77 66 55 44 33 22 11 1.090909090909091 --- 100 90 80 70 60 50 40 30 20 10 1.1 --- 90 81 72 63 54 45 36 27 18 9 1.111111111111111 wrp -80 72 64 -56- 48 40 32 24 16 8 1.125 --- 70 63 56 49 42 35 28 21 14 7 1.142857142857143 max 60 54 48 42 36 30 24 18 12 6 1.166666666666667 lrg 50 45 40 35 30 25 20 15 10 5 1.2 --- 40 36 32 28 24 20 16 12 8 4 1.25 med 30 27 24 21 18 15 12 9 6 3 1.333333333333333 sml 20 18 16 14 12 10 8 6 4 2 1.5 min 10 9 8 7 6 5 4 3 2 1 --------------------*------------------------- ----------------- sml -webkit-text-size-adjust: 100%; - required to ensure text maintains scale when iphone changed from landscape to portrait. height:100%; - Required to ensure background covers entire window. box-sizing: - border-box; - ensures all element borders are located inside edge of element. Resources. http://blog.55minutes.com/2012/04/iphone-text-resizing/ refactored: 10/3/16 -- dp -------------------------------------------------------- */ *, *:before, *:after { box-sizing: border-box; } html { overflow-y: scroll; font-size: 100%; height: 100%; margin: 0; padding: 0; } body { min-height: 100%; position: relative; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } .viewport { display: flex; flex-direction: column; flex: 1; /* match background colour of signature in footer */ background: url('../graphics/textures/img-noise-1.png'); background-color: rgba(241,241,241,1); } /* clearfix ----------------------------------------------------------------------------------- - Contain floats but not margins - Does have issues but I can't remember what? re-test: -- dp -------------------------------------------------------- */ .cf::after { content: " "; display: block; clear: both; } /* wrap --------------------------------------------------------------------------------------- Wrapper size determines at what percentage the type will scale up. To ensure line lengths and type size scale correctly use the same percentage that calculates wrapper width max-width: auto; 100% max-width: 30em; 480px @ 480 x 1.333333333333333 = 640px max-width: 40em; 640px max-width: 56em; 896px @ 896 x 1.142857142857143 = 1024px max-width: 64em; 1024px @ 1024 x 1.125 = 1152px max-width: 72em; 1152px @ 1152 x 1.111111111111111 = 1280px max-width: 80em; 1280px @ 1280 x 1 Golden Ratio: 1.61803398875 Golden ratio @ 896 = 553.7584539198698 @ 1024 = 632.8668044798512 @ 1152 = 711.9751550398326 @ 1280 = 791.083505599814 554 + 342 = 896 633 + 391 = 1024 712 + 440 = 1152 791 + 489 = 1280 refactored: 11/3/16 -- dp -------------------------------------------------------- */ .wrap { margin: 0 auto; position: relative; display: block; } @media (min-width: 33.75em) { .wrap { max-width: 30em; } } @media (min-width: 45em) { .wrap { max-width: 40em; } } @media (min-width: 60em) { .wrap { max-width: 56em; } } @media (min-width: 90em) { .wrap { max-width: 64em; } } @media (min-width: 120em) { .wrap { max-width: 72em; } } @media (min-width: 150em) { .wrap { max-width: 80em; } } /* type sizes --------------------------------------------------------------------------------- font size ---------------------------------------------- ----------------- ---- 200 180 160 140 120 100 80 60 40 20 ---- 190 171 152 133 114 95 76 57 38 19 1.052631578947368 ---- 180 162 144 126 108 90 72 54 36 18 1.055555555555556 ---- 170 153 136 119 102 85 68 51 34 17 1.058823529411765 ---- 160 144 128 112 96 80 64 48 32 16 1.0625 bpt 150 135 120 105 90 75 60 45 30 15 1.066666666666667 ---- 140 126 112 98 84 70 -56- 42 28 14 1.071428571428571 ---- 130 117 104 91 78 65 52 39 26 13 1.076923076923077 ---- 120 108 96 84 72 60 48 36 24 12 1.083333333333333 ---- 110 99 88 77 66 55 44 33 22 11 1.090909090909091 ---- 100 90 80 70 60 50 40 30 20 10 1.1 ---- 90 81 72 63 54 45 36 27 18 9 1.111111111111111 wrp 80 72 64 -56- 48 40 32 24 16 8 1.125 ---- 70 63 56 49 42 35 28 21 14 7 1.142857142857143 max 60 54 48 42 36 30 24 18 12 6 1.166666666666667 Minor Second lrg 50 45 40 35 30 25 20 15 10 5 1.2 Minor Third ---- 40 36 32 28 24 20 16 12 8 4 1.25 Major Third med 30 27 24 21 18 15 12 9 6 3 1.333333333333333 Perfect Forth sml 20 18 16 14 12 10 8 6 4 2 1.5 Perfect Fifth min 10 9 8 7 6 5 4 3 2 1 2 ---------------------------------------------- ----------------- 2 1.5 1.333333333333333 1.25 1.2 1.166666666666667 1.142857142857143 1.125 1.111111111111111 --------------------*------------------------- ----------------- sml - Using 16px as base or 1em - Text size will increase by the same percentage as wrapper - This ensures line lengths and type size stay on proportion to wrapper width - First landscape breakpoint set scale - (60em is first landscape breakpoint) - Scale: 1:1.2 Minor Third - Sizes selected for font size in first landscape break point 60em ----------------------------------------- 1.728em max 1.44em 23.04px lrg 1.2em 19.2px med 1em 16px sml 0.8333333333333333em 13.33333333333333px min 0.6944444444444444em 11.11111111111111px 0.5787037037037037em ----------------------------------------- refactored: 21/5/15 -- dp -------------------------------------------------------- */ .max, .lrg, .med, .sml, .min{ font-size:100%; } @media (min-width: 0em) { .max { font-size: 1.5em; } /* 22px */ .lrg { font-size: 1.125em; } /* 18px */ .med { font-size: 0.9375em; } /* 15px */ .sml { font-size: 0.8125em; } /* 13px */ .min { font-size: 0.75em; } /* 12px */ } @media (min-width: 33.75em) { .max { font-size: 1.5em; } /* 22px */ .lrg { font-size: 1.125em; } /* 18px */ .med { font-size: 0.9375em; } /* 15px */ .sml { font-size: 0.8125em; } /* 13px */ .min { font-size: 0.75em; } /* 12px */ } @media (min-width: 45em) { .max { font-size: 1.5em; } /* 22px */ .lrg { font-size: 1.125em; } /* 18px */ .med { font-size: 0.9375em; } /* 15px */ .sml { font-size: 0.8125em; } /* 13px */ .min { font-size: 0.75em; } /* 12px */ } @media (min-width: 60em) { .max { font-size: 1.44em; } /* 23.04px */ .lrg { font-size: 1.2em; } /* 19.2px */ .med { font-size: 1em; } /* 16px */ .sml { font-size: 0.8333333333333333em; } /* 13.33333333333333px */ .min { font-size: 0.6944444444444444em; } /* 11.11111111111111px */ } @media (min-width: 90em) { .max { font-size:1.645714285714286em; } .lrg { font-size:1.371428571428572em; } .med { font-size:1.142857142857143em; } .sml { font-size:0.9520000000000001em; } .min { font-size:0.7931428571428572em; } } @media (min-width: 120em) { .max { font-size: 1.851428571428572em; } .lrg { font-size: 1.542857142857144em; } .med { font-size: 1.285714285714286em; } .sml { font-size: 1.071em; } .min { font-size: 0.8922857142857144em; } } @media (min-width: 150em) { .max { font-size: 2.057142857142858em; } .lrg { font-size: 1.714285714285715em; } .med { font-size: 1.428571428571429em; } .sml { font-size: 1.19em; } .min { font-size: 0.9914285714285716em; } } /* type defaults ------------------------------------------------------------------------------ .txt (class) - Declares that text is being used in this element - To be included in all elements that contain text including links and spans. - Defines defaults and font fallbacks for all elements that contain text. - Does not include and styling or position of text Font based properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts Text based properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text last updated: 16/10/16 - core - candidate -- dp -------------------------------------------------------- */ .txt { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* text-rendering: geometricPrecision; */ -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; } /* type hierarchy ----------------------------------------------------------------------------- Vertical txt margins and default styling Interesting concept of relative positioning for controling line height Also the pseudo element :first-line is an option to align img with top of text ; .heading { position:relative; top:-0.1em; } ** Needs review and documentation update ** last updated: 13/02/16 - core - candidate -- dp -------------------------------------------------------- */ .heading, .para, .legend, .quote, .caption, .message { display: block; margin:0; padding:0; vertical-align: baseline; } /* type modifiers ----------------------------------------------------------------------------- ** Needs review and documentation update ** checked: 20/5/15 - not completed -- dp -------------------------------------------------------- */ .emphasize { font-weight: bold; word-wrap: break-word; word-break:break-all; } .line-break { display: block; } /* images ------------------------------------------------------------------------------------- .ico = icon fonts for the time being, needs review .img = default styling required if inline images stretching to edges of container .bgi = stands for background image used to set defaults for all background options .svg = basically same as bmg but used to identify cases of svg files being used as background images background property background:; - shorthand use below vals in any order serarated by space background-attachment: scroll; background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-color: transparent https://developer.mozilla.org/en-US/docs/Web/CSS/background Images have three primary attributes; 1. height and width of pixel 2. height and width of image 3. dpi (DOTS PER INCH) wp = Width of the screen in logical pixels hp = Height of the screen in logical pixels dp = Diagonal resolution in logical pixels wi = Width of the screen in inches hi = Height of the screen in inches di = Diagonal size of screen in inches H: 102400 W: 230400 ------ T: 332800 diagonal: 576.8882040742383 3.61 8.41 12.02 diagonal: 3.466987164671943 166.3946754555768 Use Pythagoras' Theorem to calculate diagonal length of screen hi^2 + wi^2 = di^2 hp^2 + wp^2 = dp^2 Calculate display in inches Calculate display in pixels ---------------------------- ---------------------------- 23.5^ 2 + 13.2^ 2 = di^ 2 5120^2 + 2880^2 = dp^ 2 552.25 + 174.24 = di^ 2 26214400 + 8294400 = dp^ 2 di^ 2 = 726.49 dp^ 2 = 34508800 di = √726.49 dp = √34508800 di = 26.95347843971164 dp = 5874.419120219462 di = 27 inch display dp = 5875 pixel display 5875 / 27 = 217.5925925925926 (218ppi) Squares and Square Roots Square a number - To square a number, multiply it by itself. 4 Squared = 16 Square root - The number that was multiplied by itself to give the squared number. Square root of 16 = 4 Perfect Squares - A Perfect Square is squared number taken from a whole number. 4 squared = 16 Calculate CSS PPI ---------------------------------------------------------------- - With images on the screen, the resolution of the device is your output. - Your computer is either using a standard resolution or a hi-dpi (retina) screen. - There is no longer a 1:1 between the points-per-inch of the OS and the pixels-per-inch in the display. This is referred to as resolution independence. - 1:96 is a fixed ratio of CSS ‘inches’ to CSS ‘pixels’ - A new measurement spec dppx is a CSS unit representing the number of dots per px unit. So a 96PPI view is == 1dppx, a 192PPI view is == 2dppx. *** NEED TO CARRY ON FROM HERE *** ---------------------------------------------------------------------------------------------------------------------------------------- DPI - "Dots Per Inch" is a measure of spatial dot density used in the print industry. - This concept also applies to computer screens under the name PPI. Same principal It counts the number of pixels. - The name DPI is also used in screens as a dot can refer to a pixel. PPI - "Pixels Per Inch" or Pixel density refers to amount of availble pixels on the screen in an square inch - Windows computers initially had a PPI of 96. Mac used 72 PPI. - Now Windows, Mac, or any device manufacturer creates an huge range of screens sporting a wide variety of PPI. resolution - Also known as "screen pixel size" or "display size" is the number of logical pixels available horizontally and vertically on the screen. Example 2560 x 1440 best resolution - The "best" resolution is the state where the number of physical pixels matches the number of pixels drawn by the software one to one. - If you reduce the scale, the elements will appear bigger. This is because there are more physical pixels to fill with virtually less pixels provided by OS. screen ratio - If you decrease the pixel ratio it does not change the amount of pixels available. Example - iMac 27 has a resolution of 2560 x 1440 and a pixel density of 109 pixels per inch A pixel in itself has no size or physical representation, it can only carry value through its relationship with the screen physical size, creating the resolution, or PPI. If you want to always see your design (or any design) pixel-perfect, never use a pixel count different from your native one. In the print world DPI (dots per inch) refers to the output resolution of a printer or imagesetter. PPI (pixels per inch) refers to the input resolution of a digital photograph or image. Computer screen world A computer file is a computer resource for recording data in a computer storage device. The format of a file is defined by its content since a file is solely a container for data. On most modern operating systems, files are organized into one-dimensional arrays of bytes. A digitally image has no inherent physical dimensions, measured in inches or centimeters The input resolution of a digital image (PPI) lets the printer or software know the intended size of the image The output resolution of a printer DPI refers to the physical dot density of an image when it is printed onto paper. The input resolution is used to provide a physical representation in inches of the size of the image when printed A computer file is not a real object but a location Example If we scan a 35mm transparency at 4000PPI - this will result in a file that has 5400 by 3600 pixels. To make a print of 12 by 8 inches, we look at the PPI we have available from our file for a print of this size. 5400 pixels divided by 12 inches = 450 PPI (5400/12 = 450) or 3600/8 = 450. This means we can use 450 pixels to represent one inch of our print. The printer driver will now translate those 450 logical pixels per inch (PPI) into 1440 physical dots per inch (DPI) and produce a very high quality print for us. The standard for high quality, photographic printed images is 300 PPI, meaning that for each inch of the printed image, there must be 300 source pixels to use. PPI is a logical term - Changing the PPI of a particular file does not in any way affect the file itself - It is simply a decision about how many pixels of the available pixels you will use to print an inch on page - Pixels Per Inch is a description of the logical number of pixels from your original image that will be used to tell the printer to print one inch on paper. - Assuming the quality of a sharp original shot with good technique, the higher the PPI, the better the quality print you can achieve. - Claims that 360 PPI is the most you need, but 600 PPI images can easily be seen to be much sharper again if this data is available at good quality from the original file. PPI in devices PPI - Pixels per inch (PPI) is a measurement of the pixel density (resolution) of an electronic image device, such as a computer monitor or television display. - or image digitizing device such as a camera or image scanner. Pixel Density across devices Computer screens - The PPI of a computer display is related to the size of the display in inches and the total number of pixels in the horizontal and vertical directions. digital cameras - In digital photography, pixel density is the number of pixels divided by the area of the sensor. PPI in images The history Points are a physical unit of measure in typography from the days of printing presses, where 1 point by the modern definition is 1/72 of the international inch (25.4 mm) Macintosh modeled their early displays at 72 pixels per inch because it mirrored the 72 points per inch used in type setting for printed material, a 1px to 1dpi relationship. This was not optimal as people tended to view a monitor at a distance 1/3 or 33% greater than printed materials, causing a mismatch between the perceived sizes Microsoft attempted to correct the display issue by essentially writing its software to assume that every screen provide 96 pixels per inch which is 1.33% more than 72 pixels per inch There is no longer a 1-to-1 relationship between the font size in pixels and the printout size in points. This is because displays feature higher pixel densities. Because of the logical PPI: The PPI that software claims a screen provides. This can be thought of as the PPI provided by a virtual screen created by the operating system. physical PPI: The PPI that a physical screen actually provides. Software programs render images to the virtual screen and then the operating system renders the virtual screen onto the physical screen. Calculate PPI ---------------------------------------------------------------------------------------------------------------------------------------- pix = Width of screen in physical pixels *** pix / psy = res *** psy = Width of screen in inches res x psy = pix res = Resolution pix / res = psy ======================================================================================================================================== DEVICE RESOLUTIONS Device screen dimensions ---------------------------------------------------------------------------------------------------------------------------------------- screen inches aspect logical px physical px pixel density logical width height ratio width height width height density ppi ppi ---------------------------------------------------------------------------------------------------------------------------------------- iMac 27 23.5 13.2 16:9 2560 1440 2560 1440 1.0 mdpi 109 iMac 5K 23.5 13.2 16:9 2560 1440 5120 2880 2.0 xhdpi 218 192 ---------------------------------------------------------------------------------------------------------------------------------------- MacBook Air 11 10.1 5.7 16:9 1366 768 1366 768 1.0 mdpi 136 MacBook Air 13 11.3 7.0 16:10 1440 900 1440 900 1.0 mdpi 128 MacBook Pro 13 11.3 7.0 16:10 1280 800 2560 1600 2.0 xhdpi 226 MacBook Pro 15 13.1 8.2 16:10 1440 900 2880 1800 2.0 xhdpi 220 ---------------------------------------------------------------------------------------------------------------------------------------- Surface 9.2 5.2 16:9 1366 768 1366 768 1.0 mdpi 148 Surface 2 9.2 5.2 16:9 1280 720 1920 1080 1.5 hdpi 208 Surface 3 9.4 5.3 16:9 1280 720 1920 1080 1.5 hdpi 204 Surface Pro 9.2 5.2 16:9 1280 720 1920 1080 1.5 hdpi 208 Surface Pro 3 10.0 6.7 3:2 1440 960 2160 1440 1.5 hdpi 216 Surface Pro 4 10.3 6.9 3:2 1368 912 2736 1824 2.0 xhdpi 265 ---------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------- iPadi 5.8 7.8 4:3 768 1024 768 1024 1.0 mdpi 163 96 iPad Mini 4.7 6.3 4:3 768 1024 768 1024 1.0 mdpi 163 96 iPad Mini Retina 4.7 6.3 4:3 768 1024 1536 2048 2.0 xhdpi 326 iPad Pro 10.3 7.7 4:3 1366 1024 2732 2048 2.0 xhdpi 264 192 iPad Retina 5.8 7.8 4:3 768 1024 1536 2048 2.0 xhdpi 264 ---------------------------------------------------------------------------------------------------------------------------------------- iPhone 1.9 2.9 3:2 320 480 320 480 1.0 mdpi 168 iPhone 4 2.0 2.9 3:2 320 480 640 960 2.0 xhdpi 326 iPhone 5 2.0 3.5 16:9 320 568 640 1136 2.0 xhdpi 326 192 iPhone 6 2.3 4.1 16:9 375 667 750 1334 2.0 xhdpi 326 192 iPhone 6 Plus 2.7 4.8 16:9 414 736 1080 1920 3.0 xxhdpi 401 249 ---------------------------------------------------------------------------------------------------------------------------------------- Samsung Galaxy S5 2.9 5.6 16:9 360 640 1080 1920 3.0 xxhdpi 441 288 Samsung Galaxy S6 2.5 4.4 16:9 360 640 1440 2560 4.0 xxxhdpi 577 384 ---------------------------------------------------------------------------------------------------------------------------------------- Apple Watch 38mm 0.9 1.2 5:4 136 170 272 340 2.0 xhdpi Apple Watch 42mm 1.0 1.3 5:4 156 195 312 390 2.0 xhdpi ======================================================================================================================================== RESOLUTION BASED IMAGE SIZES Select sizes that are divisable so they can be used interchangably across devices and resolutions ------------------------------------------- x 2 ----------------------------------- x 4 ----------------------------------- Sfx x 1 x 2 x 3 x 4 | Sfx x 1 x 2 x 3 x 4 | Sfx x 1 x 2 x 3 x 4 ------------------------------------------- | ----------------------------------- | ----------------------------------- rd1 320 160 | rd6 640 320 | rd. 1280 640 x 1.5 ----------------------------------- | ----------------------------------- | ----------------------------------- rd2 480 240 160 120 | rd7 960 480 320 240 | rd. 1920 960 640 480 x 1.5 ----------------------------------- | ----------------------------------- | ----------------------------------- rd3 720 360 240 180 | rd8 1440 720 480 360 | rd. 2880 1440 960 720 x 1.5 ----------------------------------- | ----------------------------------- | ----------------------------------- rd4 1080 540 360 270 | rd9 2160 1080 720 540 | rd. 4320 2160 1080 x 1.5 ----------------------------------- | ----------------------------------- | ----------------------------------- rd5 1620 810 540 405 | " " 3240 1620 1080 810 | rd. 6480 3240 1620 ------------------------------------------- | ----------------------------------- | ----------------------------------- Suffix will not be blank after rd9 to indicate original image. PHP will look for original name and deploy best suited asset. RESOLUTION BASED IMAGE SIZES Select sizes that are divisable so they can be used interchangably across devices and resolutions x2 x1 | 640 | 320 | 960 | 480 | 1440 | 720 | 2160 | 1080 | 3240 | 1620 Multipliers ----------------------------------- rd1 320 x 1 = 320 rd1 rd2 480 x 1 = 480 rd2 rd6 640 x 1 = 640 rd6 rd3 720 x 1 = 720 rd3 rd7 960 x 1 = 960 rd7 rd4 1080 x 1 = 1080 rd4 rd8 1440 x 1 = 1440 rd8 rd5 1620 x 1 = 1620 rd5 rd9 2160 x 1 = 2160 rd9 " " 3240 x 1 = 3240 " " ----------------------------------- rd2 480 x 1.3 = 640 rd6 rd3 720 x 1.3 = 960 rd7 rd4 1080 x 1.3 = 1440 rd8 rd5 1620 x 1.3 = 2160 rd9 ----------------------------------- rd1 320 x 1.5 = 480 rd2 rd2 480 x 1.5 = 720 rd3 rd6 640 x 1.5 = 960 rd7 rd3 720 x 1.5 = 1080 rd4 rd7 960 x 1.5 = 1440 rd8 rd4 1080 x 1.5 = 1620 rd5 rd8 1440 x 1.5 = 2160 rd9 rd9 2160 x 1.5 = 3240 " " ----------------------------------- rd1 320 x 2 = 640 rd6 rd2 480 x 2 = 960 rd7 rd3 720 x 2 = 1440 rd8 rd4 1080 x 2 = 2160 rd9 rd5 1620 x 2 = 3240 " " ----------------------------------- rd1 320 x 3 = 960 rd7 rd2 480 x 3 = 1440 rd8 rd3 720 x 3 = 2160 rd9 rd4 1080 x 3 = 3240 " " x2 ---------------------------------------- ------------------------------------------- rd5 640 320 x 1.5 ----------------------------------- rd6 960 480 320 240 x 1.5 ----------------------------------- rd7 1440 720 480 360 x 1.5 ----------------------------------- rd8 2160 1080 720 540 x 1.5 ----------------------------------- rd9 3240 1620 1080 810 ------------------------------------------- ------------ NA --------------- 1280 / 960 = 1.333333333333333 1920 / 1440 = 1.333333333333333 2880 / 2160 = 1.333333333333333 4320 / 3240 = 1.333333333333333 ----------------------------------- Sfx x 1 x 2 x 3 x 4 ----------------------------------- rd5 1280 640 ----------------------------------- rd6 1920 960 640 480 ----------------------------------- rd7 2880 1440 960 720 ----------------------------------- ======================================================================================================================================== UNDERSTANDING BITS & BYTES bit - Stands for "binary diget" A computer bit can have two different values and is represented by the digits 1 or 0. byte - A byte is a fixed-length ordered sequence of 8 bits. - Modern computer organise data into bytes to increase data processing efficiency - A byte can have any one of 256 "values" depending on the values (e.g., 0 or 1) of each of its 8 bits. Examples values for a byte: 00000000 (binary number for 0) 00000001 (binary number for 1) 00000010 (binary number for 2) 11001000 (binary number for 208) 11111111 (binary number for 255) binary - A set of bits can be thought of as a representation of a "binary" number, which is another way of representing familiar (base 10) numbers - (base-10) The decimal system uses 10 as its base number so it is called a Base-10 system. 0,1,2,3,4,5,6,7,8,9 - (base-2) The binary system uses 2 as its base number so it is called a Base-2 system. 0,1 ASCII - ASCII stands for the American Standard Code for Information Interchange - There are 256 characters in the ASCII character set - Each of these different characters is represented by a different byte, according to a specific permanently agreed upon convention. - A Megabyte of computer memory can hold a million characters (including spaces between words). Examples: A = character #65 (byte value 01000001) d = character #100 (byte value 01100100) @ = character #65 (byte value 01000000) Pixel - A pixel is an irreducible discrete unit of information in an image or picture - Pixel stands for "picture element" - The value of each pixel is its colour - The location of a pixel is given by an x-y coordinate on a graph. bitmap - A "map" of locations and values of pixels is called a bitmap - An image described by a bitmap is called a bitmapped image. - A digital photo is an example of a bitmapped image - In Photoshop a bitmapped image is alway made up of 1 bit pixels, whereas in more general usage a bitmapped image can be made up of pixels of arbitrary depth Pixel depth - The depth of a pixel in a digital photo seen on a computer screen is determined by the number of bits of information it contains - The appearance and quality of a digital photo seen on the computer screen is determined by the depth of the pixels 1-bit A 1-bit pixel can take on 2 different values, 0 or 1 (dot is off or on, black or white) 00 (binary number for 0) black 01 (binary number for 1) white 2-bit A 2-bit pixel can take on 4 different values corresponding to a two digit binary number 00 (binary number for 0) black 01 (binary number for 1) white 10 (binary number for 2) Light Grey? 11 (binary number for 3) Dark Grey? 3-bit A 3-bit pixel can take on (2 ^ 3) = 8 different values - In an 8-bit color palette each pixel's value is represented by 8 bits resulting in a 256-value palette - This is usually the maximum number of greys in ordinary monochrome systems; each image pixel occupies a single memory byte. - These days, most laptops can show 24-bit color (also known as RGB color, with 8 bits (1 byte) describing the brightness of each primary) Summary - A bit is a irreducible unit of information and has two possible values, 1 or 0. It can also represent true false, on off. - A byte is an ordered set or "stream" of 8 bits having given values - 2 to the power of 8 (2 ^ 8) 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 - A byte can have any one of 256 possible "values" - The value of a byte, therefore, can be ordered from 0 to 255. - A Megabyte is 1 million bytes - Each of the bytes can have any one of the 256 values - Computer memory and information storage capability is measured in Megabytes ======================================================================================================================================== OPTIMISING RASTER IMAGES 1 byte = 8 bits Computers by convention set one byte to equal eight bits - A raster image is a 2 dimensional grid of pixels - Each pixel encodes color and transparency information - Each pixel stores the RGBA (Red, Green, Blue and Alpha channel) values - Each pixel has 4 channels - Image compressors use a variety of techniques to reduce the number of required bits per pixel to reduce the file size of the image - 100 x 100 pixel image is a sequence of 10,000 pixels - Each pixel stores the RGBA (Red, Green, Blue and Alpha channel) values - Internally the browser allocates 256 values (shades) for each channel - This translates into 8 bits per channel (2 ^ 8 = 256) and 4 bytes per pixel (4 channels x 8 bits = 32 bits = 4 bytes) Note: Regardless of the image format used to translate the data from the server to the client, when the image is decoded by the browser, each pixel always occupies 4 bytes of memory. This can be an important constraint for the large images and devices which do not have a lot of available memory - for example, low-end mobile devices. Calculate image size - 100px x 100px = 10,000 px - 10,000 x 4 bytes = 40,000 bytes - 40,000 / 1024 = 39 KB - Filesizes grow the larger the image gets - This means image assets are slow and expensive to download - Image compression is used to help reduce file size Optimise data stored in individual pixels - Each pixel encodes color and transparency information - Each pixel stores the RGBA (Red, Green, Blue and Alpha channel) values - You can reduce the "bit-depth" of an image from 8 bits per channel to a smaller colour palette - 8 bits per channel gives you 256 values per channel - Reducing the number of available colours reduces the bits needed for the RGB channels saving bytes per pixel - By saving over the original 4 bytes per pixel with 2 bytes per pixel has achieved 50% compression of file Optimise image using delta encoding - Many images and especially photographs have many nearby pixels with similar colours, for example the sky or repeating textures - Instead of storing individual values for each pixel, we can store the difference between nearby pixels - If adjacent pixels are the same, then the delta is "zero" and we only need to store a single bit - The compressor is used to apply delta encoding Lossless vs lossy image compression - Image optimisation is a function of lossy and lossless compression - Differences in image formats are due to the difference in how and which lossy and lossless alogrithms are used to optimise the image - There is no single or best format or "quality setting" for all images: each combination of particular compressor and image contents produce a unique output ======================================================================================================================================== http://sebastien-gabriel.com/designers-guide-to-dpi/ https://gist.github.com/anotheruiguy/8626483 https://material.io/devices/ http://www.colorado.edu/physics/phys1230/phys1230_fa03/DigiColor.htm https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization https://developers.google.com/speed/webp/docs/compression last change: 19/03/17 - core - research -- dp -------------------------------------------------------- */ .img { background-color: rgba(255,255,255,0.4); display: block; height: auto !important; width: 100%; //-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.04); //-moz-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.04); //box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.04); } .bgi { background-attachment: scroll; background-clip: border-box; background-color: #202020; background-origin: border-box; background-position: center center; background-repeat: no-repeat; display: block; } .svg { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-origin: border-box; background-position: center center; background-repeat: no-repeat; display: block; } .map { display: block; width:100%; height:100vh; } /* icon fonts --------------------------------------------------------------------------------- ** BIG ISSUES - FONT FAMILY CLASH WHEN USED WITH .txt ** .icon (class) - Declares that an icon font will be used in the element - For icon fonts using the @font-face rule only use .svg class for icons in svg format - Define defaults for all elements that contain icon fonts - Does not include any styling or positioning of icon font IcoMoon app https://icomoon.io/app/ last updated: 16/10/16 - core - candidate -- dp -------------------------------------------------------- */ .ico { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Separator ---------------------------------------------------------------------------------- re-test: -- dp -------------------------------------------------------- */ .hr { display: block; margin: 1.25em 0 1em; padding: 0; clear:both; border-width: 0px; border-style: dashed; border-color: rgba(0,0,0,0.2); border-bottom-width: thin; } /* boxes -------------------------------------------------------------------------------------- re-test: -- dp -------------------------------------------------------- */ .div { display: block; position: relative; } .span { display: inline; } /* boxes -------------------------------------------------------------------------------------- border-collapse: separate Or do nothing, this is default, separate borders border-collapse: collapse merge borders into single border border-spacing: 3px; Only works if border-collapse is separate re-test: -- dp -------------------------------------------------------- */ .table { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; border-color: transparent; border-spacing: 0 0; } .table-row { display:table-row; vertical-align: top; } .table-cell { display: table-cell; vertical-align: top; } /* nav bones ---------------------------------------------------------------------------------- - nav is used for site specific navigation - list can be used to bundle lesser important links checked: 12/2/16 - core - research -- dp -------------------------------------------------------- */ .nav { display: block; } .list { display: block; list-style: none; margin:0; padding:0; } .list > .item { display: list-item; margin:0; padding:0; position: relative; text-align: left; } /* link defaults ------------------------------------------------------------------------------ .link (class) - use on "a" tags only clense the link of default styling fresh and ready for use Font based properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts Text based properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text last updated: 13/02/16 - core - candidate -- dp -------------------------------------------------------- */ .link { display: inline; text-decoration: none; cursor: pointer; vertical-align: baseline; margin: 0; padding: 0; color: rgba(0,0,0,0.4); } .link:hover, .link:focus, .link:active { outline: none; border: 0px solid transparent; } /* vertical positioning ----------------------------------------------------------------------- - Use vertical align class to provide margin to content element in responsive mode - Revove horizontal margin on fixed width break points that dont require horizontal margin refactored: 13/3/16 -- dp -------------------------------------------------------- */ .v-align { margin: 0; } @media (min-width: 33.75em) { .v-align { margin: 2.5em auto 2.5em auto; } } .max.heading { line-height:1.2; margin-bottom: .25em; } .lrg.heading { line-height:1.2; margin-bottom: .25em; } .med.heading { line-height:1.2; margin-bottom: .25em; } .sml.heading { line-height:1.33333; margin-bottom: .25em; } .min.heading { line-height:1.33333; margin-bottom: .25em; } .max.para { line-height:1.33333; margin-bottom: .75em; } .lrg.para { line-height:1.33333; margin-bottom: .75em; } .med.para { line-height:1.414; margin-bottom: .75em; } .sml.para { line-height:1.333; margin-bottom: .75em; } .min.para { line-height:1.414; line-height:1.5; margin-bottom: .75em; } @media (min-width: 60em) { .sml.para { line-height:1.414; margin-bottom: .75em; } } .max.legend { line-height:1.2; margin-bottom: 0.3348979766803841em; } .lrg.legend { line-height:1.2; margin-bottom: 0.3348979766803841em; } .med.legend { line-height:1.2; margin-bottom: 0.3348979766803841em; } .sml.legend { line-height:1.33333; margin-bottom: 0.3348979766803841em; } .min.legend { line-height:1.33333; margin-bottom: 0.3348979766803841em; } .max.quote { } .lrg.quote { } .med.quote { } .sml.quote { } .min.quote { } .max.caption { } .lrg.caption { } .med.caption { } .sml.caption { } .min.caption { } .max.link { line-height:1.33333; } .lrg.link { line-height:1.33333; } .med.link { line-height:1.414; } .sml.link { line-height:1.414; } .min.link { line-height:1.414; } .max.span { line-height:1.33333; } .lrg.span { line-height:1.33333; } .med.span { line-height:1.414; } .sml.span { line-height:1.414; } .min.span { line-height:1.414; } .max.message { line-height:1.33333; } .lrg.message { line-height:1.33333; } .med.message { line-height:1.414; } .sml.message { line-height:1.414; } .min.message { line-height:1.414; } .max.input { line-height:1.33333; } .lrg.input { line-height:1.33333; } .med.input { line-height:1.414; } .sml.input { line-height:1.414; } .min.input { line-height:1.414; } .max.table-cell { line-height:1.33333; } .lrg.table-cell { line-height:1.33333; } .med.table-cell { line-height:1.414; } .sml.table-cell { line-height:1.414; } .min.table-cell { line-height:1.414; } .max.select { line-height:1.33333; } .lrg.select { line-height:1.33333; } .med.select { line-height:1.414; } .sml.select { line-height:1.414; } .min.select { line-height:1.414; } .max.btn { line-height:1.33333; } .lrg.btn { line-height:1.33333; } .med.btn { line-height:1.414; } .sml.btn { line-height:1.414; } .min.btn { line-height:1.414; }