I am doing the Documentation page project and i’m wondering on how i can replicate CSS.
For example, here --> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You an see how the exact CSS colors are used in the example CSS, same with spacing. How do i do this?
- What is the color pallet
- How to replicate the spacing?
My pen --> https://codepen.io/Mike-was-here123/pen/MqJZdb
(its not responsive yet)
Line 104 CSS/ 102 HTML
This applies on my pen since i’m trying to make a exact replica of CSS but again, i don’t know how to get the spacing or idea what colors are used.
Ideas?
Hi michaelnicol,
For replicating colors, I would recommend using ColorZilla, which allows you to eyedrop any web page you are on and copy to color to your clipboard.
In terms of the spacing, both in the case of Bootstrap and Flexbox (I must admit, I am a lot more familiar with the former), I believe that as long as you replicate the code, it should result in the same spacing. You shouldn’t have to directly set margin or padding or anything like that, as the point of these frameworks is to help you space your elements. Perhaps taking a look at the code for a demo flexbox will help make this clear.
Hope this helps.
1 Like
Thank you so much for the color tool, it works really well.
Now HTML is not replicating my spacing. I don’t get what you mean by using Flex Box and or Bootstrap to do this. The demo just uses flex-wrap and justify-content to position the children, and a 150 pixel line height/ text-center to align the numbers.
I’m a little unclear as to what spacing you are trying to replicate. If you don’t mind, could you take a screenshot and use MS Paint (or something similar) to put a circle around it?
You can see how in default CSS, the properties are naturally spaced out and stuff.
Oh, okay, if you mean the indentation in the CSS, then Flexbox has nothing to do with that (sorry about that, I misunderstood and thought you wanted to align certain elements on the page). I think the default spacing for coding in general is one tab or 4 spaces, although on CodePen, it seems to be 2 spaces. It’s just a preference thing. See this for pros and cons of spaces vs. tabs. Does that help?
1 Like
Thank you so much for your help. It was indeed two spaces. I also downloaded WhatFont to see what font to use also.
–> https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
(You might have to refresh the page you are on when you use it)
This text is 14px, Lato - 400 btw.
The font used in CSS is 15px Monaco, monospace
My ending code:
<br>
<span style="color: #DABF8B">.container</span> {
<br> <span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;
<br> }
<br>
1 Like
