From 0fb968a88e5b282d18d1f3ab29c6b93f8e281b14 Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Mon, 22 Jan 2018 13:48:25 -0800 Subject: [PATCH 1/4] modified html and css --- index.html | 24 ++++++++++++++++++++++++ styles.css | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) diff --git a/index.html b/index.html index f74abbf..db63613 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,29 @@ +

Header

+
+

Placeholder

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..bdceb82 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,38 @@ +h1 { + text-align: center; + display: block; +} + +.div1 { + width: 50%; + border: solid 2px black; + box-sizing: border-box; + margin: 0px; + float: left; +} + +.div2 { + width: 50%; + border: solid 2px black; + box-sizing: border-box; + margin: 0px; + float: left; +} + +h2 { + display: inline-block; + margin: 5px; +} + +#modal { + float: right; + width: 40px; + height: 40px; + background-color: grey; + margin-top: 5px; + position: relative; +} + +p { + margin: 5px; +} \ No newline at end of file From 1f078ed2344336cf7340762e05bb0e2ed8974907 Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Mon, 22 Jan 2018 22:45:07 -0800 Subject: [PATCH 2/4] finished box model --- index.html | 2 +- styles.css | 21 ++++++++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index db63613..be36f78 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

Header

Placeholder

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. diff --git a/styles.css b/styles.css index bdceb82..0297e11 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,17 @@ +body { + margin: 0; + padding: 0; +} + h1 { text-align: center; - display: block; } .div1 { width: 50%; - border: solid 2px black; + border-left: 2px solid black; + border-top: 2px solid black; + border-bottom: 2px solid black; box-sizing: border-box; margin: 0px; float: left; @@ -13,7 +19,9 @@ h1 { .div2 { width: 50%; - border: solid 2px black; + border-left: 2px solid black; + border-top: 2px solid black; + border-bottom: 2px solid black; box-sizing: border-box; margin: 0px; float: left; @@ -26,11 +34,14 @@ h2 { #modal { float: right; - width: 40px; - height: 40px; + width: 50px; + height: 30px; background-color: grey; margin-top: 5px; position: relative; + text-align: center; + vertical-align: middle; + line-height: 30px; } p { From 7d1ee5d09cfe75eb92df0be36c730fc39705fa74 Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Tue, 23 Jan 2018 19:54:55 -0800 Subject: [PATCH 3/4] initial commit --- index.html | 54 +++++++++++++++++++-------------- styles.css | 88 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 76 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index be36f78..1e8e1b7 100644 --- a/index.html +++ b/index.html @@ -7,29 +7,37 @@ -

Header

-
-

Placeholder

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Lorem ipsum dolor sit amet. - Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. - Pellentesque dignissim enim sit amet venenatis urna cursus eget. - Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. - Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. - Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. - Rhoncus est pellentesque elit ullamcorper dignissim.

+
+

+
Header
+

+
+
+

Placeholder

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Lorem ipsum dolor sit amet. + Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. + Pellentesque dignissim enim sit amet venenatis urna cursus eget. + Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. + Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. + Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. + Rhoncus est pellentesque elit ullamcorper dignissim.

+
+
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Lorem ipsum dolor sit amet. - Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. - Pellentesque dignissim enim sit amet venenatis urna cursus eget. - Cursus euismod quis viverra nibh. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. - Nisi scelerisque eu ultrices vitae auctor. Tristique senectus et netus et malesuada fames ac. - Parturient montes nascetur ridiculus mus mauris vitae ultricies leo integer. - Rhoncus est pellentesque elit ullamcorper dignissim.

-
\ No newline at end of file diff --git a/styles.css b/styles.css index 0297e11..1e4f3c4 100644 --- a/styles.css +++ b/styles.css @@ -3,47 +3,49 @@ body { padding: 0; } -h1 { - text-align: center; -} - -.div1 { - width: 50%; - border-left: 2px solid black; - border-top: 2px solid black; - border-bottom: 2px solid black; - box-sizing: border-box; - margin: 0px; - float: left; -} - -.div2 { - width: 50%; - border-left: 2px solid black; - border-top: 2px solid black; - border-bottom: 2px solid black; - box-sizing: border-box; - margin: 0px; - float: left; -} - -h2 { - display: inline-block; - margin: 5px; -} - -#modal { - float: right; +.flex-container { + width: 100%; + display: flex; + flex-direction: column; + flex-wrap: wrap; + } + h1 { + margin: auto; + } + .flex-item-header { + flex: 1; + display: flex; + } + .headertxt { + margin: auto; + } + .flex-item-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + .flex-item { + flex: 1; + display: flex; + flex-wrap: wrap; + border-style: solid; + border-width: 2px; + } + h2 { + flex: 1; + padding: 2px; + } + #modal { + margin: auto; + justify-content: space-around; + background-color: gray; width: 50px; - height: 30px; - background-color: grey; - margin-top: 5px; - position: relative; - text-align: center; - vertical-align: middle; - line-height: 30px; -} - -p { - margin: 5px; -} \ No newline at end of file + height: 40px; + display: flex; + } + #modaltxt { + margin: auto; + } + p { + padding: 2px; + } \ No newline at end of file From 4f63a6f7bf217713443bf6f352176da8fdca96af Mon Sep 17 00:00:00 2001 From: Res Yeg Date: Tue, 23 Jan 2018 21:31:59 -0800 Subject: [PATCH 4/4] BEM refactor done --- index.html | 14 +++++++------- styles.css | 16 ++++++++-------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 1e8e1b7..b85d3fd 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,14 @@
-

-
Header
+

+
Header

-
-
+
+

Placeholder

- -
+

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet. diff --git a/styles.css b/styles.css index 1e4f3c4..6315eeb 100644 --- a/styles.css +++ b/styles.css @@ -9,22 +9,22 @@ body { flex-direction: column; flex-wrap: wrap; } - h1 { + /* h1 { margin: auto; - } - .flex-item-header { + } */ + .flex-container__flex-item-header1 { flex: 1; display: flex; } - .headertxt { + .flex-container__flex-item-header1-txt { margin: auto; } - .flex-item-container { + .flex-container__flex-item { display: flex; flex-direction: row; flex-wrap: wrap; } - .flex-item { + .flex-container__flex-item-subdiv { flex: 1; display: flex; flex-wrap: wrap; @@ -35,7 +35,7 @@ body { flex: 1; padding: 2px; } - #modal { + .flex-container__flex-item-subdiv-modal { margin: auto; justify-content: space-around; background-color: gray; @@ -43,7 +43,7 @@ body { height: 40px; display: flex; } - #modaltxt { + .flex-container__flex-item-subdiv-modal-modaltxt { margin: auto; } p {