Webb Food Services

Production

Posted by Justin Bernard on February 24, 2015

new project, redesigning the entire webb site

initial page files/fonts/etc
http://cloud.fleeangrybear.com/373u3V1W1b2B

he made this in illus, see if there is an easy way to take the ai and convert to a psd, its just so much easier to slice and dice for web from psd than illus...

Comments

Justin Bernard on February 25, 2015:

pull this down, supposed to be all the files for the site.  not sure if it includes the above too, or its additional stuff

https://dl.dropboxusercontent.com/u/7197139/toAngrybear_Feb25.zip


convert to psd, and sort through and organize for us.  won't need all the placed files i think once its turned into psd



Taylor Bernard on February 25, 2015:

all artwork broken out and organized folder wise.

http://cloud.fleeangrybear.com/1g1f1l1J3u3b

only thing i saw that may cause issues is that there are few different 'DESKTOP" versions of files. most of the artwork is based around an iPad template which is 1080px wide. the 'desktop' version files are same artwork, but 1800px wide.

Justin Bernard on February 25, 2015:

thx

how will that cause issues though? like we don't have enough desktop view sizes?

its a responsive site, meaning it has to toggle between desktop/mobile

Taylor Bernard on February 25, 2015:

i dont know how he laid it out.

but all the pages are built around iPad template. then theres like 3 Desktop pages. dont understand why just those and why just 3

Justin Bernard on February 25, 2015:

need to convert webb fonts to css useable stuff

these sites usually do a good job
http://www.fontsquirrel.com/tools/webfont-generator
http://www.font2web.com/

(sometimes fonts get flagged as 'not legal to convert', let me know if you have any issues, i normally just look for another tool that doesnt flag them)

it should give you like 3-4 new formats (eot, etc) for each one, plus some css that points to it

Justin Bernard on February 25, 2015:

also pull together a html5 boilerplate build off of initialzr, do the default setting stuff, dont worry about responsive/etc

put fonts in a type folder in it, throw that action up in a subdirectory on ab like angrybear.com/webb/maverick

Justin Bernard on February 25, 2015:

kill font conversion request for now, but the boilerplate directory still a need
thx

Taylor Bernard on February 25, 2015:

why kill fonts? already had them ripped

Justin Bernard on February 25, 2015:

all good then

Justin Bernard on February 27, 2015:

hey just saw on these psd's you left the ipad mockup in there

just trim it down so its the design only, so that the grid/selection math makes sense.  so no ipad frame, or even the browser header, just trim to actual design area.

thx

Taylor Bernard on February 27, 2015:

updated stripped files.
http://cloud.fleeangrybear.com/1Q450B3N2F2M

Justin Bernard on February 27, 2015:

cool thx

hit me with

zip of your boilerplate build thus far so i can check it out

Taylor Bernard on February 27, 2015:

when you lay out divs, im using a bg color to try and block it out to show up, what else can you do?

Taylor Bernard on February 27, 2015:

http://cloud.fleeangrybear.com/1f172r3w050w

whys this div still not showing up. gotta be something easy

Justin Bernard on February 27, 2015:

dont put . or # in the html, css only

so in html, its <header></header>

in css its just header

in html it's <div id="container"></div>

in css its #container

in html its <div class="mysomething"></div>

in css it's .mysomething

Taylor Bernard on February 27, 2015:

is 'container' a global recognized statement? or does that need to be specified in css file

Justin Bernard on February 27, 2015:

nope, only header/footer are.  anythign else needs to be id="" or class=""

Taylor Bernard on February 27, 2015:

you sure on that margin-auto:0? not working, and even on w3 guidline site it says :
margin-left: auto;
margin-right: auto;

to horz align

Justin Bernard on February 27, 2015:

margin: 0 auto;

Taylor Bernard on February 27, 2015:

ok, should all div's and div properties always be in the css or do you do a mix of them in html and css.
like on this one below. probably the best way to encase those two 50% divs would be to place them in a full panel size div, center align it, then put each in there and left align one and right align the other?

if thats the case, since the red stroke div would just be a container and not have any properties or direct content, do you do it in index.html or do you make another div in css just as a placeholder?

Justin Bernard on February 27, 2015:

think of html as place to hold info, and css as place to describe that info

css is pure properties
html is organization

so yes, always keep to model you have going thus far

magic for the above
the way to handle that would this

make a wrapper for both of those objects

<div id="somethingwrapper" class="clearfix">
     <div id="left_image></div>
    <div id="right_image></div>
</div>

notice i added a id and class to the wrapper, and added clearfix as a class.  clearfix is basically browser magic that allows the floats to work correctly

then, you go in css and do this:

#somethingwrapper {
display: block
position: relative:
width: 1080px;;
height: 363px;
}

#somethingwrapper #left_image {
display: block
position: relative:
width: 540px;;
height: 363px;
float: left;
}

#somethingwrapper #right_image {
display: block
position: relative:
width: 540px;;
height: 363px;
float: right;
}


notice i added the float properties.  that does exactly what it sounds like. but its important you have a div that contains them, so they know what their left/right float limits are...

Taylor Bernard on February 27, 2015:

ok, in this below code. how does it know to fill up the div horz first? rather than vertically?

why doesnt it do

{L
R]

instead of [LR]

======

//<div id="somethingwrapper" class="clearfix">
     <div id="left_image></div>
    <div id="right_image></div>
</div>

notice i added a id and class to the wrapper, and added clearfix as a class.  clearfix is basically browser magic that allows the floats to work correctly

then, you go in css and do this:

#somethingwrapper {
display: block
position: relative:
width: 1080px;;
height: 363px;
}

#somethingwrapper #left_image {
display: block
position: relative:
width: 540px;;
height: 363px;
float: left;
}

#somethingwrapper #right_image {
display: block
position: relative:
width: 540px;;
height: 363px;
float: right;
}

Justin Bernard on February 27, 2015:

because of floats

if you didnt put in the floats, it would just stack them vertically

floats make it try to squeeze to sides, so it can fit in the container

the clearfix class addition, that basically keeps the floats nested and keeps from breaking things outside of that wrapper div.

Taylor Bernard on February 27, 2015:

check this out. alt to clearfix, just not as much browser support
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Taylor Bernard on February 27, 2015:

trying to do a more advanced step. overlapping divs.
breaking for me of course.
whats best way to do this part.
have some 'overlap' divs...

way i thought may be best is to make container to house all 3, then top left align the 1080x540
left align float with margin of 545 to get it to the bottom

then right align the 539x540 and margin 410 from top.

the right is getting spit out of the container to below it in a new div.

what you think.

Taylor Bernard on March 2, 2015:

let me know on this bug im hitting and i can finish knocking out rest of pages. this overlapping div is on most of them.

Justin Bernard on March 2, 2015:

the short answer is using z-index

when you do that, you can overlap, as you can assign an arbitrary, higher number to the overlap, and put it on top of something.  you also set its positioning to absolute normally

dont worry about that though, as i may have to change it up for how the site will responsive/scale

post up files when you get roughed out, ill take a look, see what to move onto next, maybe fonts/type layout... 

Taylor Bernard on March 2, 2015:

trying to figure out this z index still.
read that to be able to use z-index you have to specifiy position beforehand.
on the container or each div? and which to use relative on each one?

Justin Bernard on March 2, 2015:

i'm bombed down on some stuff at moment, skipp the z index stuff, move on to other stuff

if you have done all other stuff on different page layouts, lemme know, and post stuff up on server so i can check out,a nd ill point you to next things (till i can help you sort out z index)

thx

Justin Bernard on March 3, 2015:


how to embed images:

background: url('../img/global/fixed_nav_home_btn.png') no-repeat 0 0;

Taylor Bernard on March 3, 2015:

just giving update. messing with this trying to work thru layout glitches still

Justin Bernard on March 3, 2015:

never use the word glitches again

Taylor Bernard on March 3, 2015:

so many glitches.
all glitched out. shut off the glitch meter because it was smoking and overloaded with maximum glitch

Taylor Bernard on March 3, 2015:

hover divs and overlay ones giving me issues, just moving past and doing those after i get the rest done

Justin Bernard on March 3, 2015:

skip those like i said this morning

have you work on other things, show you how to handle text/etc

Taylor Bernard on March 3, 2015:

production update

http://cloud.fleeangrybear.com/1r2u0J452v3U

Justin Bernard on March 3, 2015:

how did image stuff go?  i have a morning meeting with CC&D to do kickoff, so may be out of pocket if have questions then

Taylor Bernard on March 3, 2015:

yeh all good.
you ever make .ico file with multiple sizes? you cant do that in PS .ico export. have to use software to bundle multiple sizes for IE taskbar, opera, ect.
they are like 64x64, 32x32, 128x128, ect.
if it doesnt have it in the .ico does it scale the 16x16 up cause that would be real bad if so

Justin Bernard on March 3, 2015:

this list supposed to take care of most sizes i think:

  • 64×64 – Safari Reading List and Windows site icons
  • 24×24 – Pinned site in IE9
  • 32×32 – High DPI or “retina” displays will typically use this size
  • 16×16 – Most commonly used size by browsers like IE, Safari, Chrome, and more

ive never used this, but it looks cool
http://www.xiconeditor.com/

if you hit 'import', you'll notice they are asking for the diff size png's you've already made, i think it just packages it all together for you...

shoot me a screen of the icon you are using first just to double check all good

Justin Bernard on March 3, 2015:

hey im about to go to sleep and get up working early

shoot me what you have with image inclusion so i can double check to see if doing right before get too far along

may be semantic stuff i can help with

Taylor Bernard on March 4, 2015:

more glitches arose.

here's updated code with some bg layout. a lot of the images i chopped out arent being used, but are in the img folder. have to figure out how to float them inside divs, ect.

and will do the code commenting next as well


http://cloud.fleeangrybear.com/0E140v20280F

Justin Bernard on March 4, 2015:

thx.  looking pretty good

i cleaned up one html file to show you how to structure stuff.

Taylor Bernard on March 4, 2015:

organized it a lot better.
how is this looking format wise.

http://cloud.fleeangrybear.com/2M1t1U2C0a0s


couple questions

does the note <!-- XXX --> lines get baked into the normalize.css file and take up space? wondering why we take out lines and try and keep minimal as possible yet add so many lines of notes.

and...

if just tabbing divs over in css to make sense visually what they are subsets of... then why do

.header_container_short {

as parent and

           .header_container_short .top_nav_horz_strip {

as child.
since it in theory just dismisses the first div and looks at last?

basically if we space over in css for visual, why do it in code as well.

Justin Bernard on March 4, 2015:

per the code comments adding file size, good question.  we will use main.css all the way through dev till site is 100% done, then we will take contents of that css, and run it through this http://cssminifier.com/
that strips everything out, including whitespace, and makes it suuuuuper small file size.  the common practice is to have a file called main.min.css, the min meaning minified.  and just pointing to that css once site is complete instead of the one we are using now. so if you ever make a change, you just update the un minified one, then recompress it and copy to the main.min file. so you have the base one to edit/easy to read, and the min one thats super light.  win win.

Justin Bernard on March 4, 2015:


per the indenting/structuring, actually it does look at the explicit pathing (its not just skipping to the last div)

for instance, you could do something like this


#home_container .top_nav_horz_strip {
color: red;
}

#journal_container .top_nav_horz_strip {
color: blue;
}

and those could be two diff things, as one lives within home_container, and another within journal.

why do stuff like this?  imagine if you had a diff header image on the journal page, so you needed color to be diff, but everything else is the same.  with this kind of explicit pathing, you are setting yourself up to allow something like that later down the road.

Justin Bernard on March 5, 2015:

footer {
  display: block;
  position: relative;
  width: 1080px;
  height: 450px;
  margin: 0 auto;
  background-color: #919295;
}

          footer #footer_logo {
            display: block;
            position: absolute;
            width: 114px;
            height: 111px;
            top: 115px;
            left: 105px;
            background: url('../img/footer_logo.png') no-repeat 0 0;
          }


          footer #footer_column_left {
            display: block;
            position: absolute;
            top: 115px;
            left: 285px;
            font-family: 'CalibreRegular';
            font-size: 21px;
            line-height: 26px;
            color: #262424;
          }

            footer #footer_column_left p {
              padding: 0px;
              margin: 0px;
              padding-bottom: 28px;
            }

            footer #footer_column_left .title {
              font-size: 28px;
              color: blue;
            }

Justin Bernard on March 5, 2015:


<!-- Begin footer --> 
    <footer>

        <div id="footer_logo"></div>

        <!-- Begin footer_column_left --> 
        <div id="footer_column_left">
            <p><span class="title">Webb Design Corporate Office</span><br />
            130 S Prospect Ave<br />
            Tustin, CA 92780</p>

            <p>info@webbfsd.com<br />
            (714) 508-1880</p>
        </div>
        <!-- End footer_column_left --> 

    </footer>

    <!-- End footer --> 

Taylor Bernard on March 5, 2015:

updated code.

http://cloud.fleeangrybear.com/3x1j1M2K2l26

check out the contact page.
got everything working. pretty proud of that.

only issue is that on the span classes, the semibold, and blue, for some reason are adding double space under them when i change them from the normal parent font style.

so you can see on any blue or bold txt theres more space than the normal line spacing under it till the next line.

stripped out everything but font face and color in the span class as well to make sure it wasnt doubling line spacing or something but still doing it.
let me know what you see.


and on the google api...

use the AB email to get 2 keys

https://developers.google.com/maps/documentation/embed/guide#api_key


im thinking need 2 keys since its 2 different maps/addresses

Justin Bernard on March 5, 2015:

super nice!

here's one trick, i see you wrote get directions all caps once and another time not.  add this little property to the class that makes that blue text, and just write it normal in the html
text-transform: uppercase;
it forces all chats uppercase

per the spacing issue, its probably some inherit/default spacing added to span

do this, on this class

#cali_office_container #office_address_container #address .blue { display: block; font-family: 'CalibreRegular'; font-size: 16px; color: #39a2c1; }

add:
padding: 0px;
margin: 0px;

then you'll need to add padding-bottom: ##px to get the spacing correct.  just screen cap what it becomes by clearing margin/padding, then add padding-bottom to its the right vert spacing.  that should do the trick

i'll grab you those keys later
thx

Taylor Bernard on March 6, 2015:

weird. messed with this last nite for a while and found out what fixed it. margin didnt do anything to help, even margin-bottom: 0px;

took out the break after the line on 'get directions' and that fixed it. somehow it's auto line breaking with /span so adding in another <br> double spaces it?

this fixes it:

422 E. Vermijo Ave, Suite 415<br />
            Colorado Springs, CO 80903<br />
            <span class="blue">GET DIRECTIONS</span>
            –<br />
            <span class="semibold">New Business</span><br />
            (719) 344-8350<br />
            info@webbfsd.com<br />

Justin Bernard on March 8, 2015:

i *think* this code does it for maps api
AIzaSyD9eIAXnP-Yje1h8gaSKg8JHQekphx6FjU

Justin Bernard on March 8, 2015:

you never did what i told you on friday, make a production/todo list for css, as well as css bugs.  you mentioned something on friday that was an issue and i told you to move on and tag me.  if we dont tag that stuff right away when it comes up, i waste time thinking what it was (and not being able to take a look when i get a free minute, like now) or risk us forgetting it till later.

Taylor Bernard on March 9, 2015:

for the most part figured out how to do the z-index but still an issue with the bold fonts not showing up right size or something. posted a new thread.

Taylor Bernard on March 9, 2015:

actually looking back now i did make a new thread. friday at 2pm made a thread 'css bugs' in here. only issue i was having then was that font issue described above.

Justin Bernard on March 9, 2015:

oh, i see where you made a thread, i was talking about making a todo item, so that it can be assigned to me. the prob with threads, is if i dont touch it for a few days because im busy on other work, i wont have a way of remmbering them before they get buried by other threads. 

if you make a todo item, i can look at my open todo's easily and see whats standing.

i just moved it to there.  use that in future, todo's assigned to me for bug/needs to be done, discussion threads for more conversational stuff, questions, stuff thats not for me to do so much indidivually

Taylor Bernard on March 9, 2015:

Index.html and Contact.html should be pretty much done. gotta throw maps in there though, but rest should be in there except for floating expand menu button

http://cloud.fleeangrybear.com/2X1z461X2y0R

Taylor Bernard on March 9, 2015:

that google API is not working either. just checked it. says not auth

Justin Bernard on March 9, 2015:

use your own gmail for now to generate one. make a note in todo list for me to update it to client gmail later on.

Justin Bernard on March 9, 2015:

put on server like i said before now that you have a pretty full build and so that i can just click view.

Taylor Bernard on March 9, 2015:

i did. emailed you the contact and index pages

Justin Bernard on March 9, 2015:

looking solid, good work

make the index.html be called home instead, and make an actual index page for browsing content, so we can make a checklist of pages done and needed to be done. i mentioned this last week, use the banner page index we normally use.

Taylor Bernard on March 9, 2015:

k.

i got one of the maps working. used same key for the other map, no go. made a new api/new key for the other map, no go. duplicated working map twice on the same page, no go. something squirrely with it but at least got 1 map working in there for placeholder.

Justin Bernard on March 9, 2015:

Review link
http://client.fleeangrybear.com/webb/maverick/index.html

Justin Bernard on March 10, 2015:

update the above page url/directory when you complete a page

make a page inventory/listing right now on basecamp todo list, i made a few that i know of.  make one for every page, seperate for every psd, such as ipad and desktop view of each page.

work on one page at a time, when you get done with it, assign it to me. if you hit bugs/issues too hard, make note in css bug list.

Justin Bernard on March 13, 2015:

did you see where client mentioned this on the new comps?

"Also, I made a small modification to the tablet view, project subpage. Both PDF's contain notes."


see what he's talking about?  is it significant to update/change?


Justin Bernard on March 16, 2015:

you never responded to post above, do you see what he's talking about?  need clarification?  want to make sure its not missed

thx

Taylor Bernard on March 16, 2015:

yeh its all good. i saw that when he sent main group of files over. already fixed it. but he's using a different font on the header tab than the other pages, think it may be a mistake, but will make note and when before we present will get clarification. easy fix, just typeface change from regular to bold

Justin Bernard on March 16, 2015:

cool

where you making notes at?

Taylor Bernard on March 16, 2015:

notepad

Justin Bernard on March 16, 2015:

post it to base camp right now, do not want to lose any of those

Taylor Bernard on March 16, 2015:

yo. you said to hold up on this piece and we'd come back to it. want to get it filled in before calling this page. done..


whats best way to nest those 4 divs in that side?

Justin Bernard on March 16, 2015:

only way to really do it is with dynamic coding such as the masonry.js

don't mess with it, just make a note and you can consider the page done with it still missing, i can get to it thurs this week most likely

thx

Taylor Bernard on March 20, 2015:

should be good to go on showing them this amount.
here's updated splash page.


http://client.fleeangrybear.com/webb/maverick/index.html


few notes to pass on:
- journal subpage 'top overlap over header' not implemented yet
- home desktop 'about' image overlap not implemented yet
- no underline on any of the txt yet (have to figure out how to best pull off)
- mobile/contact maps are placeholders only for now.

Justin Bernard on March 20, 2015:

looking good, thanks for update, passed to client.

one thing i noticed, the section titles that have icons, the icon seems to be shifted off a little from how its supposed to be vertically positioned (too far down).  viewing on chrome/mac. you may need to add some top padding to the div to bump the text down to center it vertically with those icons.