Creating a website - The Bear and Badger

b0r1s

Sorry AJ that was me being a dick

IR is with screen readers seeing it

HIDDEN is with display:none so therefore no visibility.

AJ

Just for fun, this is exactly what I was doing something like a decade ago...

<h1><a href="/">SiteName</a></h1>
<style>
h1 > a
{
  text-indent: -9999px;
  text-decoration: none;
  display: block;
  width: 100px;
  height: 50px;
  background: url(logo.png);
}
</style>

AJ

b0r1s wrote:

Sorry AJ that was me being a dick IR is with screen readers seeing it HIDDEN is with display:none so therefore no visibility.

Ha, no worries. Just typed the above for no reason.

b0r1s

Nope understood. Basically the boilerplate has standardised a lot of CSS stuff like HTML5 did with HTML4 stuff. What is a bit weird is that the W3C hasn't seen the need to standardise some CSS conventions.

AJ

I should try using a boilerplate properly one of these days. I mean, Twig proved my misgivings about PHP tempting engines wrong...

b0r1s

Have recently looked at Twig because thinking of using it with Craft for a new project. Craft looks like a sexy CMS with a Twig temp laying engine.

Boilerplate is generally good, got all your usual clearfix, print styling and normalisation rules in place.

If you dev on a Mac then you should really check out Hammer for Mac too. It's an IDE support tool that compiles SASS and Coffescript compiler with a nice HTML include engine for static template creation. It also minifies CSS and JS for live deployment.

AJ

Been meaning to try out SASS and CoffeeScript, just haven't got 'round to it yet.

I do most of my dev with Symfony at the moment, so having an IDE that compiles things for me is a little redundant, plus I'm going to be moving to PC (at least temporarily) come the new year. I'll keep Hammer in mind as something to look at if I get the chance, though.

AJ

Eww, I finally just looked at CoffeeScript, since you brought it up, and it really doesn't look like something that'll click with me.

b0r1s

Haven't tried Coffescript myself and tbf I like to fully control the formatting of my CSS, I'm a bit anal about it, but I do like Hammer for the template includes and file optimisation.

b0r1s

SASS is great in theory. E.g. Variables and mixins, but I don't like the output code.

AJ

Anal about CSS formatting? Me too. I like to align all the values in the same column and separate different types of rule into blocks. It all goes through a minimiser before it's sent to users, though, as does JavaScript. In fact, I've even hacked myself a Twig block to squash all the whitespace out of inline JS before sending.

AJ

I don't see why the way the output code looks matters. Hell, all my HTML spouts out as a single line, to make styling easier (i.e. no odd gaps caused by whitespace between tags).

AJ

lol, live source

b0r1s

No see I like all my CSS to be in the braces on the same like with all the parameters in alphabetical order with the browser specific rules at the end. I know alphabetically that the browser rules should come first, bit it messes with my head :-)

As for output code of Sass part of it is above and part is that it tends to use a lot of descendent selectors, which I used to use a lot of, but I tend to take a much simpler path of initial class and one descendent selector per logical section of my HTML. It maybe that I haven't used SASS enough, but for now the benefits don't outweigh my thought processes.

b0r1s

Looking at some of that blue you're either using a CDN, absolute paths or fucking huge filenames for your image files :-)

AJ

Wait, you mean like this?

h1{ background:#f00; margin:1%; padding: 1%;}
h2{ background:#0f0; margin:2%; padding: 1%;}

Do you do that through a script? Seems really hard to work with...

While I've had a few things that would have been easy to sort with Sass, a bit more thought's always provided a solution that didn't need it, which is probably why I haven't got 'round to trying it yet. I've got some "daydream" projects that it could be useful for, but then I'd probably just write my own CSS generator if I did them.

AJ

b0r1s wrote:

Looking at some of that blue you're either using a CDN, absolute paths or fucking huge filenames for your image files

Some are through a CDN, yes. Image URIs can get a bit long due to using Assetic, but having to use absolute URIs for Open Graph etc. metadata doesn't help. I think the longest URI there is actually for the Tumblr follow iframe (which I know is totally unnecessary, but I hold out hope they'll actually make it not shit eventually).

b0r1s

No more like

.mydiv { color: #333; }

.mydiv.mymydiv { color: #444; }

And so on

I looked back at my CSS file from my Sass file and it seemed overly complex because Sass encourages you to take shortcuts at the creation stage of CSS.

This is bloody difficult to write on a phone, but I'll dig out some Sass and it's corresponding CSS to show you what it does tomorrow when I'm with my laptop.

AJ

I wasn't going to mention this anywhere until it's got more content, but this is where it's from, if you're interested: http://friki.tv

Please ignore the slow responses, I haven't enabled caching yet.

AJ

b0r1s wrote:

No more like [...] And so on I looked back at my CSS file from my Sass file and it seemed overly complex because Sass encourages you to take shortcuts at the creation stage of CSS. This is bloody difficult to write on a phone, but I'll dig out some Sass and it's corresponding CSS to show you what it does tomorrow when I'm with my laptop.

Cool, look forward to seeing it.

I'm not sure how your example differs overly from mine, though. You mean you only have one rule per block or something?

b0r1s

Sorry that wasn't me, more that Sass encourages you to go:

Element
Element > element
Element > element > element

Etc

I'll take a look at you code stuff tomorrow on my computer, not that I'm any Dan Cederholm or Andy Clark.

AJ

Oh, it's nothing I'm proud of, just thought I'd post it in case your curious.

Curious that Sass encourages that. Is it due to inheritance or something?

Anyway, I'm heading to bed so may or may not respond to things until morning.

mk64

right, work has commenced

b0r1s

Good luck!

mk64

thanks!

dynamiteReady

Aye. Seconded. Will be great to see the beta/finished version. Good luck man.

b0r1s

So trying to explain my SASS aversion a bit better.

in SASS, due to the way it uses indentation to denote descendants, you get something like this:

.pullquote { background: url("/img/open-quote") no-repeat 0 0; margin: 80px 0 0 0; padding: 0;
	p { font-size: 16px; font-weight: $fw_300; margin: 0 0 0 21px; }
	cite { color: $grey_0; display: block; font-size: $h6_size; font-style: italic; padding: 10px 0 0 21px;
		strong { color: $dk_orange; font-style: normal; font-weight: $fw_600; }
	}
}

To me that is messy and more difficult to debug, if I code it by hand it would be like this:

.pullquote { background: url("/img/open-quote") no-repeat 0 0; margin: 80px 0 0 0; padding: 0; }
.pullquote p { font-size: 16px; font-weight: 300; margin: 0 0 0 21px; }
.pullquote cite { color: #555; display: block; font-size: 12px; font-style: italic; padding: 10px 0 0 21px; }
.pullquote strong { color: #ff7800; font-style: normal; font-weight: 600; }

Much easier to read. And seen in context of my editor, even clearer:

beano

I do a boris. Or at least try.

I've not written a fresh CSS file since 2010 or 2011 though and I never finished the site!

AJ

Woah, I didn't know you could nest selectors like that. I think I might actually prefer it that way for some things, I'll give it a go later. Certainly couldn't stand having all the rules on one line, though.

beano

One line CSS doesn't make me happy.

Mixed elements don't either.

Keep it all together.

Howdy, Stranger!

Categories