[Pro] Kelly's Questions about CSS?

Off Topic
21

I still use an ancient copy of CSSEdit, my weapon of choice in the browser battles! It was “replaced” by a really hamstrung embedded editor in Espresso (a Coda-like integrated editor released by the fine people at MacRabbit). Despite a rally among CSSE partisans, MacRabbit have stated clearly that they have no plans to re-start development, or to release the code as open-source for someone else to carry forward. I can hear the clock ticking, and I know that one day a Mac OS update will be one too many for it, and then I’ll be screwed. But I stick to it because it does some things that no other editor can do.

Walter

On Jan 10, 2014, at 11:04 AM, RavenManiac wrote:

Now that I’m starting to dabble in CSS, is Coda still the preferred editor amongst seasoned FWP users?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

Actually, you may want to consider Brackets simply because it’s lightweight, plus the inline CSS editor is very nice.

Todd

Now that I’m starting to dabble in CSS, is Coda still the preferred editor amongst seasoned FWP users?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

It’s amazing what a little CSS training will do. :slight_smile:

I am constantly amazed at how a little CSS training makes me seem smarter -
even better looking (un-possible!). Actually, what will amaze you most is
when you stop every so often and notice the changes in yourself… especially
the “why do it this way or that” part.

As far as !important goes, my personal belief is that it’s a sign of
failure - evidence that I wasn’t as diligent, smart or creative as I could
be. Walter’s explanation is spot on, but I take it more personally.
Pragmatically, and often with FWP, you sometimes have to use it - but when
you find it as objectionable to use as I do, then you just might work
harder to avoid it. As if your very soul depended on it.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

24

I’m using Brackets now, which is okay, but I’d really like an editor that has a popup feature that will suggest CSS selectors as you type—primarily because I think remembering selector names and formatting will be the most challenging for me.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

25

Now that I’m starting to dabble in CSS, is Coda still the preferred editor
amongst seasoned FWP users?

I’m not sure about the Seasoned FWP Users, but I love little Coda 2 (live
preview, auto-complete, snippits library). I’ve branched out a little bit
to include TextMate and lately Brackets, but to me Coda 2 just feels
natural - like I don’t really have to think.

Even though I still work in Freeway Pro, Coda is nice for developing code
bits that go into FWP.

Oddly, the most used tool for me these days, is the Inspect Element part of
the browser. They all have Dev tools now, but my fave is the Safari browser

  • being able to take my output page, tweak the styling and layout to
    satisfaction, then take those style rules back into FWP and re-output. It’s
    a refiner’s dream.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

26

Do you mean ‘properties’?

Well, there are all sorts of Brackets extensions available, maybe there’s one you need. Otherwise get Coda. I’ve been using it for 5+ years for mostly front-end work (with a little Ruby and PHP thrown in, though I prefer TextMate for Ruby), and with the exception of the always King CSSEdit, Coda works well for me. It’s become the hub of a nice workflow: Git, Sass, MySQL etc.

Todd

I’m using Brackets now, which is okay, but I’d really like an editor that has a popup feature that will suggest CSS selectors as you type

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

27

I’m curious Caleb, how you will handle styling for Master Items - which alreadyfollow the div-id.classname convention (#divname.f-ms) or can change. Do you plan to code for both states, altered and unaltered? (#divname, #divname.f-ms)?

Yes, sadly. I have having to add more selectors, but IMHO is better than all the !importants spread thickly like the ice on our road.

Since I’m a relatively new purchaser of Backdraft, may I ask how users will perform an update if you they a website designed with an older Backdraft template?

At this point, I’ll say that some of the additional features could be ported over to a website built with 1.1 pretty easily. However, unlike a lot of software, keeping a website on the newest version of Backdraft is not needed unless you really want to use all of the new wingdings. 1.1 is a very solid version that didn’t really have any bugs (otherwise, there would have been a bug-fix update long ago).

As to code editors, Coda is my default editor when I’m going to start a new website. As a full blown IDE, it has lots of features that makes creating entire websites very fast, especially for new coders. The built-in documentation, live preview, validation and very good auto-complete is indispensable when you are learning the ropes.

For small edits and tweaks, I’ve found TextMate to be a very powerful yet quick editor. A close second is Textastic, which for $8.99 is far more reasonably priced.

SublimeText is incredibly powerful, but has a much steeper learning curve and the fact that it’s not a native app really shows.

And like Ernie says, learn how to use the web inspector. The new one in Safari 7 & 6.1 is particularly user friendly and easy to understand.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

28

On 10 Jan 2014, 3:43 pm, Todd wrote:

Do you mean ‘properties’?

Maybe. The instructor uses the terms selector and value. Is that incorrect?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

29 
.selector {
    property: value;
}

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

30

You’ll have a hard time finding a editor that includes selector autocomplete. However, practically all of them have property and value completion.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

31

Yeah, I screwed up the terminology. LOL Thanks for clarifying that for me.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

32

I have another question about font and element spacing. What is the preferred unit of measure to space these various elements (is elements the correct term)?

font-size:
line-height:
margin:
padding:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

33

They’re properties.

Elements are structures: dl, div etc.

Todd

(is elements the correct term)?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

34

Properties. gotcha.

Where can I find a cheat sheet of CSS terminology so I won’t look so ignorant when describing this stuff. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

35

Where can I find a cheat sheet of CSS terminology so I won’t look so ignorant when describing this stuff.

Is that not why you are doing this course?

D

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

36

I have another question about font and element spacing. What is the
preferred unit of measure to space these various elements (is elements the
correct term)?

font-size:
line-height:
margin:
padding:

All the units of measure are good - you can even mix them and browsers will
do the maths.

This will make that whole “body - font-size:62.5%” easier to understand, as
it makes 18px and 1.8em relatively even. Ems are more flexible than px, so
in fluid layouts I think ems work better, even though I still think in px
(and in inches, for my evolved euro-friends). All this technique does is
make it easier for me to work this way.

For the way I work, font-size are usually ems, line-height - while FWP
asks for a %, writes it instead as a plain decimal number (e.g., 140% =
1.4) and this is a good way to approach line-height. Margin and padding, I
often use a mixture depending on my goals. If you are specifying widths in
percentages, it makes sense to me that the spaces (margins) between items
also be %. FWP doesn’t recognize ems as a unit of measure for
padding/margin so I use px for the workspace view then override with em
equivalents, but usually later in the development or else you’re spending
all day extending and weeping over bloody fingertips.

The best thing about CSS is that it’s flexible - worrying about doing it
the right way is a waste of time imo - there are always ten ways to do the
same thing. Instead, I think time spent finding a better, less complicated
way is much more rewarding.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

37

On 10 Jan 2014, 4:28 pm, DeltaDave wrote:

Where can I find a cheat sheet of CSS terminology so I won’t look so ignorant when describing this stuff.

Is that not why you are doing this course?

D

Yes, it is. I was just looking for a basic cheat sheet sort of like the ones found on this page:

http://www.pxleyes.com/blog/2010/03/most-practical-css-cheat-sheet-yet/

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

38

I have a couple of widgets I like to use

Here are some

D

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

39

Some nice widgets there Dave. Thanks for the share.

I made this widget years ago to convert between Pantone and Hex colours;
https://dl.dropboxusercontent.com/u/795566/test/Pantone2Hex.zip
I should find the time to redo it as it no longer flips over to show the options and I’m sure I could improve on the overall code it uses.

I find this bookmarklet also pretty handy for working on responsive layouts;
http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/
Regards,
Tim.

On 10 Jan 2014, at 21:55, DeltaDave wrote:

I have a couple of widgets I like to use

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

40

Sweet! Thanks guys.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options