Update 6–13–2018 : A reader has translated this article in japanese, find it here. 10k readers and 650+ claps later : Thank you readers ❤
Starting a new project from scratch is always a good way to learn new things no matter how experienced you are.
Recently I wondered what it would take to build a full web-application without using any third-party well-known framework such as Bootstrap.
First would it unleash the power of coding freedom (aka “Errors can only come from you” but also “Stop fighting against your framework with !important rules”) but also would it teach me CSS tricks I’m now proud and happy to share with you.
1. No borders – Prefer box-shadow or box-sizing
Have you ever worked with borders or not, this is what you should consider :
Borders actually take space in the global layout of your page. It means that it adds extra width and height to bordered elements.
- You have to manually compute desired width and height of your elements to keep them from scrambling your layout in case of a list-like or grid-like approach.
- Adding borders on particular states like hover will make the whole layout move. Performance-killer.
By hovering the first div you should notice the second one is also moving.
- You can use :
box-sizing: border-boxso that width takes
- You can use:
box-shadow: /* ... */to fake borders.
2. Draw attention to an element
Whenever you want users to click on a particular button there are multiple well-known strategies to call attention.
However, I’d like to share with you a smooth and simple yet customizable trick.
- No change in width or height of the element thus no broken layout.
- One-liner :
animation: radial-pulse 1s infinite;
- You can change : color, size, duration, etc.
- Unobtrusive yet noticeable.
3. Center an element horizontally and vertically
CSS has evolved still have we been a lot struggling to center our elements both horizontally and vertically.
There might be plenty of ways to achieve that but these are my everyday solutions to this recurrent need:
- Either use :
display:flexon the parent element +
margin: autoon the child element, +
text-align:centerdepending on your case.
- Either use :
align-items:centeron the parent element.
4. Position an element relatively to its parent
This one is very useful when dealing with dropdowns, tooltips and popovers.
This is how it works:
- The parent element MUST NOT be static :
position:relative | fixed | absolute
- The child MUST have :
And just like that, using
top | left | bottom | right will position the child relatively to its parent.
Notice that the square on top right could have been a popover settings menu appearing on click or hover.
Example picked from my own work :
Thanks for reading
I hope this article has been valuable to you.
This article has been written following a discussion with a reader thus I can only encourage you to reach out firstname.lastname@example.org 😄 ☕.
Fullstack Developer, Trainer & Entrepreneur.
Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.