From b2acdd7a761df4ee1fdf6db4f961336dbfe10cdc Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 15:09:18 -0600 Subject: [PATCH 1/7] finished the first assignment with the box model --- boxmodel/index.html | 24 ++++++++++++++++ boxmodel/styles.css | 69 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 boxmodel/index.html create mode 100644 boxmodel/styles.css diff --git a/boxmodel/index.html b/boxmodel/index.html new file mode 100644 index 0000000..6b71f22 --- /dev/null +++ b/boxmodel/index.html @@ -0,0 +1,24 @@ + + + + Aaron King...DOM + + + + + +

Header

+
+
+ New! +
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+ + + \ No newline at end of file diff --git a/boxmodel/styles.css b/boxmodel/styles.css new file mode 100644 index 0000000..0224eb9 --- /dev/null +++ b/boxmodel/styles.css @@ -0,0 +1,69 @@ +html, body, p, h1, h2 +{ + margin: 0px; + padding: 0px; + border: 0px; +} + + +h1 +{ + text-align: center; + padding: 10px; +} + +h2 +{ + padding: 10px; +} + +p +{ + padding: 10px; +} + +.post +{ + display: inline-block; + width: 50%; + box-sizing: border-box; + float: left; + border: 3px solid black; +} + +.new +{ + float: right; + background-color: gray; + margin-top: 5px; + padding: 10px; +} + +.right +{ + border-width: 3px 3px 3px 1.5px; +} + +.left +{ + border-width: 3px 1.5px 3px 3px; +} + +@media (max-width: 600px) { + .post + { + width: 100%; + } +} + +@media (min-width: 1920px) { + .post + { + width: 800px; + } + .left + { + margin-left: 1 auto; + } +} + \ No newline at end of file From 14f1bbccd9860faafe9dd9c2e39f6c6f58011f0d Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 15:41:01 -0600 Subject: [PATCH 2/7] initial commit to teh flexbox branch --- flexbox/index.html | 24 ++++++++++++++++ flexbox/styles.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 flexbox/index.html create mode 100644 flexbox/styles.css diff --git a/flexbox/index.html b/flexbox/index.html new file mode 100644 index 0000000..6b71f22 --- /dev/null +++ b/flexbox/index.html @@ -0,0 +1,24 @@ + + + + Aaron King...DOM + + + + + +

Header

+
+
+ New! +
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+ + + \ No newline at end of file diff --git a/flexbox/styles.css b/flexbox/styles.css new file mode 100644 index 0000000..0224eb9 --- /dev/null +++ b/flexbox/styles.css @@ -0,0 +1,69 @@ +html, body, p, h1, h2 +{ + margin: 0px; + padding: 0px; + border: 0px; +} + + +h1 +{ + text-align: center; + padding: 10px; +} + +h2 +{ + padding: 10px; +} + +p +{ + padding: 10px; +} + +.post +{ + display: inline-block; + width: 50%; + box-sizing: border-box; + float: left; + border: 3px solid black; +} + +.new +{ + float: right; + background-color: gray; + margin-top: 5px; + padding: 10px; +} + +.right +{ + border-width: 3px 3px 3px 1.5px; +} + +.left +{ + border-width: 3px 1.5px 3px 3px; +} + +@media (max-width: 600px) { + .post + { + width: 100%; + } +} + +@media (min-width: 1920px) { + .post + { + width: 800px; + } + .left + { + margin-left: 1 auto; + } +} + \ No newline at end of file From 727cae9735333293c35cabe78537c0c50677e10d Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 17:41:19 -0600 Subject: [PATCH 3/7] setup html --- index.html | 35 ++++++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index f74abbf..f836873 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,24 @@ - - - - Introduction to the DOM - - - - - - - \ No newline at end of file +- + - + - + - Aaron King...DOM + - + - + - + - + - + -

Header

+ -
+ -
+ - New! + -
+ -

Placeholder

+ -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+ -
+ -
+ -

Placeholder

+ -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+ -
+ - + - + - \ No newline at end of file From fb41da16a3beb024404c34e53df8e2c7aa2fe00e Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 17:44:28 -0600 Subject: [PATCH 4/7] cleaning up unnecessary directory making --- boxmodel/index.html | 24 ---------------- boxmodel/styles.css | 69 --------------------------------------------- flexbox/index.html | 24 ---------------- flexbox/styles.css | 69 --------------------------------------------- 4 files changed, 186 deletions(-) delete mode 100644 boxmodel/index.html delete mode 100644 boxmodel/styles.css delete mode 100644 flexbox/index.html delete mode 100644 flexbox/styles.css diff --git a/boxmodel/index.html b/boxmodel/index.html deleted file mode 100644 index 6b71f22..0000000 --- a/boxmodel/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - Aaron King...DOM - - - - - -

Header

-
-
- New! -
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
- - - \ No newline at end of file diff --git a/boxmodel/styles.css b/boxmodel/styles.css deleted file mode 100644 index 0224eb9..0000000 --- a/boxmodel/styles.css +++ /dev/null @@ -1,69 +0,0 @@ -html, body, p, h1, h2 -{ - margin: 0px; - padding: 0px; - border: 0px; -} - - -h1 -{ - text-align: center; - padding: 10px; -} - -h2 -{ - padding: 10px; -} - -p -{ - padding: 10px; -} - -.post -{ - display: inline-block; - width: 50%; - box-sizing: border-box; - float: left; - border: 3px solid black; -} - -.new -{ - float: right; - background-color: gray; - margin-top: 5px; - padding: 10px; -} - -.right -{ - border-width: 3px 3px 3px 1.5px; -} - -.left -{ - border-width: 3px 1.5px 3px 3px; -} - -@media (max-width: 600px) { - .post - { - width: 100%; - } -} - -@media (min-width: 1920px) { - .post - { - width: 800px; - } - .left - { - margin-left: 1 auto; - } -} - \ No newline at end of file diff --git a/flexbox/index.html b/flexbox/index.html deleted file mode 100644 index 6b71f22..0000000 --- a/flexbox/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - Aaron King...DOM - - - - - -

Header

-
-
- New! -
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
- - - \ No newline at end of file diff --git a/flexbox/styles.css b/flexbox/styles.css deleted file mode 100644 index 0224eb9..0000000 --- a/flexbox/styles.css +++ /dev/null @@ -1,69 +0,0 @@ -html, body, p, h1, h2 -{ - margin: 0px; - padding: 0px; - border: 0px; -} - - -h1 -{ - text-align: center; - padding: 10px; -} - -h2 -{ - padding: 10px; -} - -p -{ - padding: 10px; -} - -.post -{ - display: inline-block; - width: 50%; - box-sizing: border-box; - float: left; - border: 3px solid black; -} - -.new -{ - float: right; - background-color: gray; - margin-top: 5px; - padding: 10px; -} - -.right -{ - border-width: 3px 3px 3px 1.5px; -} - -.left -{ - border-width: 3px 1.5px 3px 3px; -} - -@media (max-width: 600px) { - .post - { - width: 100%; - } -} - -@media (min-width: 1920px) { - .post - { - width: 800px; - } - .left - { - margin-left: 1 auto; - } -} - \ No newline at end of file From ab95abde54f17765e7cf54111c6a9cecdb338809 Mon Sep 17 00:00:00 2001 From: Arkoma Date: Mon, 22 Jan 2018 22:10:19 -0600 Subject: [PATCH 5/7] I got it pretty close to the mockup but I had to do something funky with percentages and I still cannot get the border of the container to go all the way to the edge of the page --- index.html | 49 ++++++++++++++++++++++--------------------- styles.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 86 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index f836873..6b37f6c 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,25 @@ -- - - - - - - Aaron King...DOM - - - - - - - - - - - -

Header

- -
- -
- - New! - -
- -

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

- -
- -
- -

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

- -
- - - - - - \ No newline at end of file + + + + Aaron King...DOM + + + + +

Header

+
+
+
+

Placeholder

+
New!
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a6383d3 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,61 @@ +html, p, h1, h2 +{ + display: flex; + margin: 0; + padding: 0; +} + +h1 +{ + display: flex; + justify-content: center; + padding: 10px; +} + +h2 +{ + display: flex; + padding-left: 10px; + height: 50px; +} + +p +{ + display: flex; + padding: 0 0 10px 10px; +} + +.container +{ + display: flex; + flex-grow: 100%; +} + +.post +{ + display: flex; + border: solid black 2px; + align-items: flex-start; + flex-direction: column; +} + +.new +{ + display: flex; + background-color: gray; + margin-top: 5px; + padding: 10px; + align-self: flex-start; +} + +.placeholder +{ + display: flex; + width: 100%; +} + +.placeholderfix +{ + display: flex; + width: 100%; +} \ No newline at end of file From 19c64e7a13a835797954212e00cbec8c5db4c734 Mon Sep 17 00:00:00 2001 From: Arkoma Date: Tue, 23 Jan 2018 13:32:50 -0600 Subject: [PATCH 6/7] refactor of the html file to account for the file structure --- index.html | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 6b37f6c..62331bf 100644 --- a/index.html +++ b/index.html @@ -6,19 +6,28 @@ -

Header

-
+
+
+ Header +
+
+
+
+
+ Placeholder
New!
+
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure architecto, et hic saepe, maiores fugiat asperiores eum est consectetur assumenda voluptates, provident facere cumque molestiae maxime neque dolorum quod repellendus. +
+
-
-

Placeholder

-
New!
+
+ Placeholder
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc libero. Donec dignissim turpis eget ipsum volutpat, non egestas risus fermentum. Etiam bibendum, eros sed interdum pulvinar, metus sapien ultricies justo, at accumsan lorem odio vitae sapien. Donec commodo sodales hendrerit. Vestibulum id tempor nisi, eget consequat sapien. Aenean a tincidunt nisi, non congue risus. Pellentesque ut sem vitae quam accumsan posuere id a nisl. Nam vulputate tellus ullamcorper tortor eleifend varius. Fusce fringilla sit amet sem ut facilisis. Curabitur laoreet fringilla metus suscipit pharetra.

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, natus numquam magnam eveniet distinctio facere possimus tenetur ducimus nobis mollitia, nisi impedit voluptates eius nam accusantium vel est alias? Sint.
+
From b82f408f446020c76d600e8ebdd72d55db1d6e9d Mon Sep 17 00:00:00 2001 From: Arkoma Date: Tue, 23 Jan 2018 15:07:14 -0600 Subject: [PATCH 7/7] refactored flexbox to be both BEM compliant and mobile first responsive design --- index.html | 3 ++- styles.css | 61 ++++++++++++++++++++++++++++++------------------------ 2 files changed, 36 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 62331bf..c570099 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,9 @@
- Placeholder
New!
+
Placeholder
+
New!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure architecto, et hic saepe, maiores fugiat asperiores eum est consectetur assumenda voluptates, provident facere cumque molestiae maxime neque dolorum quod repellendus.
diff --git a/styles.css b/styles.css index a6383d3..4bfc287 100644 --- a/styles.css +++ b/styles.css @@ -1,61 +1,68 @@ -html, p, h1, h2 +body { - display: flex; margin: 0; padding: 0; } -h1 +.header { - display: flex; - justify-content: center; - padding: 10px; -} - -h2 -{ - display: flex; - padding-left: 10px; - height: 50px; + border: solid black 3px; } -p +.header__title { - display: flex; - padding: 0 0 10px 10px; + font-size: 36px; + text-align: center; + padding: 15px; } -.container +.content-container { display: flex; - flex-grow: 100%; + flex-direction: column; } .post { display: flex; border: solid black 2px; - align-items: flex-start; flex-direction: column; } +.post__title +{ + display: flex; + font-size: 23px; + padding-left: 10px; + +} + +.post__copy +{ + display: flex; + padding: 15px; +} + .new { display: flex; background-color: gray; - margin-top: 5px; padding: 10px; - align-self: flex-start; + align-self: flex-end; + position: absolute; + top: 85px; } -.placeholder +.new--red-label { - display: flex; - width: 100%; + color: red; } -.placeholderfix +@media (min-width: 900px) { - display: flex; - width: 100%; + .content-container + { + display: flex; + flex-direction: row; + } } \ No newline at end of file