Skip to content

Loann & Shane's Refactor #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skalles wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Loann & Shane's Refactor #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions Loann-Shane/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
+### A project for Code Fellows B25 by Loann Lam and Shane Kalles.
+
+Refactor a team's project.
+
+We refactored Levi and Galen's CSS project. We found many redundant naming schemes within the main element. Most were to style each article rather than think of each as modular. We continued to use the column choice that they had made.
+
+We were able to remove a bit of CSS code from the main and normalizer files. and found that we could remove extra class names and refer to the element tags and make our style choices to the children or classes from there.
+
+Resources:
+* [UX Design](http://www.anotheruiguy.com/ux-design-dev/_book/)
+* [CSS Selectors](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
+

61 changes: 61 additions & 0 deletions Loann-Shane/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Core CSS Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.min.css">
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Helvetica' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<section class="widget col span_8_of_8">
<img class="widget__img" src="placeholder_logo.png">
<div class="widget__header">
<input class="widget__input" type="search">
<input class="widget__input--btn" type="button">
</div>
<nav class="span_8_of_8">
<a href="#">Blog</a>
<a href="#">Video</a>
<a href="#">Links</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</section>
</header>
<main class="col span_8_of_8">
<section class="article-roll col span_5_of_8">
<article class="article-roll__blog-post">
<time datetime="2014-11-04">November 4, 2014</time>
<h1>Article Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#">Read More...</a></p>
</article>
<article class="article-roll__blog-post">
<time datetime="2014-11-04">November 4, 2014</time>
<h1>Article Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#">Read More...</a></p>
</article>
<article class="article-roll__blog-post">
<time datetime="2014-11-04">November 4, 2014</time>
<h1>Article Title</h1>
<p><figure><img src="placeholder_logo.png"></figure>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#">Read More...</a></p>
</article>
</section>
<aside class="module-roll col span_3_of_8">
<section class="module-roll__item">
<h2>What is the Ipsum, here?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="module-roll__item">
<h2>What is the Ipsum, here?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</aside>
</main>
</body>
</html>
149 changes: 149 additions & 0 deletions Loann-Shane/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
/* COLUMN SETUP */
.col {
float: left;
margin: 1% 0 1% 3%;
}
.col:first-child { margin-left: 0; }

/****** BASE STYLES ********/

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #333;
font: 14px/21px 'Open Sans', 'Roboto', Helvetica, sans-serif,;;
}
a, a:visited {
color: #000000;
text-decoration: underline;
}
a:hover, a.on {
color: purple;
background-color: lightgray;
}

/****** HEADER ********/

header{
width: 100%;
background-color: white;
}
.widget img {
margin-left: 4%;
}
.widget__header {
float: right;
margin: 2% 5% 2% 0;
background-color: white;
}
.widget__input {
display: inline-block;
border: none;
border-bottom: 1px solid #999;
}
.widget__input--btn {
display: inline-block;
width: 20px;
background-color: transparent;
background-image: url('search_btn@2x.png');
background-size: 20px;
background-repeat: no-repeat;
border: none;
}

/****** NAVIGATION ********/

nav {
width: 100%;
background-color: hsla(170, 50%, 50%, 1);
}
nav a {
text-align: center;
display: inline-block;
background-color: #eee;
margin: 1% 3% 1% 3%;
text-transform: uppercase;
padding: 1% 2%;
text-decoration: none;
}
nav a:hover {
background-color: white;
color: black;
}

/****** BLOG POSTS ********/

.article-roll {
width: 100%;
position: relative;
display: inline-block;
background-color: lightgrey;
}
.article-roll__blog-post {
padding: 1% 3%;
margin: 2%;
background-color: white;
}
.article-roll__blog-post img {
width: 35%;
float: right;
margin: 0 0 20% 5%;
}

/****** ASIDES ********/

.module-roll {
width: 100%;
background-color: hsla(170, 50%, 50%, 1);
}
.module-roll__item {
background-color: hsla(170, 50%, 95%, 1);
padding: 4% 8%;
margin: 4%;
}

/* GRID OF EIGHT */
.span_8_of_8 {
width: 100%;
}
.span_5_of_8 {
width: 56%;
}
.span_3_of_8 {
width: 35%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_8_of_8 {
width: 100%;
}
.span_5_of_8 {
width: 100%;
}
.span_3_of_8 {
width: 100%;
}
nav{
margin: 1%;
}
nav a {
display: block;
text-align: center;
width: 100%
}
.widget__input,
.widget__input--btn{
display: none;
}
}
Loading