Reorganizing Layout Code | Minimizing the CSS if possible

#1

I have re-organized the code of this pen →

to suit my needs to this pen →

Question:
In the second pen is there a way that CSS can be further minimized. I mean can we write this layout with little less css than the current one?

Technical Flaw in flex-basis and calc
#2

Hi @codeispoetry

You have a lot of double declarations. Try to combine declarations that are the same. for different elements

#3

For example? Please guide me.

#4

For example you have:

.content {
  flex-grow: 1;
  /* keep separate for ie11 bug */
  flex-basis: calc(70% - 1rem);
  /* keep separate for ie11 bug */
  margin: 0 0 0 1rem;
}

.sidebar {
  flex-grow: 1;
  /* keep separate for ie11 bug */
  flex-basis: calc(30% - 1rem);
  /* keep separate for ie11 bug */
  background: #ccc;
  padding: 10px;
  border: 1px solid #000;
  margin: 0 0 0 1rem;
}

This could become:

.content,
.sidebar  {
  flex-grow: 1;
  flex-basis: calc(70% - 1rem);
  margin: 0 0 0 1rem;
}

.sidebar {
  flex-basis: calc(30% - 1rem);
  background: #ccc;
  padding: 10px;
  border: 1px solid #000;
}

flex-grow and margin are the same for both so there is no need to declare them twice. And there are more double declarations. Try to combine them where you can and declare the different properties separately

#5

The code written by me is slightly problematic. There are 9 opening Div’s and 7 closing div’s. I was trying to troubleshoot this, but I am ending in doldrums.

Please help me to fix this.

I think the technical structure of the code in Mr @PaulOB 's code is like this →

<div class="wrap">
	<div class="main">
		<div class="content">
		        Remaining code loop inside here.					
		</div>
	</div>
</div>

Please correct me if i am wrong.

Technical Flaw in flex-basis and calc
#6

What does the problematic code look like now? Can you post a link to it or a working page?

Have you tried indenting the HTML?

#7

Yes, I tried but got confused.

#8

Closing div’s are not equal in number to opening div’s.

This is the OP of Mr, @PaulOB →

#9

This is your code, html indented with 2 close <div>s added.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>html was missing 2 close divs</title>
<!--
https://codepen.io/codeispoetry/pen/QzWRYa
A Pen By codeispoetry
-->
    <style>
html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.wrap {
  max-width: 1280px;
  margin: 20px auto;
}

.main {
  display: flex;
  margin: 0 0 0 -1rem;
}


.content {
  flex-grow: 1;
  /* keep separate for ie11 bug */
  flex-basis: calc(70% - 1rem);
  /* keep separate for ie11 bug */
  margin: 0 0 0 1rem;
}

.sidebar {
  flex-grow: 1;
  /* keep separate for ie11 bug */
  flex-basis: calc(30% - 1rem);
  /* keep separate for ie11 bug */
  background: #ccc;
  padding: 10px;
  border: 1px solid #000;
  margin: 0 0 0 1rem;
}

.inner-content:first-child {
  background: #eee;
}

.inner-content .content {
  background: #eee;
  border: 1px solid #000;
  padding:10px;
}

.inner-content {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #000;
}

.inner-content:last-child {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

.main2 {
	padding:0;
	border:none;
}
/* example5*/

    </style>
</head>
<body>

<div class="wrap">
    <div class="main">
        <div class="content">
            <div class="inner-content">
                <h2>Main</h2>
                <p>Billions upon billions upon billions?</p>
            </div>
            <div class="inner-content main main2">
                <div class="content">
                    <h2>Main</h2>
                    <p>Billions upon billions upon billions?</p>
                </div>
                <div class="sidebar">
                    <h2>Sidebar</h2>
                    <p>Lorem Ipsum.</p>
                </div>
            </div>  
            <div class="inner-content main">
                <div class="content">
                    <h2>Main</h2>
                    <p>Billions upon billions upon billions?</p>
                </div>
            </div>   
        </div>
    </div> <!-- Added -->
</div> <!-- Added -->

</body>
</html>
#10

Sir,

Is the addition correct? Or we were suppose to remove two Div’s?

#11

I’m sorry, I don’t know how to answer that question. I entered when you were confused by 2 missing close divs, which I have added to your code. I am not aware of other issues. I don’t know why Paul’s code is included and I don’t know what you are trying to minimize. The code that I posted is valid. If that is not what you want, you will need to explain more to me or wait for someone who is familiar with your goal.

#12

Yes you were missing the closing divs for .wrap and .main.

Whether your code can be minimised further depends on your new requirements as the original was built for a specific purpose.

#13

Is it just me or is this starting to get confusing? The above quote refers to the second CodePen in your opening post… Does that mean that you want the layout to appear like in the second CodePen.

Edit: I’m sure the addition from @ronpat in post #9 is correct.