Skip to content

Commit

Permalink
Style: minor edits
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessicarush
jessicarush committed Oct 8, 2021
1 parent b482417 commit a365160
Show file tree
Hide file tree
Showing 5 changed files with 226 additions and 222 deletions.
5 changes: 5 additions & 0 deletions css_columns/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,11 @@ a:active {
height: 900px; */
}

.container-c {
column-width: 150px;
/* column-count: 3; */
}


/* COMPONENTS ------------------------------------------------------------- */

Expand Down
82 changes: 82 additions & 0 deletions css_columns/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,89 @@ <h1 class="spanning-element">Spanning element</h1>
<p>
Donec id odio fringilla, convallis mi eget, porttitor nisi. Suspendisse ultricies aliquet ipsum, et interdum ligula. Nullam dignissim ut ipsum non faucibus. Donec accumsan consequat justo, ultricies iaculis risus lobortis laoreet. Sed nec placerat est. Duis tincidunt laoreet libero a pellentesque. Aliquam erat volutpat. Nunc luctus diam nunc. Aenean elementum purus et erat gravida, vel dictum lacus volutpat. Duis neque ligula, cursus a lobortis eget, malesuada eget nisl. Fusce commodo rutrum magna, placerat viverra massa eleifend sit amet. Maecenas nec rutrum ante.
</p>
</div>

<div class="container-c base">
<div>
<input type="checkbox" id="one" name="one" value="one">
<label for="one">one</label>
</div>
<div>
<input type="checkbox" id="two" name="two" value="two">
<label for="two">two</label>
</div>
<div>
<input type="checkbox" id="twelve" name="three" value="three">
<label for="three">three</label>
</div>
<div>
<input type="checkbox" id="four" name="four" value="four">
<label for="four">four</label>
</div>
<div>
<input type="checkbox" id="five" name="five" value="five">
<label for="five">five</label>
</div>
<div>
<input type="checkbox" id="six" name="six" value="six">
<label for="six">six</label>
</div>
<div>
<input type="checkbox" id="seven" name="seven" value="seven">
<label for="seven">seven</label>
</div>
<div>
<input type="checkbox" id="eight" name="eight" value="eight">
<label for="eight">eight</label>
</div>
<div>
<input type="checkbox" id="nine" name="nine" value="nine">
<label for="nine">nine</label>
</div>
<div>
<input type="checkbox" id="ten" name="ten" value="ten">
<label for="ten">ten</label>
</div>
<div>
<input type="checkbox" id="eleven" name="eleven" value="eleven">
<label for="eleven">eleven</label>
</div>
<div>
<input type="checkbox" id="twelve" name="twelve" value="twelve">
<label for="twelve">twelve</label>
</div>
<div>
<input type="checkbox" id="thirteen" name="thirteen" value="thirteen">
<label for="thirteen">thirteen</label>
</div>
<div>
<input type="checkbox" id="fourteen" name="fourteen" value="fourteen">
<label for="fourteen">fourteen</label>
</div>
<div>
<input type="checkbox" id="fifteen" name="fifteen" value="fifteen">
<label for="fifteen">fifteen</label>
</div>
<div>
<input type="checkbox" id="sixteen" name="sixteen" value="sixteen">
<label for="sixteen">sixteen</label>
</div>
<div>
<input type="checkbox" id="seventeen" name="seventeen" value="seventeen">
<label for="seventeen">seventeen</label>
</div>
<div>
<input type="checkbox" id="eighteen" name="eighteen" value="eighteen">
<label for="eighteen">eighteen</label>
</div>
<div>
<input type="checkbox" id="nineteen" name="nineteen" value="nineteen">
<label for="nineteen">nineteen</label>
</div>
<div>
<input type="checkbox" id="twenty" name="twenty" value="twenty">
<label for="twenty">twenty</label>
</div>
</div>

</body>
Expand Down
7 changes: 2 additions & 5 deletions css_flexbox/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,8 @@ a:active {
margin: 15px auto;
}

.fixed {
border: solid 2px aquamarine;
width: 800px;
height: 800px;
margin: 15px auto;
.fixed-height {
height: 350px;
}

.box {
Expand Down
242 changes: 127 additions & 115 deletions css_flexbox/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,136 +19,148 @@ <h1> Flexbox.</h1>
<p>Though you <em>could</em> create entire page layouts with flexbox, it's most suitable for working with interface elements and smaller components.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Mozillas guide on Flexbox Layouts</a><br>
<a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">A Flexbox playground.</a></p>
</div>
<div class="container-a__content-c box">
<p>Hi</p>
</div>
</div>
<div class="container-a__content-c box">
<p>Hi</p>
</div>
</div>


<div class="container-b flexible">
<div class="container-b__content-a box">
<h1>Flexbox Container Properties.</h1>
</div>
<div class="container-b__content-b box">
<code>
<ul>
<li>display: flexbox;</li>
<li>flex-direction: row-reverse;</li>
<li>justify-content: space-between;</li>
<li>align-items: center;</li>
<li>flex-wrap: wrap;</li>
<li class="comment">/* Note: align-content has no effect when there is only one line of flex items */</li>
<li>align-content: space-between;</li>
<li class="comment"><em>/* (Shorthand) flex-flow: flex-direction flex-wrap; */</em></li>
<li>flex-flow: row wrap;</li>
<li class="comment"><em>/* (Shorthand) place-content: align-content justify-content; */</em></li>
<li>place-content: end space-between;</li>
</ul>
</code>
</div>
<div class="container-b__content-c box">
<p>Hi</p>
</div>
<div class="container-b flexible">
<div class="container-b__content-a box">
<h1>Flexbox Container Properties.</h1>
</div>
<div class="container-b__content-b box">
<code>
<ul>
<li>display: flexbox;</li>
<li>flex-direction: row-reverse;</li>
<li>justify-content: space-between;</li>
<li>align-items: center;</li>
<li>flex-wrap: wrap;</li>
<li class="comment">/* Note: align-content has no effect when there is only one line of flex items */</li>
<li>align-content: space-between;</li>
<li class="comment"><em>/* (Shorthand) flex-flow: flex-direction flex-wrap; */</em></li>
<li>flex-flow: row wrap;</li>
<li class="comment"><em>/* (Shorthand) place-content: align-content justify-content; */</em></li>
<li>place-content: end space-between;</li>
</ul>
</code>
</div>
<div class="container-b__content-c box">
<p>Hi</p>
</div>
</div>


<div class="container-c flexible">
<div class="container-c__content-a box">
<h1>Flexbox Items Properties.</h1>
</div>
<div class="container-c__content-b box">
<code>
<ul>
<li>order: 1;</li>
<li>flex-grow: 1;</li>
<li>flex-shrink: 1;</li>
<li>flex-basis: 200px;</li>
<li>align-self: center;</li>
<li class="comment"><em>/* (Shorthand) flex: flex-grow flex-shrink flex-basis; */</em></li>
<li>flex: 2 0 0;</li>
</ul>
</code>
</div>
<div class="container-c__content-c box">
<p>Hi</p>
</div>
<div class="container-c flexible">
<div class="container-c__content-a box">
<h1>Flexbox Items Properties.</h1>
</div>
<div class="container-c__content-b box">
<code>
<ul>
<li>order: 1;</li>
<li>flex-grow: 1;</li>
<li>flex-shrink: 1;</li>
<li>flex-basis: 200px;</li>
<li>align-self: center;</li>
<li class="comment"><em>/* (Shorthand) flex: flex-grow flex-shrink flex-basis; */</em></li>
<li>flex: 2 0 0;</li>
</ul>
</code>
</div>
<div class="container-c__content-c box">
<p>Hi</p>
</div>
</div>

<div class="container-d flexible">
<div class="container-d__content-a box">
<p>A</p>
</div>
<div class="container-d__content-b box">
<p>B</p>
</div>
<div class="container-d__content-c box">
<p>C</p>
</div>
<div class="container-d flexible">
<div class="container-d__content-a box">
<p>A</p>
</div>
<div class="container-d__content-b box">
<p>B</p>
</div>
<div class="container-d__content-c box">
<p>C</p>
</div>
</div>

<div class="container-e fixed">
<div class="container-e__content-a box">
<p>A</p>
</div>
<div class="container-e__content-b box">
<p>B</p>
</div>
<div class="container-e__content-c box">
<p>C</p>
</div>
<div class="container-e flexible fixed-height">
<div class="container-e__content-a box">
<p>A</p>
</div>
<div class="container-e__content-b box">
<p>B</p>
</div>
<div class="container-e__content-c box">
<p>C</p>
</div>
</div>

<div class="container-f fixed">
<div class="container-f__content-a box">
<p>A</p>
</div>
<div class="container-f__content-b box">
<p>B</p>
</div>
<div class="container-f__content-c box">
<p>C</p>
</div>
<div class="container-f flexible fixed-height">
<div class="container-f__content-a box">
<p>A</p>
</div>
<div class="container-f__content-b box">
<p>B</p>
</div>
<div class="container-f__content-c box">
<p>C</p>
</div>
</div>

<div class="container-g flexible">
<div class="container-g__content-a box">
<p>A</p>
</div>
<div class="container-g__content-b box">
<p>B</p>
</div>
<div class="container-g__content-c box">
<p>C</p>
</div>
<div class="container-g__content-d box">
<p>D</p>
</div>
<div class="container-g__content-e box">
<p>E</p>
</div>
<div class="container-g flexible">
<div class="container-g__content-a box">
<p>A</p>
</div>
<div class="container-g__content-b box">
<p>B</p>
</div>
<div class="container-g__content-c box">
<p>C</p>
</div>
<div class="container-g__content-d box">
<p>D</p>
</div>
<div class="container-g__content-e box">
<p>E</p>
</div>
</div>

<div class="container-h fixed">
<div class="container-h__content-a box">
<p>A</p>
</div>
<div class="container-h__content-b box">
<p>B</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h flexible">
<div class="container-h__content-a box">
<p>A</p>
</div>
<div class="container-h__content-b box">
<p>B</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
<div class="container-h__content-c box">
<p>C</p>
</div>
</div>

</body>
</html>
</body>
</html>
Loading

0 comments on commit a365160

Please sign in to comment.