In SCSS, Mixins are like functions in programming. You can send arguments, have some conditions, some calculations and even iterations. Let’s see how it works!We can keep the mixins in a separate file and import them or directly write them in style file. I give you an example to see everything once! The arguments: $image, […]
Shrink and fit the texts on one line If you are a Frontend developer, Integrator or UX developer, I believe that you had the moments that needs to stick two or more texts fields together and should be carefull about some of them more than the rest. I show what I mean. See the next […]
ALCATEL Width (px) Height (px) DPR Alcatel One Touch Idol Ultra 360 316 2 Alcatel One Touch Ultra 995 320 217 1.5 KINDLE FIRE Width (px) Height (px) DPR Amazon Kindle Fire 600 1024 1 Amazon Kindle Fire HD 7 533 853 1.5 Amazon Kindle Fire HD 8.9 800 1280 1.5 APLLE Width (px) Height (px) DPR Apple […]
Best practice to use hex color in opacity colors instead of rgba. Now don’t need to find the rgb of $the-colorbefore: background-color: rgba(225, 180, 192, 0.75);
To keep a div always as a square shape, use code below:
If you want to use SCSS as a CSS pre-processor, you need to do some steps, to be able to use it. If nodejs is not install on your system, install it form nodejs.org. open vscode terminal (or cmd) and go to your project folder. Type npm init, then answer the questions. (you can only […]
Frontend developers, always are dealing with different devices and orientation. Here I tried to find a table of view port specifications to use in media query. Mobile phones: 360☓640 375☓667 360☓720 360☓760 414☓736 412☓846 320☓568 360☓740 414☓896 412☓732 375☓812 360☓760 320☓570 320☓534 So it seems that between 320px to 414px for width and 534px to […]
Playfaire Display Source Sans Pro Merriweather Oswald Montserrat Merriweather Raleway Lato Elsie Roboto Abril Fatface Roboto Sansita Open sans
The last step of website customization is custom CSS for different devices. @media query is the way to control the element behavior depend on devices. Here you can find the media query fits for most of standard devices, and change it depend on what you need. CSS @Media commands @media not|only mediaType and (mediaFeature and|or|not […]
In UI/UX world, sometimes we are facing with elements with unknown width and height, so here is the way to keep an element horizontally and vertically in center! # HTML code <parent> <child>Some text to show always in center!</child> </parent> # CSS code – Flex way parent{ position: flex; width: 100%; height: 100%; […]
I need learn 