« first day (191 days earlier)      last day (3597 days later) » 
00:00 - 17:0017:00 - 00:00

m59
5:01 PM
@mikedidthis yeah, I tried a few things and can't get this to work. I think it would be ideal if the nav would center in the remaining space between the logo and right-side container wall
 
@m59 display: table
 
m59
css is so hacky...goodness
 
correct
Its awesoe
 
user652649
 
m59
haha
 
user652649
5:06 PM
@m59 you have to consider the smallest device as starting point, 240px aren't enough for logo + menu on the same line
 
m59
So, if I look at a design, should I write classes that describe elements and not worry about how they are used? Then use a specific selector to deal with positioning them in a layout and stuff?
like .logo is just a logo, then have another style that positions it for a specific use?
 
on ui pattern, one main selector
Did you read OOCSS?
 
user652649
body > header > h1 > a > img should be the selector of a site logo imho
 
user652649
not .logo
 
@Wes header > h1 > img
 
m59
5:09 PM
I read a bunch of stuff, but reading doesn't help it stick as much for me as talking.
@mikedidthis what specifically did you mean? (to read)
 
m59
sweet.
 
@m59 I mean the book, the concept the idea etc
 
user652649
@mikedidthis yeah circa, the point is that .logo is useless :P
 
@Wes maybe not, you could have a logo in the footer
 
m59
5:11 PM
I read a bunch of stuff by this person: oocss.org
 
oocss and smacss are pretty close
that is the super short version
 
user652649
.button-active {...}
means?
 
@Wes twitter bootstrap :D
 
user652649
isn't a button by definition activable, pressable?
 
user652649
ahhh, Revised Naming Convention
 
user652649
5:15 PM
ok this looks fine :D
 
user652649
still not sure about .active tho
 
m59
@mikedidthis thanks a ton. I'll be studying on all of this.
 
@Wes yeah it is.
@m59 no problem. Again, just think of your css as small little modules, rather than being really specific with the selector
Like you wouldn't use body main p, you just use p.
 
m59
Yeah, that makes sense to me, but ps are so generic.
or do you mean that classes should aim to become the same way?
 
@m59 that
 
m59
5:20 PM
even if there so happens to only be one item
 
yeah
.alert you can then extend it to more states .success, .fail etc
alert is the base, so width, height, etc. .success would be the colour, etc
 
m59
All of that makes a TON of sense to me until the layout gets complicated (positioning, floating, etc)
because that stuff is so non-generic
 
@m59 just seperate your containers from your elements
an element would have a parent, which holds it, so its like a container
 
m59
hmm...
so everything positioned is transparent?
 
no, but its usually positioned relative to something
 
m59
5:23 PM
heh, maybe I'll get it better after I study more =D
 
but that is more css basics than modules
trail and error, its how I learned.
 
m59
One thing that may make it difficult is that I haven't done anything huge with css.
I had that problem with php.
It was hard to understand why certain things were good practices (they seemed to be just useless fluff) until I realized how things would work out as the project grew.
 
yeah
same with most code.
 
m59
lol, especially having a function that does nothing more than call another function.
 
user652649
@m59 with css there isn't any good practice, only po-mo barbecues
 
m59
5:31 PM
=)
 
@Wes there is soo.
 
user652649
:P anyway i'm not sure if i can agree with mike said, i would say instead
pick a low specificity selector and define its style the way you will not need to override its rules
 
user652649
for example
 
user652649
p{color:black}
 
user652649
it's wrong, because you might have a black background in the header, and a white background in the content
 
user652649
5:37 PM
instead
a{color:inherit;text-decoration:underline;}
a:hover{opacity:0.9;}
 
user652649
fits pretty much everywhere
 
p { color: black; font-size: 20px; } (base)
header p { color: white } (extension)
 
user652649
since it's rare that you will need to override that style, since it fits enough already
 
Anyone have any thoughts on:
0
A: jquery AJAX call the only last added li as slideIn animation to anyone browsing the website

Lugia101101This can be solved with a small amount of JS and some CSS. Change comments.InnerHtml += "<li>" + dr.GetString(0) + "</li>"; to comments.InnerHtml += "<li class=\"hide\">" + dr.GetString(0) + "</li>"; along with: $(document).ready(function () { $.ajax({ url: 'WebForm1.aspx', ...

 
user652649
you have to change color only when you set a background
body{background:white;color:black;}
body > header {background:black;color:white;}
p{color:inherit;}
 
user652649
5:40 PM
you can see what i'm saying?
 
wouldn't it be background-color:black;?
 
@Wes the p can be above or below
 
user652649
it's wrong doing p{color:black;} because you probably would do
p,h1,h2,h3,h4,h6,ul,ol{color:black;}
but that's wrong, since you can change color in the parent container of all these elements
 
but I get what your saying
your asking it to take the parents colour scheme
the issue with this is nesting
but it is something I have done before and agree its handy
 
user652649
of course after that you will also do container h1 {color:darkblue}
 
user652649
5:43 PM
but that's an extension
 
user652649
@mikedidthis it's a requirement of WAI
 
!!google WAI
 
user652649
when you change a background you have to change also the foreground color, and vice versa
 
yeah
 
user652649
5:44 PM
of course not always that is possible
 
I think both methods have a benefit.
 
user652649
but it's an important thing to keep in mind
 
0
Q: Dynamically added/created Mobiscroller not functioning

RylieXBackstory: In this project I am doing I have a block of code(a few form lines) that is duplicated when a user clicks the "+ add destination" button. The scroller for picking a time is included in the block of code but since the new content(more destination inputs) is dynamically added/created a...

 
user652649
for accessibility and "cascading consistency"
 
@Wes I would suggest style the text element directly or inherit from the parent, never both :D
 
user652649
5:46 PM
urm like?
 
keep it consitant
 
user652649
there's not wrong with overriding values
 
I know it isn't, but its confusing as your not sure what is in control.
I can't explain it
I am tired :)
 
user652649
anyway i'm saying that you should do not need some css property to be overriden in a more specific selector for to make it working in that context
 
correct i agree
 
user652649
5:50 PM
that is explained in the example i made, if you write color:black; on a p and you use p inside a container that has a black background you will necessarily need to change <p>'s color for to make it working
 
user652649
so you shouldn't have that need, when you write "p{}" you mean "p" in every context
 
user652649
and "p{color:black;}" doesn't fit any context
 
user652649
this is what i keep in mind when i write css
 
user652649
@m59 read that ^ not sure if i was clear or even if what i said makes sense xD
 
m59
so, don't override rules?
 
5:56 PM
@benlevywebdesign The JSFiddle isn't loading.
 
user652649
@mikedidthis so @mikedidthis responding to that, yes you are right, you should first define "p" then be more specific, but it's probable that p just inherits everything from body, like font, color etc
 
user652649
but for example on "main p{}" i start to add things, like margins
 
user652649
@m59 no, try to do your best to write rules that you will not need to override, or better, rules that fit in the selector context
 
m59
I see.
 
user652649
going home
 
m59
6:00 PM
So, I got to speak with the staffing person for a company I really want to work for, but the position I applied for was filled. She wanted to see if she could find another position for me and the only other thing is html/css dev
 
user652649
later guys
 
m59
@Wes see ya!
but yeah....I sent my js/php which was pretty good, but I think I'm screwed on css lol.
@mikedidthis how fast do you suppose a person could be hire-worthy in css?
rather, someone like me.
 
6:25 PM
I couldn't say
 
@mikedidthis got any WP themes up your sleeve?
I vaguely remember you saying you don't do WP .... but i thought i'd ask.
 
Why is everyone going to @mikedidthis for stuff?
@mikedidthis please code my site!!!
Pleaaaaaaaaseeeeeeeeee
:P
 
because
mike did this
also, mike is my man. him and I are tight like shoelaces.
3
 
:P
Seems like it is sleepy time for this chat
 
it is only 1:30pm here
@mikedidthis I see you moving up in that active users list
don't ignore me bitch
 
6:36 PM
lol
 
7:12 PM
Wtf did I do?
and no, I am wp free since 2003
Sorry I wasn't ignoring you, signed in on my tablet and my youngest is playing games...
 
7:49 PM
sure you wen't
you saw rlemon and thought "ohh fuck not this guy again"
 
never. Its always a pleasure, you know this.
Why WP anyway?
 
because I'm too lazy to setup anything else at this point
I will finish my own blog engine, but that needs some serious polishing
 
why not a flat file system or ghost?
 
8:09 PM
because
wordpress i've installed before
lol
and I know i can export WP data to my blog engine
it just isn't polished
i.e. it works but I don't trust it
 
hmm ok. Sadly I ain't opening the WP can o' worms.
 
m59
8:57 PM
Do you know of any SMACCS/OOCSS tutorials that actually show the process of coding from a design?
As I'm studying all of this, it all makes sense and I feel like I'm going to own it. Then I get back to work and I can't write a thing.
 
m59
9:15 PM
@mikedidthis thanks
what is this? font: 13px/1.6
 
i think the second value is the line height
 
m59
ah cool
 
Yeah its a unitless line-height
!! 13 * 1.6
 
@mikedidthis That didn't make much sense. Use the !!/help command to learn more.
 
[<‘font-size’> [ / <‘line-height’> ]?](developer.mozilla.org/en-US/docs/Web/CSS/font)
 
9:17 PM
!!> 13 * 1.6
 
@mikedidthis 20.8
 
so the line height is 20.8px
 
m59
@mikedidthis he says "Notice that we’re styling our container object by starting all our selectors with #container. However, that’s a special case: usually, you will want to use classes, because they are freely reusable."
What's the special case?
Does he mean that styling the container is the special case, or this styling of this container is a special case?
 
@m59 container is unique. There is only one.
 
m59
ok, got it.
 
9:20 PM
you could use a class, I would
I only use IDs in rare cases.
 
IDs for JS selecting
Classes for styling et al
 
m59
I'm still not sure how to divide up my design. That top brown strip isn't in the container, then there's so much stuff in there, I don't know how to think of it.
 
not a hard rules of thumb, but a rule of thumb
 
go back a step. Ignore the oocss stuff for now
 
m59
hehe
 
9:23 PM
I was being serious. Get used to look at a design in terms of html
 
*semantic html
fucking hate non semantic HTML
 
divitus
 
user image
7
 
Yep. HTML5 doctor has been a great resource.
 
m59
@mikedidthis apologies. I was laughing because of how awesome you are at popping out helpful resources :)
it was meant to be a complement
 
9:33 PM
@m59 meh, I am just sharing what others have helped me with.
I am self taught, people like @rlemon and @Wes helped me.
 
I'm also self taught
people like Google helped me
 
Yep that.
I just like helping people.
 
m59
If the background needs to be adjustable via some cms feature, it can't be hardcoded as the background, even though that makes the most semantic sense
Absolute position img tag is ok, then?
 
@m59 cms should be able to write css
yeah
 
m59
cms can write css?
 
9:36 PM
@m59 well it depends. If its theme related yeah. If you mean a rich text editor, it will do it inline.
 
m59
Right, the context I was speaking of actually referred directly to this:
the main image there with the text overlayed is actually a plugin
 
m59
The admin can choose an image and type text in, then the plugin will generate that content
Which of course uses an img tag
I was just making sure that was ok. I didn't imagine it could really be semantic.
 
Its not, but for the time being don't worry about semantics
I started with divs, then you learn what you can move to semantic markup
 
m59
I mean, it semantically suggests that the p is after the img when it's visually inside of the img, but yeah. I guess it's a tradeoff =D
 
9:41 PM
Honestly don't worry about it for the time being.
Ideally markup should flow the same way the site looks visually but some times we can't do it.
 
m59
9:57 PM
Is there a definite answer on which heading to use? For the longest time, I heard there was supposed to be only one h1 per page, but I've recently heard that h1 can just be the main title of a section or module
Not sure what to make of it all.
It's kind of weird when we're talking about modules, since headings are relative to something...
Each module's first heading would be h1, I would think
 
There should only be one h1 on a page.
also a module doesn't to have a heading.
its just a little element that you can reuse.
I dunno why, but maybe your thinking too module.
Scrap the module stuff, just learn how to slice a design
 
m59
10:31 PM
Ok, here's what I could do: pastebin.com/PgD28ApZ
If you can check it out, I'd love to know how to improve it.
 
@m59 really good start. Its late, but I made a few tweaks: gist.github.com/mikedidthis/7363055
 
m59
was I correct about the pseudo?
 
@m59 its one way, but as its just a colour, just add a border-top to the body element
that way it works in all browsers.
 
m59
Ohhhh
cool
brilliant
@mikedidthis thanks so much
 
My pleasure, keep at it!
 
 
1 hour later…
m59
11:50 PM
Is there a standard approach for margins and padding?
I figure the parent should determine the internal spacing via its padding so that all child elements are automatically spaced
Assuming that's true, I'm concerned about the top/bottom spacing
Like, if you had an element with 2 p tags
if the p tags are padded 15px top/bot
then there's 30px in between them
but only 15 at the top and bottom of the set
So...if I want the general spacing to be 30px all the way around, then the parent element would be padding: 15px 30px; and children padding: 15px 0px;
Unless someone suggests otherwise, that's the best I can think of :)
 
00:00 - 17:0017:00 - 00:00

« first day (191 days earlier)      last day (3597 days later) »