Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Depressing Box
Jun 27, 2010

Half-price sideshow.

Authentic You posted:

Can someone please explain the appeal and goodness of Bootstrap? Namely the base CSS. Because I don't get it. Maybe we're just doing it wrong, but I dunno.

Bootstrap's main benefits are quick prototypes and easy UI styles for non-designers, though I've heard Bootstrap 3 is better about letting you override its styles.

If you have/are a designer comfortable with CSS (i.e. you're already planning to make a custom UI) you'd probably be happier with something less opinionated (Zurb Foundation) or more lightweight (Bourbon).

Thermopyle posted:

However, I also think you are probably judging it based upon a poorly done implementation of a Bootstrap site, coupled with a lack of familiarity with the way Bootstrap works.

Also this. Bootstrap's not innately bad, but it does lend itself to some bad coding practices.

Adbot
ADBOT LOVES YOU

Authentic You
Mar 4, 2007

Listen now this is your
captain calling:
Your captain is dead.
edit: ^^^ Yeah, I'm a designer that happened to pick up front-end dev, so a lightweight framework with more flexibility would be ideal.

Thermopyle posted:

It lets you churn out a decent site fast. Especially for developers who aren't mainly front-end web developers.

However, I also think you are probably judging it based upon a poorly done implementation of a Bootstrap site, coupled with a lack of familiarity with the way Bootstrap works.

I think you're absolutely right about my first real go with it being on a not-so-great implementation. Fixing said implementation would probably involve a complete rewrite of the front end, so in working with the existing code, it's less of a hassle for me to just strip a lot of the Bootstrap stuff out of the markup and write new CSS than to fix the Bootstrap implementation/solidly learn Bootstrap in a short time frame. The UI doesn't even use most of the grid/layout stuff in Bootstrap, so a custom CSS foundation would mostly take care of frequently used elements like forms and tables (for tabulated data, don't worry). And then again, I'm really only bitching about the Bootstrap CSS. So far, I don't have anything bad to say about the Javascript stuff - it's pretty handy.

I primarily did WP development before this job, and I guess I never even thought about using Bootstrap - I just had built up a pile of CSS handling basic layout and poo poo like comment formatting that I could keep recycling.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Bootstrap is a tradeoff: If you need to do things it offers (widgets, etc.) and are OK with non-semantic non-portable markup, then it maybe the right call. I personally find it too heavy-handed, and dislike many of their design decisions, but as others have said, it's a good "get a good looking UI out fast" framework, which is why it became so popular: it opened up that ability to many design-challenged developers who had been rolling their own previously. Unfortunately, most of these UIs are still terrible, but at least are pretty.

So no, don't feel bad about disliking Bootstrap.

lunar detritus
May 6, 2009


I have had awful experiences with people claiming to be front-end developers with a subpar knowledge of HTML/CSS just because they can 'use' bootstrap. It's a great framework but it can be very easy to hide enormous holes in knowledge by using it and the resulting code can be awful.

This has reached the point where our junior front-end dev is not allowed to use bootstrap and I'm very suspicious of any developer that includes 'Bootstrap' in their resume.

Bognar
Aug 4, 2011

I am the queen of France
Hot Rope Guy
I've never used Boostrap as the foundation of a website, though a lot of times I'll steal the good pieces from their CSS for my websites (e.g. dropdown menus, pagination). Though, Bootstrap 3 is a big improvement over 2, in my opinion, since they cleaned up some of the classes and switched everything to flat-style so it's easier to modify.

The March Hare
Oct 15, 2006

Je rêve d'un
Wayne's World 3
Buglord
I think this is the single most hacky thing I've ever personally done with a z-index. http://www.lootgrind.com/imagetest/ Peep that code if you're lookin' to cringe.

ambushsabre
Sep 1, 2009

It's...it's not shutting down!
So I spent this last weekend being sad I don't have a blog, so in true hacker fashion I built a simple medium-like blogging system with Meteor, called Sagacity (here's an example post). I'm really bad at design, so I tried to keep this one minimal. There's also still some bugs in the editor that are totally not my fault and are medium.js's fault (and it's a pain in the rear end to get working) so be aware of that if you were thinking about using it in a project.

All in all, I know it's hacky as poo poo but I still think it's neat, and not bad for like 4 days of work. Meteor is the best yo.

pipes!
Jul 10, 2001
Nap Ghost

line-height: 1.25; please and thank you.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

pipes! posted:

line-height: 1.25; please and thank you.

You mean 1.4. Some of us are old. :corsair:

ambushsabre
Sep 1, 2009

It's...it's not shutting down!

pipes! posted:

line-height: 1.25; please and thank you.

Oh, wow thanks. I'd like to say I would have figured it out eventually but...no, thanks for pointing it out (I did use 1.4 though, it looked nicer to me). Should be deployed any minute.

Nebulon Gate
Feb 23, 2013

gmq posted:

I have had awful experiences with people claiming to be front-end developers with a subpar knowledge of HTML/CSS just because they can 'use' bootstrap. It's a great framework but it can be very easy to hide enormous holes in knowledge by using it and the resulting code can be awful.

This has reached the point where our junior front-end dev is not allowed to use bootstrap and I'm very suspicious of any developer that includes 'Bootstrap' in their resume.

I generally use "Familiar with a variety of front-end frameworks" and leave it at that for this reason.

Space Skeleton
Sep 28, 2004

Is there a downside to using an image-map? I got handed some graphics heavy pages and I could slice it up to make a bunch of parts, align them all with html/css and so on but then I realized that I could do a whole page with an image-map in like 5 minutes since nothing on it needs to be reactive to the mouse rolling over it or anything like that.

I have never used image-maps on a serious website though and I don't see them in the wild that much. So I'm wondering if there is some problem with them I am not aware of.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Death Himself posted:

Is there a downside to using an image-map? I got handed some graphics heavy pages and I could slice it up to make a bunch of parts, align them all with html/css and so on but then I realized that I could do a whole page with an image-map in like 5 minutes since nothing on it needs to be reactive to the mouse rolling over it or anything like that.

I have never used image-maps on a serious website though and I don't see them in the wild that much. So I'm wondering if there is some problem with them I am not aware of.

Using HTML/CSS is a much more accessible setup that gives you more control to ensure a screen reader can access it the way you want them to. You have to put a shade more thought into how you do the click zones based on your use case, but invariably you're gonna end up with a more accessible end result for keyboard/screen reader/etc users.

Maluco Marinero fucked around with this message at 10:46 on Aug 29, 2013

me your dad
Jul 25, 2006

I'm designing an email template and I've gotten myself way bogged down in nested tables. In the layout below, I'm trying to get the top of the 'Lead Story Headline' box to align with the top of the 'Skyscraper Ad' box, but the two should not reflect each other's height. The 'Lead Story' headline will contain a line of text and the 'Skyscraper Ad' will contain a 600px high image. I need them to be independent of each other, but top-aligned.

What am I doing wrong here?

Here's the result of the code below (colored cells just to make things visible)


What it needs to look like when cells are populated with content (MS Paint mock)


code:
code removed to clear page length

me your dad fucked around with this message at 17:05 on Aug 29, 2013

Top Quark
Aug 2, 2010

"Going where no man has gone before."
Is this the sort of thing you're looking for?

http://jsfiddle.net/R9pyJ/

I basically just put valign="top" to the td's containing the nested tables. The cells within the tables are height independent from the cells on the adjoining nested table which I think is what you wanted.

me your dad
Jul 25, 2006

Top Quark posted:

Is this the sort of thing you're looking for?

http://jsfiddle.net/R9pyJ/

I basically just put valign="top" to the td's containing the nested tables. The cells within the tables are height independent from the cells on the adjoining nested table which I think is what you wanted.

Yes, that's it. Thanks! I swear I tried doing a valign="top" on those but I guess I applied them to the wrong thing. I'm going to remove the images and code from my post so it doesn't make this page a mess.

Authentic You
Mar 4, 2007

Listen now this is your
captain calling:
Your captain is dead.

Lumpy posted:

Bootstrap is a tradeoff: If you need to do things it offers (widgets, etc.) and are OK with non-semantic non-portable markup, then it maybe the right call. I personally find it too heavy-handed, and dislike many of their design decisions, but as others have said, it's a good "get a good looking UI out fast" framework, which is why it became so popular: it opened up that ability to many design-challenged developers who had been rolling their own previously. Unfortunately, most of these UIs are still terrible, but at least are pretty.

So no, don't feel bad about disliking Bootstrap.
Yeah, I'm finding the two things I really don't like about it are the heavy-handedness and the weird markup. With this particular app, we'll be adding in modular features, so the class structure really needs to be semantic. I need to be able to call an element by function, like say dropping in another table for displaying test results. I'd like to just add 'test-results-table' and not have to trudge through all the layout/presentation-centric crap to make this new test results table follow the same rules as the other test results tables. Function, THEN form. Most of these modules do/display very different things, so the layouts are all different anyways. That sort of stuff can be handled with higher level CSS.

That said, I'm happy to nab Bootstrap styles (like buttons and poo poo) and use them as bases for my own styles. I just don't want to use Bootstrap class structure.

gmq posted:

I have had awful experiences with people claiming to be front-end developers with a subpar knowledge of HTML/CSS just because they can 'use' bootstrap. It's a great framework but it can be very easy to hide enormous holes in knowledge by using it and the resulting code can be awful.

This has reached the point where our junior front-end dev is not allowed to use bootstrap and I'm very suspicious of any developer that includes 'Bootstrap' in their resume.

I can see that being an issue. Being familiar with Bootstrap and other frameworks is one thing (and a good thing), but using Bootstrap to disguise huge knowledge gaps is pretty bad. It's like Adobe Dreamweaver on the design side of things. If you claim to be a web designer (or god forbid, a developer) and have 'Dreamweaver' listed as a skill, then there's a high probability that you don't know what the gently caress you're doing. Dreamweaver is actually a pretty nice code editor, with handy auto-complete and server syncing and such, when you pretend that the design mode doesn't exist (it's what I use because it came with the rest of my Adobe software), but since it's much better known for its WYSIWYG webpage-making capabilities and has a good amount of stigma attached to it, I never say anything more than that I write code by hand in a code editor.

leftist heap
Feb 28, 2013

Fun Shoe
Using something like Foundation with its Sass mixins is, to me, a better alternative than Bootstrap, especially if you want to preserve the semantics of your classes/html.

jusion
Jan 24, 2007


I'm not really getting the Bootstrap problem here. The classes are always pretty self-explanatory, and if they're not, there's beautiful documentation to reference. Plus they're really not that much different than Foundation, et al. I mean:
code:
<div class="row">
  <div class="col-lg-4">...</div>
  <div class="col-lg-4 col-lg-offset-4">...</div>
</div>
vs
code:
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
They just give you a little more styling to start, but that doesn't sound like the problem here.

Oh My Science
Dec 29, 2008

jusion posted:

I'm not really getting the Bootstrap problem here. The classes are always pretty self-explanatory, and ...

http://css-tricks.com/semantic-class-names/

Semantic markup should not have "row" or "col-*" classes. Although bootstrap and foundation offer semantic ways to use them (SASS or LESS), most people just use the default classes because it is easier. Both are great tools for the right jobs (quick prototyping, decent default UI elements) but if you're willing to put in the time and effort using something like Bourbon & Neat will produce clean semantic code.

jusion
Jan 24, 2007


Oh My Science posted:

http://css-tricks.com/semantic-class-names/

Semantic markup should not have "row" or "col-*" classes. Although bootstrap and foundation offer semantic ways to use them (SASS or LESS), most people just use the default classes because it is easier. Both are great tools for the right jobs (quick prototyping, decent default UI elements) but if you're willing to put in the time and effort using something like Bourbon & Neat will produce clean semantic code.
Oh, I completely agree; I just wanted to make it clear that swapping Bootstrap for Zurb or something wasn't going to magically make the problems disappear.

vtlock
Feb 7, 2003

We have a number of old Wordpress sites that I would like to archive. This is probably a dream, but is there any tool that would allow me to convert a wordpress site into static HTML? Several of these sites don't need to be modified, but my colleagues would like to keep them online--and I fear that letting them idle is just asking for some sort of php/database exploit.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

http://wordpress.org/plugins/static-html-output-plugin/
?

substitute
Aug 30, 2003

you for my mum
Have web design/development conferences been discussed in this thread? Seems like we could share knowledge or experiences, and possible pool together forward thinking trends as they're being presented around at these events.

Oh My Science
Dec 29, 2008

substitute posted:

Have web design/development conferences been discussed in this thread? Seems like we could share knowledge or experiences, and possible pool together forward thinking trends as they're being presented around at these events.

Personally I would look for local meetups if you're looking for this kind of information. I have had a great time at Ruby / PHP meetups in Vancouver, BC, Canada... I'm certain most cities have them. If for whatever reason they don't, start one. Any tech startups or bigboys in the area love hosting them for free exposure.

Oh My Science
Dec 29, 2008
Let's talk about eCommerce solutions.

A month or so ago I was speaking with a print shop looking to improve their online sales. Unfortunately the platform they use isn't that great and they want to move away to something a little more modern and customizable. At the moment they have no control over design, and dislike how promotions and products are displayed. They sell standard print shop goods, including business cards, postcards, door hangers, etc... and are not looking for a "design your card online feature", just upload a file and go deal.

My Requirements:

Somewhat easy to customize
Extendability - addons to save time in development or future improvements
Decent Community

Nice things to have:

I would prefer they offer some kind of hosting solution, no need to patch the backend myself.

----

I have looked at the usual suspects Shopify, Megento, BigCommerce, etc. but don't have enough experience using them to make a good decision. Right now I'm leaning towards shopify because I have used it in the past.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

Oh My Science posted:

Let's talk about eCommerce solutions.

A month or so ago I was speaking with a print shop looking to improve their online sales. Unfortunately the platform they use isn't that great and they want to move away to something a little more modern and customizable. At the moment they have no control over design, and dislike how promotions and products are displayed. They sell standard print shop goods, including business cards, postcards, door hangers, etc... and are not looking for a "design your card online feature", just upload a file and go deal.

My Requirements:

Somewhat easy to customize
Extendability - addons to save time in development or future improvements
Decent Community

Nice things to have:

I would prefer they offer some kind of hosting solution, no need to patch the backend myself.

----

I have looked at the usual suspects Shopify, Megento, BigCommerce, etc. but don't have enough experience using them to make a good decision. Right now I'm leaning towards shopify because I have used it in the past.

What platform are they currently on? I integrated a multi-branch print shop with PrintScience (web platform specifically for printers), and if you don't mind working on a dead technology they actually were not that bad. Everything is template based but if you're not afraid to get your hands dirty digging in the guts of it you could customize just about everything.

That said, the things they were charging for were relatively basic and could easily be replaced by a 'normal' storefront with upload and file management capability. Based on what you're saying Magento/BigC aren't a good fit for this at all, being at turns overpowered and/or overpriced. Shopify is a nice little flexible platoform but you'd have to roll your own file management (using Box's API would be a good fit for this).

It's an interesting problem because of the variability of print products (paper stock, canvas, size, binding, web press versus digital, etc etc). Given my druthers I'd just write something from scratch, but I've been working in ecommerce for the last 8 years and have written several storefronts in my time.

Oh My Science
Dec 29, 2008

Scaramouche posted:

It's an interesting problem because of the variability of print products (paper stock, canvas, size, binding, web press versus digital, etc etc). Given my druthers I'd just write something from scratch, but I've been working in ecommerce for the last 8 years and have written several storefronts in my time.

They currently use http://www.onprint.com/platform/ and pay about $250 a month to keep it running. The driving force behind finding something new is that customers simply do not use the 'design your card online' feature and 95% of his customer base uploads a file or has the in house designer do it. OnPrint doesn't pay for itself, and moving over to something similar would have the same problem. Now this may have been bad marketing on his end, but I can't remember the last time I really wanted to browse through a hundred pre made designs online instead of just uploading my own.

The challenges I face with this job are time & money. This particular client thinks a complex eCommerce site can be done In a week, and cost him next to nothing ( both in development costs & monthly fees ). I would love to use spree as a starting point and tailor it to his needs, but going with an existing solution which eliminates maintaining a server & reduces dev time would be ideal.

You brought up file managment as a possible problem, I'll be more aware of that as I look for a good solution.

How long would it take you (who knows what he is doing) to implement a shop with those basic requirements?
How much would you charge?

Deadline is the end of September...

ZombieApostate
Mar 13, 2011
Sorry, I didn't read your post.

I'm too busy replying to what I wish you said

:allears:
I haven't done much in the way of web dev (a little tinkering editing existing php/javascipt/html/css), but I'm comfortable with C++ (among others), so I'm pretty confident about picking up whatever language/framework I need. My problem seems to be narrowing it down since I'm not very familiar with the capabilities of any of them.

I want to put together a variation on a comic reader site, focused on making translation easier. To start with, I want to put together a setup where users can upload one or more series of comic, which can then be managed by a group of one or more users. A user could potentially be a member of more than one group. It will also need to be able to list series and display each page with the typical next/previous buttons and whatnot. I've got some ideas for translation tools that I think I know how to handle already.

I'm not really worried about this yet, but just to keep it in mind, in the future, an individual series or all of a group's series could be set to private so only members of the group could see it. I might want to make the private series option a paid subscription feature.

I started looking to see if there was a WordPress plugin that would handle management/display of multiple series, but the closest thing I could find was Kommiku and it seems to be horribly broken on the latest version of WordPress. I'm not really sure WordPress is even a very suitable platform. Navigating and displaying a comic doesn't look particularly difficult, so I wouldn't exactly be heartbroken having to write a simple comic viewer myself.

However, it seems like the bulk of work I'll need to do is going to be on the database/user management side of things. I just read through the Django OP, which sounds really appealing since it sounds like Django will handle a lot of the admin panel and user database stuff for me semi-automatically. So now I'm kind of thinking of rolling the whole thing myself with Django.

Are there any better/easier alternatives or supplements (Drupal? Rubyonrails? Oh god I don't know :gonk:)? Am I going to be able to find a host that will support Django or whatever else is suggested? Basically I just want to be pointed in the right direction and I think I can mostly figure it out from there.

Oh My Science
Dec 29, 2008

ZombieApostate posted:

... I just want to be pointed in the right direction and I think I can mostly figure it out from there.

The OP lists most of the popular frameworks you've mentioned. I would suggest going through all of the "getting started" tutorials / documentation and finding something you agree with. Based on your brief description any one of them could do it.

DholmbladRU
May 4, 2006
I am having some problems with the fonts I am using rendering really crappy on Firefox

Initially they looked just as bad in chrome as they do in FF but I put the svg font first. I understand that browsers render fonts a little different. The fonts in IE look great, which surprised me.

code:
@font-face {

    font-family: 'sf_movie_posterregular';

    src: url('./fonts/customtitle-webfont.eot');

    src: url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),

                                url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),

         url('./fonts/customtitle-webfont.woff') format('woff'),

         url('./fonts/customtitle-webfont.ttf') format('truetype');

       

    font-weight: normal;

    font-style: normal;

-webkit-font-smoothing: antialiased;

   font-smoothing: antialiased;

 

}
Does anyone have any suggestions on how to get best look out of a font in firefox

vtlock
Feb 7, 2003


Thanks for this. It hard codes absolute URLs into all of the pages, but I can adjust those via Sublime easy enough. Not perfect, but it fixes my problem.

lunar detritus
May 6, 2009


Oh My Science posted:

...if you're willing to put in the time and effort using something like Bourbon & Neat will produce clean semantic code.

I haven't looked back since I started using Susy

Bognar
Aug 4, 2011

I am the queen of France
Hot Rope Guy

DholmbladRU posted:

I am having some problems with the fonts I am using rendering really crappy on Firefox

Initially they looked just as bad in chrome as they do in FF but I put the svg font first. I understand that browsers render fonts a little different. The fonts in IE look great, which surprised me.

code:
@font-face {

    font-family: 'sf_movie_posterregular';
    src: url('./fonts/customtitle-webfont.eot');
    src: url('./fonts/customtitle-webfont.svg#sf_movie_posterregular') format('svg'),
         url('./fonts/customtitle-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/customtitle-webfont.woff') format('woff'),
         url('./fonts/customtitle-webfont.ttf') format('truetype');
}
Does anyone have any suggestions on how to get best look out of a font in firefox

If I remember correctly Firefox prefers WOFF, but it might be loading your SVG since you've put it first. The recommended order is .eot (IE), .woff (FF, Chrome, new iOS, new Android), .ttf (Safari, old Android), .svg (old iOS).

kedo
Nov 27, 2007

So apparently iOS Safari doesn't like applying a background-size (or -webkit-background-size) to items which have background-attachment: fixed.

Anyone know why this is and if there's a workaround that doesn't involve JS?

Ron Don Volante
Dec 29, 2012

I know practically nothing about html, so this is probably a stupid question. I have a page with text and a Facebook "Like" box
(<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="292" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>)

I'd like the text to be on the left and the Facebook box to be on the right, all on the same line. I've tried messing around with div align but can't seem to get the text to wrap; it keeps forcing the box below the text. Is there an easy fix?

darthbob88
Oct 13, 2011

YOSPOS
I think this is what float is for.

Ron Don Volante
Dec 29, 2012

darthbob88 posted:

I think this is what float is for.

Got it, thanks!

NtotheTC
Dec 31, 2007


If I have a file input that is designed to take images, is there a Javascript or jQuery solution to getting that file, checking to make sure it's an image, and then getting some Exif data from the image?

I found this library, but it seems to be used for running on <img> tags and I'm not sure if there's a better solution out there.

NtotheTC fucked around with this message at 20:22 on Sep 1, 2013

Adbot
ADBOT LOVES YOU

IMlemon
Dec 29, 2008
I don't know anything about web development apart from very basics of html, css and javascript and I want to build a website. I'm rather overwhelmed by the choice of available javascript frameworks and libraries. What I want to do is pretty drat simple - fetch some data from my backend and display it, create some graphs, do some sorting/filtering on the data, etc. I will not be modifying any of this received data. Should I bother with any frameworks or should I just grab jQuery and some widget library and get to work?

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply