Bootstrap vs Pure CSS - JS Calc

https://codepen.io/abalducci/pen/KybMrZ

Unfortunately the Javascript programming challenges are generally the part I have taken easiest to. Both ‘pure CSS’ and Bootstrap are discussed.

I can definitely see the advantages of Bootstrap in like 70% of all site layouts. But I think also ‘advanced’ techniques in ‘pure CSS’ should be included as part of the elementary course.

I did spend some time, at first, trying to implement my model this way, and then realized it wasn’t working out all that great, in terms of columns and alignment based on the knowledge I then had. So I decided to play around with the ‘Bootstrap’ implementation instead.

I’m still early in this project, and I know the code is still pretty ‘messy’-- Like I said, I’ve been learning, playing a little only since this morning… But can some ‘Bootstrap Guru’ tell me why #sinclairCambridge is off-center relative to the buttons/content ?

I really don’t like the spacing of the Bootstrap design, or the really extensive HTML it produces, but I’d rather at least get it ‘right’ in a general way with BS and then dig into the CSS.

Its entirely possible to go without using bootstrap. Bootstrap just has alot of utility classes that are nice to have. I actually built a grid system that uses flexbox because bootstrap has far more then I will ever need.

As for your question about the cambridge thing. Its not that your #sinclairCambridge is offset. Its that .mainFont, .sinclairLogo both have margin-left: 20px; Just set margin on those classes to margin: 0 auto; for 0 top/down margin and auto left and right margins (center).

Also its not that hard to not use bootstrap.
Look into flexbox when you get a chance. Cheers mate. :]

1 Like

my calculator doesnt use bootstrap beside some buttons. everthing else is css

Okay-- Thanks for that. Clearer conceptually now the difference between margins/padding. Still playing around, looking for a more ‘CSS centric’ approach. One thing confusing me at the moment:

I have the ‘button’ style, and I also made a .test class both at the bottom of the style sheet. The contents are identical. However I don’t understand why ‘button’ automatically floats/aligns right, where as when text is involved the div automatically pushes to the next line (?). From some background reading I also understand that using ‘float’ is a bit out of date.

Any suggestions on: 1) Why the difference here ?
2) What would be the best commands to look into more deeply to better understand how to control
whether the positioning goes vertically or horizontally ?

Best,

  • A

I don’t believe the buttons are actually exhibiting a “float” behavior so much as just following the default position: static behavior of taking up the next available space.

The difference is due to their initial display property. By default, buttons are usually inline-block, spans are inline , and divs are block.

Inline elements only take up as much space as it has content. With some exceptions, their width can’t be modified.

Block elements take up 100% width and their width can be modified. Blocks take up a new line by default, even if their modified width can fit two blocks in a single line.

Inline-block elements are a mixture of both. They start off only taking up as much content as they have, but their width can be adjusted. If two inline-block elements can’t fit in the same line, the second element goes over to the next line.

2 Likes

Oh, I see, great, that helps a lot. I would have figured they would all have the same default if not specified but I guess not.

Thanks.

  • A

Like you, I decided to try make the JSCalc without any libraries (no Bootstrap, no jQuery), and was having problems getting the layout the way I wanted. That was until I watched the set of short (each around 2 mins) video tutorials on CSS grid by Rachel Andrew. Highly recommended tutorials, and I’m much happier not using Bootstrap, and the resulting html is very brief and clear (of course, not using Bootstrap’s classes means that your own CSS make be a bit longer). Mine isn’t the prettiest JS Calc solution, but then again neither is the GNOME calculator that it tries to reproduce.

1 Like

Thanks, I will have a look.

Appearance is less important, even in the example they outline, but I know it is what I need the most practice with. Particularly notable in your implementation is really the inclusion of ‘(’ ‘)’ as this makes it more than just a ‘stack based’ operation (more suitable for ‘trees’) presuming one isn’t converting to RPN or something internally.