What is your favourite front-end frame for web development and design?

Genesis

Administrator
Staff member
OK, so we've all heard of Bootstrap 3. I'm just wondering whether any one has experience with working with other front-end frames and what your best experience has been?

For those who are new to front end frameworks here is an article that explains what it is about:
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

Bootstrap 3 is popular because it has plenty of documentation and it's almost viral the way it is being promoted. It obviously has to be OK, however is it necessarily the best frame solution for what we want? There are other front-end frames as well. I did some research earlier today and the following are some of the Bootstrap alternatives I found. I am curious to hear whether any of our members have had experiences with the ones below and what they have been:

GroundworkCSS an HTML5, CSS and Javascript Framework

Foundation Looks as involved as Bootstrap - for serious Web developers

Semantic UI Another more sophisticated front-end frame

Pure Simple Yahoo solution for beginners. Non-pro basic.Think I want to try this one out because it is CSS based and simple.

Yootheme - some great themes to work with

INK I'm attracted to INK also because of its simplicity and it has code I have already copied and pasted and worked right off the bat without too much head scratching.

HTMLKickstart Another simple front-end frame tool.
 
I still like to work from scratch. This way, security issues are my own fault and I don't have to wait for updates or a hacker to find a hole
 

Genesis

Administrator
Staff member
strokerace said:
I still like to work from scratch. This way, security issues are my own fault and I don't have to wait for updates or a hacker to find a hole
Right on! Maybe that very first solution I explored to use simple CSS to make a Website mobile friendly is still the best solution. I may try that first. Probably have to dig it up somewhere and I'll paste it here.

OK ... here it is - I've got three Websites I can try it on:

[video=youtube]
 

Genesis

Administrator
Staff member
Spent some hours trying to use the above tutorial. Looks OK, but can't get @media to work. CSS doesn't want to show it as code. So I've got a problem with specifying alternative widths. Tomorrow will go for Plan B: create alternate CSS sheets for different media.

I like this comment that I found during my searches (think one needs a BS detector to wade through all of the junk on the search topic: how to convert a website to mobile friendly :p):

Capture.png

Source: https://productforums.google.com/forum/#!topic/webmasters/XrVeZHMXHJo
 

Genesis

Administrator
Staff member
strokerace said:
The guy is so boring, I want to fall asleep. Info is good, but he is very slow
True. Info is good, but only relative to his original Website design. When the design and CSS are different, then one has to work it differently. The first part about adding the following to the HTML is good:

Code:
meta name="viewport| content="width=device-width", initial-scale=1

Then when one goes to the style sheet - since the stylesheet of most Websites are different, his

Code:
@media screen and (max-width: 960px)

will only work if the CSS is close to the CSS of his example Website. If the CSS is very different, then one would have to work on an alternative, preferably a CSS specifically for mobile devices.
 
Genesis said:
strokerace said:
The guy is so boring, I want to fall asleep. Info is good, but he is very slow
True. Info is good, but only relative to his original Website design. When the design and CSS are different, then one has to work it differently. The first part about adding the following to the HTML is good:

Code:
meta name="viewport| content="width=device-width", initial-scale=1

Then when one goes to the style sheet - since the stylesheet of most Websites are different, his

Code:
@media screen and (max-width: 960px)

will only work if the CSS is close to the CSS of his example Website. If the CSS is very different, then one would have to work on an alternative, preferably a CSS specifically for mobile devices.

Not really. He explains that in the video. I am going to try what he did on my CMS when I am not so tired. See, I didn't use a fixed width, I used auto. Its actually cleaner then being fixed. Especially if you are on a wide screen monitor. I never liked spaces on the sides and I also used divs instead of tables. I will try this out tomorrow and let you know how it worked
 

Genesis

Administrator
Staff member
That's where my original Website bogs down. It's on fixed with. When I tried 100% it gets distorted.

Can relate to feeling tired. Probably need to take a break myself.
 
Heres your problem
Code:
meta name="viewport | content="width

it should be this
Code:
meta name="viewport"  content="width

You had put | instead of " and caused you issues
 

Genesis

Administrator
Staff member
Thanks Strokerace, that's very helpful.

That was not actually what I used, I typed that quickly for the post when I was dead beat in the early morning hours. But even for this, your contribution is worth pursuing. Thanks.

Code:
meta name="viewport" content="width=device-width", initial-scale=1

From here (also from the video) but I copied and pasted it from the Website below as well:
http://www.html5rocks.com/en/mobile/responsivedesign/

Print screen of section that applies:
Capture.png
 

smalpierre

New member
Genesis said:
That's where my original Website bogs down. It's on fixed with. When I tried 100% it gets distorted.

Can relate to feeling tired. Probably need to take a break myself.

wrap it in another div and set max-width to where it doesn't look distorted. Then it'll be fluid until it hits the max width.


strokerace said:
I still like to work from scratch. This way, security issues are my own fault and I don't have to wait for updates or a hacker to find a hole

Me too. I've used frameworks before. I tried out Foundation which looked to have what I wanted, but its too bloated. I found Susy which is great since it's not exactly a framework. It's more like sass mixins that calculate widths for columns and gutters.

You can use or not use features at will, and it works great. I'm trying to keep dependency chains light though, and most browsers in use today support flexbox.

I've read articles that say no to flexbox for layout, but whatever ... It does weird things if you're trying to lay out a grid though, not sure what I'm going to do about that yet. There's another CSS standard supposedly in the works called CSS Grid Layout Module.

Mostly the frameworks abstract away hacks. When CSS catches up and hacks aren't needed anymore, they will probably fall out of favor.
 
CSS is caught up already. Its coders who haven't yet, or just want a simple fix for mobile devises.That with soo many companies wanting to make money. I understand the money part, but devs don't learn anything if they pay someone to do their work.

Remember, a mobile browser is a stripped down version of a PC browser. So it in sense its stupid and needs to be told what to do. I the video, its uses meta tags to tell the mobile browser to listen and check the data. Although people call it CSS, its still the same code that was used before with Style. Style was just embedded or coded into every file. It was removed to make design changes easier.

Back before smart phone, the phones that had net capability, relied on WAP. All wap did, was took your site and used popular features. You had to tell it what you wanted the browser to load.
In theory, this is still the same, but a little easier to accomplish. You can write a new CSS file strictly for mobile device. That way, its easier to edit. Works on all devices and no chances of screwing up the site code. Example of this is facebook, hotmail and yahoo. They use M instead of www for mobile devices. So if you use www on your mobile device, it directs you to the mobile site. You can see it for yourself by removing www in facebook from your PC and add the M. You will go to the mobile site instead. This might beset up with the hosting server, but Iam not sure how that works yet.
 

smalpierre

New member
I disagree that CSS has caught up 100%. It's a WHOLE lot better than when I first saw it though.

Using floats and clearfixes for layouts, or block display is kind of hacky, and to get a grid there's a lot of redundancy.

I don't like using browser detection for mobile anymore. It's still done with large established sites, and often it's only the css that's conditional - not necessarily different html - which is a step in the right direction. The problem is that there isn't just one size to develop for. There's small phones, large phones, retina displays, high density displays on some androids, tablets of various sizes, landscape and portrait modes on all of these ...

It's just better to develop a site for the lowest common denominator and set media queries when the layout breaks. So I'm developing for a 320x480 at the smallest, with breakpoints going up from there. The site I'm working on now has a breakpoint that gets hit on an ipad in landscape mode (1024, but I'm using em, not px) and another that gets hit the first pixel above that basically - for larger screens.

The "desktop" media query is barely used, as the layout is very fluid. I think there was one thing that didn't look good on an iPad so I broke it out.

Sure CSS works now - and works well. Flexbox is a great step in the right direction, and a native grid is the other part. Sure you can use flexbox for grid layouts, but it can also be a pain if the bottom row is short an item or two - they don't line up with the other items, and in various ways.

Centering is a huge issue that flexbox got right. It's easy - you center vertical, and center horizontal. no need for negative margin hacks, it's one line of code. justify-content: center, and align-items: center.
 

Genesis

Administrator
Staff member
strokerace said:
CSS is caught up already. Its coders who haven't yet, or just want a simple fix for mobile devises.That with soo many companies wanting to make money. I understand the money part, but devs don't learn anything if they pay someone to do their work.

Remember, a mobile browser is a stripped down version of a PC browser. So it in sense its stupid and needs to be told what to do. I the video, its uses meta tags to tell the mobile browser to listen and check the data. Although people call it CSS, its still the same code that was used before with Style. Style was just embedded or coded into every file. It was removed to make design changes easier.
Well said. I haven't got time now but when I do I'm going to do a CSS specifically geared for hand held devices. If Duda can work it that I have an almost perfect CSS for a mobile phone in a minute, then it must be possible. Picked up so far that Duda focuses on navigation and elements of the menu before anything else. And obviously font size and screen width.
 
smalpierre said:
I disagree that CSS has caught up 100%. It's a WHOLE lot better than when I first saw it though.

Using floats and clearfixes for layouts, or block display is kind of hacky, and to get a grid there's a lot of redundancy.

I don't like using browser detection for mobile anymore. It's still done with large established sites, and often it's only the css that's conditional - not necessarily different html - which is a step in the right direction. The problem is that there isn't just one size to develop for. There's small phones, large phones, retina displays, high density displays on some androids, tablets of various sizes, landscape and portrait modes on all of these ...

It's just better to develop a site for the lowest common denominator and set media queries when the layout breaks. So I'm developing for a 320x480 at the smallest, with breakpoints going up from there. The site I'm working on now has a breakpoint that gets hit on an ipad in landscape mode (1024, but I'm using em, not px) and another that gets hit the first pixel above that basically - for larger screens.

The "desktop" media query is barely used, as the layout is very fluid. I think there was one thing that didn't look good on an iPad so I broke it out.

Sure CSS works now - and works well. Flexbox is a great step in the right direction, and a native grid is the other part. Sure you can use flexbox for grid layouts, but it can also be a pain if the bottom row is short an item or two - they don't line up with the other items, and in various ways.

Centering is a huge issue that flexbox got right. It's easy - you center vertical, and center horizontal. no need for negative margin hacks, it's one line of code. justify-content: center, and align-items: center.

What you are doing is reinventing the wheel. As I said,the site is only as good as the dev. For an example, my site looks the same on all browsers and devices.Its not even mobile friendly yet.From what I can tell, it will take me 30 mins to implement the changes from the video.Also, stop using em,its outdated and useless in todays standards.Don't use px either. Use auto or %. Gives better layouts and browser device friendly.

Check out my site in firefox, and chrome. It looks the same and that was done back in 2005,yet its stood up to all changes. And I am not happy with it and that is why I stopped back then.
my site
 

smalpierre

New member
Your site isn't mobile friendly BECAUSE it's trying to look the same across all devices.I use em's for the media queries instead of px though, that's what you're misunderstanding I think - you can't use percentages.

I do use percentages and em's in layouts. Like my holy grail - the asides are set in em, the content area is set to 100% so it stretches.

Also sticky footers, and equal height columns - EASY with flexbox, and zero hackery.


People said that tables worked fine for layout, and CSS was reinventing the wheel - and awkward.


On your site, it's fine on desktop, but you can't log in on mobile - not mine anyway. The content in the left column is too narrow for the text, so there's a LOT of wrapping, but more importantly the login form elements overflow and are hidden under the middle column.

The third column in portrait mode gets pushed down to begin at the lower right corner of the middle column. This is probably due to layout using floats, but that's a guess. it fixes itself somewhat in portrait but you still can't log in.

if you used em width on your left column, you'd have less problems because it the text flow would be the same as the desktop site, and it'd probably be wide enough to at least get a touch in on the input boxes for the login form.

So no, I'm not going to be doing it that way any more than I'm going to go back to html tables for layout.
 
smalpierre said:
Your site isn't mobile friendly BECAUSE it's trying to look the same across all devices.I use em's for the media queries instead of px though, that's what you're misunderstanding I think - you can't use percentages.

I do use percentages and em's in layouts. Like my holy grail - the asides are set in em, the content area is set to 100% so it stretches.

Also sticky footers, and equal height columns - EASY with flexbox, and zero hackery.


People said that tables worked fine for layout, and CSS was reinventing the wheel - and awkward.


Tables are out dated. Although they can look better then divs, as they tend to align better. But I use divs now. Yes, that is the key to a good mobile friendly site is to look the same across all platforms. Its what devs strive for. It takes less code, less headaches. I use no EM's as its not needed and causes issue on mobile devices as the browsers used can strip them. I amin the middle of doing my media CSS now. Using a320x700 device size. Which is about the average phone size. I will post a screenshot when its done. Then you can tell me whats might be wrong with it.
 

smalpierre

New member
I'm not saying you're doing anything wrong, just not the way I'd do it. And the fact is, that you are never going to get a site to look the same on a little window as a big one. The only way to make them look the same is to scale everything, and on a small screen you won't be able to read the tiny text without zooming.

So no - looking identical is not the same as being mobile friendly. I'm not saying you can't make it look similar, and look good - I've seen it done before - but you're going to end up focusing on the landscape layout, unless you constrain the width on desktop and have background sidebars kind of like these forums. They look ok on mobile too, but not exactly the same.

Carry on though - I want to see what you come up with for sure.
 

keltron

New member
I use Backbone for frontend.
It's enough simple and flexible, especially in when you update object's value ( http://backbonejs.org/#Model-changed ).

Javascript is very powerfull to frontend purpose, but you have to take in mind that the "BOT" and dinamic content are not compatible.

If your frontend is much dynamic, than i suggest use php to generate the page via request url, and update the frontend via javascript.
 

3834679

New member
I like doing mine from scratch, but if the job calls for it to be quick then bootstrap is good. It all depends on what you want to learn. Most of the time spent would be learning the new framework.