|
pipes! posted:You want a CSS reset, declared at the beginning of your external, linked CSS stylesheet before any other author-written styles. Normalize and Eric Meyers Reset are the current favorites, I believe, although Normalize is less a "zero out everything" approach and more one that provides sensible cross-browser considerations. Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyers Reset is a sledgehammer.
|
# ? Oct 22, 2013 20:16 |
|
|
# ? May 9, 2024 20:19 |
|
I read A style-guide for modular SASS development using SMACSS and BEM that sidebar.io linked me to. Think I'll give it a shot and see how I like it.
|
# ? Oct 22, 2013 20:20 |
|
cbirdsong posted:Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyers Reset is a sledgehammer. I use it personally, and I agree. It's also doubtlessly saved me hours of trying to make obscure states of form elements work the way they were intended to.
|
# ? Oct 22, 2013 20:21 |
|
Kobayashi posted:Next time I work on a substantial project, I think I'm going to try atomic CSS design. The metaphor is quarks (raw tags), atoms (abstract components), and molecules (larger components), plus utilities (resets, etc). Seems like it could be a neat way of doing things. Probably a bit overkill, though. Isn't that kinda how Django works, maybe? I know it assigns HTML "objects" to stuff in the database. Or is that different?
|
# ? Oct 22, 2013 20:48 |
|
cbirdsong posted:Yeah, after using both, I think I greatly prefer Normalize. Normalize is a scalpel, Eric Meyers Reset is a sledgehammer. It depends greatly on the design of the site in question. I use Normalize "mostly" but for those sites where "MAKE IT LOOK JUST LIKE THE PHOTOSHOP WHY IS THAT 2PX OFF OMG!@!!!" is sadly in play, a reset work for me better as a starting point.
|
# ? Oct 22, 2013 20:48 |
|
Pollyanna posted:Isn't that kinda how Django works, maybe? I know it assigns HTML "objects" to stuff in the database. Or is that different? Django doesn't assign HTML objects to anything.
|
# ? Oct 22, 2013 22:06 |
Lumpy posted:LESS. One file for reset / normalization, one file for variables, one file for "base" typography, one file for everything else, with an optional file for responsive rules if having it in the "everything else" file makes it too big. In the "one file for everything else" - is there a sort of structure to it? Or just grouping related things together?
|
|
# ? Oct 22, 2013 22:13 |
|
Pollyanna posted:Isn't that kinda how Django works, maybe? I know it assigns HTML "objects" to stuff in the database. Or is that different? You really need to go through that Django tutorial a few more times.
|
# ? Oct 22, 2013 22:24 |
|
Thermopyle posted:You really need to go through that Django tutorial a few more times.
|
# ? Oct 22, 2013 22:35 |
|
...Yeah now that I think about it, what the hell was I trying to say? What happened to the whole separation of content and presentation thing? Never mind, I'm confused.
|
# ? Oct 22, 2013 23:30 |
|
I think you've just got some ideas mixed up in your head. Django does have templating (replace a bunch of stub-values in a text file to produce a real page with content), it has an ORM (a system of mapping python objects to the database) and it does have an MVC architecture. (I know you're just learning a bunch of this this stuff. It will come naturally to you soon, it's so easy to mix up all these acronyms)
|
# ? Oct 22, 2013 23:53 |
|
I need some advice on how to start a project: I have a spreadsheet with three columns of data--A,B, and C. I want to make a web form in which a user enters an A value and a B value (say A1, B1) and, if those match two values in the spreadsheet, the form returns the appropriate C value (in this case, C1). I can store the data in any form--csv, xml, database, whatever. Is there a best way to do this? (And is there a way to do it without going down a path of PHP vulnerabilities?) Are there any frameworks that might get me started?
|
# ? Oct 23, 2013 00:14 |
|
Okay, I don't quite get how to center elements in CSS. I have a <ul> element that I'm trying to make a horizontal menu from. Supposedly, making something a centered object involves something like this:CSS code:
I'm not sure this does quite what I want it to. It doesn't put it exactly in the middle of the page, and ideally I'd like it to change its position as the webpage is resized. How do I do that? Additionally, I don't think I understand nesting/grouping correctly. I have a div element that has a ul child, which itself has one or more li elements. My attempt at trying to get everything under a div.links to have certain properties both looks bad and doesn't work. Here's the entire code I'm using right now: CSS code:
edit: Never mind, figured out the whole nesting thing (use IDs). Still not sure how centering should work. Pollyanna fucked around with this message at 03:17 on Oct 23, 2013 |
# ? Oct 23, 2013 03:06 |
|
That should do it; bearing in mind that it will only apply those properties to the object relative to the container that it's in. If its container has margins, paddings and positioning of its own then the auto margin will centre your <ul> within the space those allow it. On my own front - anybody know anything about handling Google Toolbar? Its pop-up blocker is blocking all our website's PDFs from opening that use target="_blank" and I can't figure out if that's intended behaviour or if there's something I can do to avoid triggering it. I wouldn't normally worry, but our industry fairly widely uses a few Google products that 'helpfully' include it as an opt-out on install, and our consultants keep submitting them as broken links because all the toolbar does to indicate it's blocked a "pop-up" is put a little exclamation marker on the pointer.
|
# ? Oct 23, 2013 05:01 |
|
Ghostlight posted:That should do it; bearing in mind that it will only apply those properties to the object relative to the container that it's in. If its container has margins, paddings and positioning of its own then the auto margin will centre your <ul> within the space those allow it. Ummmm, hm. This is how my HTML looks: HTML code:
I somehow just managed to get the navbar directly above any of the actual content. What am I doing
|
# ? Oct 23, 2013 05:22 |
|
If that's literally your HTML I'd say your first problem is that you aren't declaring the <ul> or its <div> as a .center
|
# ? Oct 23, 2013 05:27 |
|
Okay, now it's working. CSS: CSS code:
HTML code:
What other ways can I refactor my code to make it more efficient? (DRY is the term I think) Pollyanna fucked around with this message at 06:01 on Oct 23, 2013 |
# ? Oct 23, 2013 05:58 |
|
Just so you know, this: code:
Doesn't do what I suspect you think it does, even if it "works" for now. The "a:active" part will affect all active anchor tags, not just the ones inside you links list items. You need to do it like this: code:
|
# ? Oct 23, 2013 13:13 |
|
fletcher posted:In the "one file for everything else" - is there a sort of structure to it? Or just grouping related things together? Definitely. This will vary on the site, but I have internal sections to the file, with an "index" at the top so I can press '%' in VIM on it and jump down to it. For example, I'm in the process of re-doing my own site right now, and my index looks something like: code:
Hey, I think I'll make my 2nd blog post be all about that! If I ever I finish the site... Lumpy fucked around with this message at 13:35 on Oct 23, 2013 |
# ? Oct 23, 2013 13:23 |
|
Pollyanna posted:
You don't need to use table-like properties for that FYI: http://jsfiddle.net/Qu3zz/ (there are other ways of doing this also]) Some other comments:
Lumpy fucked around with this message at 13:39 on Oct 23, 2013 |
# ? Oct 23, 2013 13:32 |
|
Just some notes from a Django and web dev:Pollyanna posted:
Don't wrap single block-level elements in other block-level elements, especially unclassed/id'd elements. Pollyanna posted:
If you're doing loops like this, save yourself some processing time on the `ifs`: HTML code:
|
# ? Oct 23, 2013 17:21 |
|
Thanks, guys. There was a lot of leftover crap that didn't have any effect, so I cleaned it all up along with the changes you suggested. It works a lot better now Right now, I have my navigation bar like this: HTML code:
|
# ? Oct 24, 2013 03:17 |
How come it's different for each page? I don't think you'd want to automatically print a link for all other urls in urls.py. You will inevitably add more urls down the road, and then you'll have to devise a way for it to ignore certain ones, etc, and it would have been easier to simply list them out yourself. I think it might be easier to create a new template called navbar.html, and then in any of your other templates you can simply do: code:
|
|
# ? Oct 24, 2013 03:35 |
Do wildcard SSL certs work for both https://foo.bar.com as well as https://bar.com ? Is there anything special you need to do?
|
|
# ? Oct 24, 2013 05:14 |
|
fletcher posted:Do wildcard SSL certs work for both https://foo.bar.com as well as https://bar.com ? Is there anything special you need to do? Nope. I learned this the hard way just recently. *.*.foo.com is different from *.foo.com. I had to rename a bunch of things like dev.app.foo.com to dev-app.foo.com when the cert requirement came in.
|
# ? Oct 24, 2013 05:45 |
FeloniousDrunk posted:Nope. I learned this the hard way just recently. *.*.foo.com is different from *.foo.com. I had to rename a bunch of things like dev.app.foo.com to dev-app.foo.com when the cert requirement came in. I don't wanna go sub-sub-domain though, just domain and sub-domain. Is my only option to redirect https://foo.com to https://www.foo.com ?
|
|
# ? Oct 24, 2013 05:48 |
|
fletcher posted:I don't wanna go sub-sub-domain though, just domain and sub-domain. Is my only option to redirect https://foo.com to https://www.foo.com ? Oh, I don't know about the levels of it. I work on a subdomain to start with, so we have a wildcard for *.mydept.mycompany.com. HTTPS works for butts.mydept.mycompany.com, but not for dongs.butts.mydept.mycompany.com. But I see you're trying to go the other way. Yeah, I suspect in that case you'd need to redirect to the www subdomain.
|
# ? Oct 24, 2013 06:05 |
FeloniousDrunk posted:Oh, I don't know about the levels of it. I work on a subdomain to start with, so we have a wildcard for *.mydept.mycompany.com. HTTPS works for butts.mydept.mycompany.com, but not for dongs.butts.mydept.mycompany.com. But I see you're trying to go the other way. Yeah, I suspect in that case you'd need to redirect to the www subdomain. That seems to be what http://google.com does, so if it works for them it works for me I guess!
|
|
# ? Oct 24, 2013 06:31 |
|
So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk. Basically, CSS code:
Thoughts?
|
# ? Oct 24, 2013 19:26 |
|
Personally I'm a fan of the first option. To me keeping the file easy to navigate is paramount, especially with larger projects. I like being able to point at one thing, like a header, and saying "yup, this is where everything for the header is controlled". Mind you I have no idea if there's some sort of established best practice for this sort of thing, I just do what feels best.
|
# ? Oct 24, 2013 19:48 |
|
kedo posted:So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk. I find myself jumping between the two methods pretty often. Unfortunately whatever framework is being used tends to have it's own pattern, most often one of the two you listed, and you're pretty much forced to adhere to whatever they chose for the sake of other developers.
|
# ? Oct 24, 2013 19:57 |
kedo posted:To me the first method seems preferable because it keeps all of an element's styles in one spot in the document, but it also clutters up your CSS with a slew of extra media query lines. This one. I used to do it separately but it was a pain to update or make substantial changes as I had to jump around the document to update everything. In the end the extra media query lines bother no one and make my life much easier.
|
|
# ? Oct 25, 2013 01:29 |
|
kedo posted:So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk. I mostly do the 2nd one, as I generally don't have that may exceptions in my responsive design (case in point: my new personal site has a grand total of seven selectors that need responsive rules across two media queries) so it's much easier to keep them grouped at the bottom. I imagine if for some reason I needed a bagillion selectors requiring changes, I would probably prefer the other method.
|
# ? Oct 25, 2013 02:50 |
|
fletcher posted:I think it might be easier to create a new template called navbar.html, and then in any of your other templates you can simply do: Oh my god this changes everything. Thank you
|
# ? Oct 25, 2013 05:07 |
|
Any recommendations for the best free html/css tutorial site? I've used w3schools in the past (for sql) but I've heard a fair number of negative things about it.
|
# ? Oct 25, 2013 05:14 |
|
Let me just preface this with I am a newb to HTML and especially Javascript. I am trying to implement the leanmodal dialog window as shown in in this link, http://leanmodal.finelysliced.com.au/. If you click on basic in the examples section you will see what I am trying to create. While testing the dialog window on my local computer it works perfectly fine. The dialog window pops up. The background darkens some, and on click outside of the window it closes. But, when I upload it to my personal website, the functionality breaks. The dialog window pops up. But, the background doesn't darken and the window wont disappear when clicking outside of it. Edit: Turns out I just forgot to upload the edited CSS I made. Johann Gambolputty fucked around with this message at 08:19 on Oct 25, 2013 |
# ? Oct 25, 2013 06:44 |
|
kedo posted:So speaking of CSS/SCSS organization, how do you guys organize media queries? I can never decide if it's better to work them into the original declaration for an element or to break them out afterwards in one big chunk. Use the first method and then lump your queries together in the final output with grunt-combine-media-queries. Ron Don Volante posted:Any recommendations for the best free html/css tutorial site? I've used w3schools in the past (for sql) but I've heard a fair number of negative things about it. Codeacademy is doing a fine job IMO. Use the Mozilla Developper Network when looking for information about a specific attribute/property/method (prefix your google query by "MDN" and that should do). Skiant fucked around with this message at 07:13 on Oct 25, 2013 |
# ? Oct 25, 2013 07:10 |
What are people's thoughts on design theory for a low-footprint business? My partner is a translator and I'm redesigning her website now, but really the website should only serve two purposes: 1. Legitimise and advertise her business, and 2. Point them to her email address and facilitate them asking her for a free quote. I've broken that down into a few basic components: 1. A short, stereotypical "wowza" list of reasons why her business is fantastic (think a list of words and phrases like "reliable, confidential", etc). 2. Every four to ten words is essentially an obvious link to the 'get a free quote' section. 3. Minimal UI and graphics -- I recognise that graphics significantly help with the legitimacy of a business' image, but I want to balance that and ensure that there's minimal clutter and the least possible distance between arrival and sending an email for a quote. 4. Short list of qualifications, translation experience, and services offered. 5. A mock-up of an example quote email, just in case the person is at all unclear on how easy it is to send an email for a free quote. 6. A link at some point to her online blog where she uploads articles she has translated just to keep herself active. Last night I was tossing around the idea of building an interactive quote-requester, where someone can drag and drop elements to say how many of what type of documents they have, which will build them a quote that they can email through, but I binned the idea after 2 minutes because it's just another needless, over-complicated obstacle between entering the website and sending her an email asking for a quote. My main question is, for a site with such a small footprint, do you keep it all on the same page and just use anchors to pull it all around into sections? That way you can add stock photography etc to make it a bit more trendy/business-like, without cluttering up and obscuring information that would look much smaller if split into 3-4 pages. The main benefit would be that users can just scroll down to find everything they need (which isn't much at all) all on the same page (excepting the translation blog). The theory being that every time someone has to click a link to navigate away from a page, that constitutes an obstacle where they could just as easily go "the uncertainty of not knowing what will follow or whether that's what I want or not.. is more annoying than just hitting back and finding someone else". But then there's the other obvious obstacle in that the majority of the content is obscured from the user's first sight of the page -- it's down the scrollbar, beneath the landing section. The current plan is to have it all on one page and have the top part of the site, the landing screen, contain a short intro and descriptive links to every major section on the rest of the page -- qualifications/experience, types of services offered, free quote, etc. If they're in a hurry, they can click to the anchor, and otherwise they can scroll if they're looking for more info before they commit. What are people's prevailing thoughts on this question of getting information to the user and seducing them towards some goal (e.g. emailing for a quote)? Do you think clicking through or scrolling is a bigger obstacle?
|
|
# ? Oct 29, 2013 10:03 |
|
How does everyone deal with client-side caching when rolling out new .css or.js? We just rolled out a facelift so some files are cached and others aren't, creating a broken Frankenstein's Monster of a site. I've seen appending ?dateOfEdit to the end of the file, but in that case I'd have to update every .html page too (or at least the most popular ones).
|
# ? Oct 29, 2013 13:59 |
|
|
# ? May 9, 2024 20:19 |
|
Sulla-Marius 88 posted:What are people's thoughts on design theory for a low-footprint business? My partner is a translator and I'm redesigning her website now, but really the website should only serve two purposes: "Mother discovers secret advertising companies don't want you to know!" What you really want to make sure about is that the information doesn't look too dense. People will just back right out of your site if it looks like it will take too much effort to understand it. In my experience people don't really have a problem with scrolling, but you should still make sure your important information is "above the fold" (and probably duplicated at the end of the page). Including testimonials from real or fake people is also a good tactic for validation. Potentially more useful, check out these links on conversion: http://www.quora.com/What-are-some-top-strategies-for-conversion-optimization/answer/Andy-Johns http://blog.kissmetrics.com/what-converting-websites-do/
|
# ? Oct 29, 2013 14:18 |