jayseeg / brownfox Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 1.94 MB

The quick brown fox jumps over the lazy dog.

HTML 14.68% CSS 17.21% PHP 67.35% JavaScript 0.75%

brownfox's People

Contributors

Watchers

brownfox's Issues

store page

Build the contents of the store page in store.html. Remember to add the bread elements (header & footer).

Get Tom's album covers from his current webpage & save them into the img folder.

Add a store-items wrapper div, and then put an a tag like the one below in for each album:
remember to put the image file names & album names in

<div class="store-items">
  <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-item" target="_blank">
    <img src="/img/(put image file name here)" class="store-image" />
    <span class="store-item-title">(name of album here)</span>
  </a>
  <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-item" target="_blank">
    <img src="/img/(put image file name here)" class="store-image" />
    <span class="store-item-title">(name of album here)</span>
  </a>
  <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-item" target="_blank">
    <img src="/img/(put image file name here)" class="store-image" />
    <span class="store-item-title">(name of album here)</span>
  </a>
  <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-item" target="_blank">
    <img src="/img/(put image file name here)" class="store-image" />
    <span class="store-item-title">(name of album here)</span>
  </a>
  <a href="http://www.cdbaby.com/cd/tomhagerman" class="store-item" target="_blank">
    <img src="/img/(put image file name here)" class="store-image" />
    <span class="store-item-title">(name of album here)</span>
  </a>
</div>

bio ID FOR BIO PICTURE {

&:hover {
background-image: url('ENTER OTHER PICTURE');
}
}

Remaining tasks

Must haves
- server
- site architecture
- button
- main template
- color scheme
- relative path fix for css & js (/js/, /css/)
- css reset
- navigation (mobile/desktop)
- logo (mobile/desktop)
- header (mobile/desktop)
- footer (mobile/desktop)
- copy template (mobile/desktop)
- contact page (mobile/desktop)
- store page (mobile/desktop)
- media page (mobile/desktop)
- bio page (mobile/desktop)
- home page (mobile/desktop)
- discography page (mobile/desktop)
Nice to haves
- shows page (mobile/desktop)
- CMS
- slideshow (mobile/desktop)
- mobile specific video (mobile/desktop)

The contact page needs some love on the spacing of the form elements & their titles

http://173.255.211.63/contact.php

what margin do you want me to apply to the p tags?

Need site architecture in place

Setup a directory structure in our repo & get it merged into master by Jake.
All of these files should be empty unless they already exist.

this is the structure we need:

/
  index.html
  media.html
  store.html
  contact.html
  bio.html
  links.html
  discography.html
  shows.html
  /css
    reset.css
    main.css
    layout.css
    navigation.css
    components.css
  /js
    main.js
    slideshow.js
  /_templates
    bread.template.html
    media.template.html
    copy.template.html
    list.template.html
    form.template.html
  /_components
    links.component.html
    navigation.component.html
    logo.component.html
    list.component.html
    form.component.html
    video.component.html
    text.component.html
    photo.component.html

Where is the server? Have all changes been pushed and are we ready for the git freeze until I am done making all of the sites work?
Basically, are you working on anything that needs to be on the server before I make everything work, or can it wait until I make everything work (which probably involves changing every file, so merging is not an option) before you make any changes?

Make base html that we will use to make all the pages.

All of our pages should use the same base html structure. Build a template file for us to copy from for all other pages.

top of document
- doctype on top of document
  - <!doctype html>
- html tags to start our html document
  - <html>
- head to hold metadata
  - <head>
    - title tag that populates browser tabs
      - <title>Abandon All Hope</title>
    - viewport tag to make the site mobile friendly
      - <meta name="viewport" content="width=device-width, initial-scale=1">
    - css links for all of our css files (all pages need to include these in the same order)
      - <link rel="stylesheet" href="css/aFileName.css">
      - reset.css
      - main.css
      - layout.css
      - navigation.css
      - components.css
  - closing head tag
    - </head>
- opening body tag to hold what the users will see
  - <body>
- comments to tell us where to put things
  - 
  -  hi!
  - 
  -  * script tags to pull in our scripts
- script tags to pull in our javascript
  - jQuery from a cdn (content delivery network)
    - <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
  - <script src="js/aFileName.js"></script>
  - main.js
  - slideshow.js
- closing tags to complete our document
  - </body>
  - </html>

Server Things

@jayseeg I have pulled everything off of the server, so feel free to get rid of it if you want to.

assemble media page

Build the media page by assembling the bread components (header & footer) and making a series of youtube videos in the middle. Refer to the <iframe> Video (YouTube, Vimeo, etc.) section of https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Check that the page displays correctly on a narrow window (as narrow as an average smartphone), and then widen your window to make sure it works on desktop. If you need help with the styling, ask @jayseeg or @lbecerra99.

footer (mobile/desktop)

The site needs a footer to keep the copyright in.

in all existing pages & templates (work on it in one, then once it's complete, paste it into the other documents)

<footer>
  <p class="copyright">&copy; 2016 Tom Hagerman</p>
</footer>

in layout.css:

footer {
  (your layout style rules here)
}

in components.css:

.copyright {
  (your copyright style rules here)
}

Style the footer to match site colors & styles (ask @lbecerra99 for input).

Remember to work on mobile first, then desktop
Ask @lbecerra99 for guidance to resize browser to mobile size & to write a media query for desktop.

assemble bio page

combine bread elements (header & footer) with bio information using the html from copy.template.html

Ask @lbecerra99 where to get header, and ask @exsidea where to get footer & how to use the copy template.

The text on the copy template is a little hard to read

http://173.255.211.63/copy.template.html

The text is probably too tight (search for mdn line-height), and the font is probably a little too small.

style contact page

Ask @Delta-Duhr where to find his contact form. Assemble it with the rest of the bread components (header & footer).

Style the page for mobile widths, then check to see what can be easily improved for desktop widths.

header (mobile/desktop)

We need a header to keep the logo & navigation in.

in each page & template (get it completed in one, then copy paste):

<header>
  (use logo from https://github.com/jayseeg/brownFox/issues/25)
  <nav>
    (use @exsidea's navigation list once it's been merged)
  </nav>
</header>

in layout.css:

header {
  (put header styles here)
}

Remember to work on mobile first, then desktop
Ask @jayseeg for guidance to resize browser to mobile size & to write a media query for desktop.

.media-wrapper is a little too narrow on desktop

.media-wrapper is the class of the div that keeps all of the content centered in the site,... it should probably be the same width as the header. Please respond with the updated css for .media-wrapper.

it's currently:

.media-wrapper {
  margin: 0 auto;
  max-width: 800px;
}

Need staging & production server environments.

Server requirements

packages
- nvm
- git
npm (node package manager)
- http-server
directory structure
- /var/www/brown_fox/staging
- /var/www/brown_fox/production
git repos cloned into each folder with appropriate branch selected
- staging: origin/staging
- production: origin/master

CSS STUFF

video{
padding: 1em;
}

bio ID FOR BIO PICTURE {

&:hover {
background-image: url('ENTER OTHER PICTURE');
}
}

Numerous design things to work on if there is time (3am anyone)

Order of links reverses when screen is made smaller.
It is more intuative for home to be at the top, but when viewed on a small screen the home is on the bottom, as the order of the links becomes reversed.

Other design issues:

Link does not extend to the full range of the nav button, it changes color outside of where the link is. (move your mouse to the edge area of the button and there is a fairly large area where the color has changed but there is no link). Fix: make the linked element the same one as the one that changes color, so that when you mouseover the color changes and you are over the right element to click the links.
Footer does not adhere to bottom of page when bottom of page is lower. If it could adhere to the bottom of the page or the bottom of the content, whichever is lower, that would be great. (google it, there are some good solutions online)
Also if we could get icons in the browser that would be great!
On mobile the background tiling is separated by a pixel, which is making a weird grid effect...

Update content

Nice to have:

Remove empty Entries from saved file

relative path fix for css & js (/js/, /css/)

The paths for our CSS & JS will break in subfolders because they are relative to the file they are in.

Wrong

<link rel="stylesheet" href="css/reset.css">

<script src="js/main.js"></script>

Right

<link rel="stylesheet" href="/css/reset.css">

<script src="/js/main.js"></script>

Each file with these types of tags needs to be updated to have a leading /

navigation (mobile/desktop)

We need a mobile first navigation. Use the guide on css-tricks.com to get a functional menu working on mobile, then on desktop. Once complete, update menu styles to match site color palette.

Start once @exsidea's navigation markup is merged.

Store needs some design love

take a look at: http://173.255.211.63/store.html ,... it definitely needs some help

add a style reset

Google for Eric Meyer's css reset, it's the industry standard.

Copy/paste the reset into our reset.css file.

PRESENTATION!! 👏🏻👏🏻👏🏻👏🏻

Hey @lbecerra99, @Delta-Duhr, & @exsidea. Please chime in in the comments if you read this tonight.

Here's the basic structure of your presentation, but this is just my idea,.... you should definitely put your own spin on it, or even throw it out & do your own thing! I'm just going to write down a loose outline, please think about & practice what you'll say & do (shoot for a minute per section, but it's ok if you come up short).

The basic story is:

Tom's site is lacking some key info.
There is a lot of money to be made by such a talented musician.
The people with the money aren't able to learn enough about Tom to give him the money.
Our website & backend can make it easy for Tom to update his site.
When his site is up to date, the money rains down.

Presso

Intro to the problem—@lbecerra99
- fans and commercial interests are looking for information about Tom & his music
- front page was empty
- no bio or about page
- no real way to tell who Tom was or what his commercial work was without watching 16 videos
Intro to the opportunities—@Delta-Duhr
- Tom is looking to have money rain down on him
- video producers can keep Tom busy scoring ads
- fans can buy albums and attend shows or performances
The conflict—@lbecerra99
- fans who are looking to learn more about Tom & his music want more than his old site is giving them
- producers looking for talent for their projects need more information about him than they can get from watching his videos
The realization—@Delta-Duhr
- Tom's site needs to make it easy for him to update content on his own
- give an example of uploading new content on the fly
- talk about how the backend takes in input & publishes it to the site
The transformation—@exsidea
- fans and producers can learn about Tom & what he's up to now because he can keep his site up to date with ease
- money will rain down

logo (mobile/desktop)

We need a logo for the site. We decided to use a simple text logo. Experiment with available fonts, sizes, and weights.

in each template & page:

<h1 class="logo" id="logo">Tom Hagerman</h1>

in components.css:

.logo {
  (put your styles here)
}

Remember to work on mobile first, then desktop
Ask @jayseeg for guidance to resize browser to mobile size & to write a media query for desktop.

copy template (mobile/desktop)

We need a copy template before we can work on the homepage. We decided to use a format of heading, image, text.

make a new directory for images & put our image files in it (image files are here):

cd ~/site/brownFox
mkdir img

in the body tag of copy.template.html:

<div class="wrapper">
  <div class="content copy-page">
    <h2 class="page-title copy-page-title">Copy Page Title</h2>
    <p class="page-intro copy-page-intro">
      Some placeholder text that would be like a sentence under the page title.
    </p>
    <img class="main-image copy-page-main-image" src="/img/(filename)" />
    <p class="page-copy copy-page-copy">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit augue. Sed ac leo odio. Suspendisse luctus mi sed nibh tempor sagittis. Pellentesque vel laoreet turpis, in varius ipsum. Mauris eget eleifend metus, eu ornare purus. Vivamus tincidunt tortor ac luctus eleifend. Nullam gravida ultricies justo non pulvinar. Sed finibus suscipit mauris ut ullamcorper. Pellentesque ligula ipsum, dapibus eget ultricies non, vehicula sit amet nunc. Suspendisse metus neque, rhoncus sit amet tristique a, facilisis ac felis.
    </p>
    <p class="page-copy copy-page-copy">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit augue. Sed ac leo odio. Suspendisse luctus mi sed nibh tempor sagittis. Pellentesque vel laoreet turpis, in varius ipsum. Mauris eget eleifend metus, eu ornare purus. Vivamus tincidunt tortor ac luctus eleifend. Nullam gravida ultricies justo non pulvinar. Sed finibus suscipit mauris ut ullamcorper. Pellentesque ligula ipsum, dapibus eget ultricies non, vehicula sit amet nunc. Suspendisse metus neque, rhoncus sit amet tristique a, facilisis ac felis.
    </p>
    <p class="page-copy copy-page-copy">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac hendrerit augue. Sed ac leo odio. Suspendisse luctus mi sed nibh tempor sagittis. Pellentesque vel laoreet turpis, in varius ipsum. Mauris eget eleifend metus, eu ornare purus. Vivamus tincidunt tortor ac luctus eleifend. Nullam gravida ultricies justo non pulvinar. Sed finibus suscipit mauris ut ullamcorper. Pellentesque ligula ipsum, dapibus eget ultricies non, vehicula sit amet nunc. Suspendisse metus neque, rhoncus sit amet tristique a, facilisis ac felis.
    </p>
  </div>
</div>

in layout.css:

.wrapper {
  (put wrapper styles here if you need any)
}
.content {
  (put content styles here if you need any)
}
.content.copy-page {
  (put content styles that are specific to a copy page here if you need any)
}

in components.css:

.page-title {
  (put page title styles here if you need any)
}
.page-title.copy-page-title {
  (put page title styles that are specific to the copy page here if you need any)
}
.page-intro {
  (put page intro styles here if you need any)
}
.page-intro.copy-page-intro {
  (put page intro styles that are specific to the copy page here if you need any)
}
.main-image {
  (put main image styles here if you need any)
}
.main-image.copy-page-main-image {
  (put main image styles that are specific to the copy page here if you need any)
}
.page-copy {
  (put page copy styles here if you need any)
}
.page-copy.copy-page-copy {
  (put page copy styles that are specific to the copy page here if you need any)
}

Remember to work on mobile first, then desktop
Ask @jayseeg for guidance to resize browser to mobile size & to write a media query for desktop.

jayseeg / brownfox Goto Github PK

brownfox's People

Contributors

Watchers

brownfox's Issues

bio ID FOR BIO PICTURE {

bio ID FOR BIO PICTURE {

The basic story is:

Presso

Recommend Projects

Recommend Topics

Recommend Org