Web Design and Development |OT| Pixel perfect is dead, long live responsive design

Need help. Why is it that when the browser is vertically resized too small, height:100% pretty much breaks? Like so:

XjhXMSY.png


Code: 
<html>
<head>
</head>
<body style="margin: 0; padding: 0; height: 100%">
<div style="background-color: green; height: 100%">
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
<p>adsad</p>
</div>
</body>
</html>
 
I need to make a web app. It's not going to be huge and I just need the front end on top of my backend which is done in java using play framework.
Has anyone here used http://materializecss.com/ css framework. I like the look of it but it's still in alpha which has me worried.

I'm basically just going to be fetching json data with ajax to the site so I was just looking at jquery and possibly some css framework. If I can find a nice one. My priority is that it has to work well on mobile. Any recommendations or advice is apprecieted.
 
There are so many css/html frameworks... hard to recommend a single one.

Bootstrap is crazy popular, I'm sure you'll find a material port out there... foundation is popular, too... (list goes on forever)

I would try the frameworks you consider in all targeted browsers and look for the ui-components you need.


For the JS: you build a REST-API or is it more of a traditional approach where you render webpages with play and enhance them with Javascript? For REST Ember.js is a great solution, but prepare for a steep learning curve.
 
MrKnives said:
I need to make a web app. It's not going to be huge and I just need the front end on top of my backend which is done in java using play framework.
Has anyone here used http://materializecss.com/ css framework. I like the look of it but it's still in alpha which has me worried.

I'm basically just going to be fetching json data with ajax to the site so I was just looking at jquery and possibly some css framework. If I can find a nice one. My priority is that it has to work well on mobile. Any recommendations or advice is apprecieted.
Click to expand...

If you want Bootstrap and material design, there's bootstrap-material-design which became rather popular rather fast and thus is being constantly updated: https://fezvrasta.github.io/bootstrap-material-design/
 
Anybody use brackets? Seems like a slick text editor for coding and I'm liking it so far. My only other experience is with notepad++, though.
 
JesseZao said:
Anybody use brackets? Seems like a slick text editor for coding and I'm liking it so far. My only other experience is with notepad++, though.
Click to expand...

For the past year or so I have only used Brackets. It's lightweight and fast, has tons of features (and the rest are available via extensions) and it's constantly updated. In other words it's just great IDE for web development.
 
grmlin said:
Web/PHPStorm all the time.

Nothing comes closes in terms of HTML/JS/Coffee etc. coding support.
Click to expand...

Yeah. WebStorm is great, particularly since I'm a one-person web department. It has great language/library support, and I love how strict it can be with its warning and error messages. It's like having a pedantic asshole genius always telling me where I'm probably fucking up -- which is exactly what I need, since I don't have anyone else at work to go over my code with me.

Brackets does look pretty cool, though.
 
I've been using WebStorm almost exclusively for the past ~5 months. It's been a fantastic full fledged IDE. It is a beast though and takes a lot of space and a lot of RAM.

Brackets is fantastic, but I haven't gotten to the point of relying on just a text editor for everyday work. I will use them for small projects or if I want to just get something made up quick. And for that it's actually a tossup for me between Brackets and Sublime. I use CodeKit for live reloading on all my devices and auto-minification, so the preview through Brackets isn't much of an advantage. The new Extract feature for grabbing PSD data is absolutely fantastic though.

Anyways, WebStorm for 90% of the work and Sublime/Brackets for the other 10%.

edit: It is nice to see Brackets constantly updated and heavily supported though. Sublime is just stagnating.
 
PetriP-TNT said:
If you want Bootstrap and material design, there's bootstrap-material-design which became rather popular rather fast and thus is being constantly updated: https://fezvrasta.github.io/bootstrap-material-design/
Click to expand...

Thanks for this. I will look into it. The reason I was checking out materializecss was because I really like googles material design.

grmlin said:
For the JS: you build a REST-API or is it more of a traditional approach where you render webpages with play and enhance them with Javascript? For REST Ember.js is a great solution, but prepare for a steep learning curve.
Click to expand...

I'm building a restapi so it will only return a json response. I did some more research and I'm considering using backbonejs or angular for clientside, just not sure if they are a overkill. The web app itself is fairly simple so I just need to keep it clean and fast. I'm also kinda afraid of their learning curves so that's why I'm afraid of using ember. I'm not very familiar with web deving. I have mainly coded in java and scala, thus the reason I'm using java/scala play framework.
 
@MrKnives, as you are coming in from Java background, you should feel right at home with MVVM/MVC paradigms the popular frameworks like Angular and Ember utilize so there's that :)
 
I am using Ember right now at work (which I choose because I had been using Handlebars templates for around a year) and while I had

1) Quite extensive MVC experience from my Flex developer background (PureMVC, ugh the horror!)
2) The Handlebars mastery

the learning curve is still pretty steep. Not because I can't get it to work (that part is pretty easy!), but how to build the systems most efficiently without relying on repeating code etc. Big part of this is because Ember has been updating pretty fast and much of the solutions on StackOverflow etc. are now horribly outdated: many features have been introduced and/or simplified in the past few years, but the API docs, while extensive, aren't exactly the easiest to browse. But when it works, it's a joy to use.
 
So anyone have any advice on building a website from scratch? It seems pretty daunting so right now I'm just learning what everything means. Have made a website just following along as I went on treehouse from the web design course and now I'm learning css a bit more in depth. But I want to get to starting a personal project, only problem is I don't know how to even start besides I guess copying the basic elements from what I've learned so far then attempting to create a different website.
 
Nelo Ice said:
So anyone have any advice on building a website from scratch? It seems pretty daunting so right now I'm just learning what everything means. Have made a website just following along as I went on treehouse from the web design course and now I'm learning css a bit more in depth. But I want to get to starting a personal project, only problem is I don't know how to even start besides I guess copying the basic elements from what I've learned so far then attempting to create a different website.
Click to expand...

Grab a template/skeleton first if you are feeling overwhelmed. Build upon something that's already had a layout created.
No sense in diving all the way down to a website from scratch if you don't feel comfortable with the languages/tech yet.

You have the right idea with that bolded statement.
Grab one form here and start building upon.
http://foundation.zurb.com/templates.html

Once you have more experience you'll feel more confident with taking a blank document and turning it into something.
 
Granadier said:
Grab a template/skeleton first if you are feeling overwhelmed. Build upon something that's already had a layout created.
No sense in diving all the way down to a website from scratch if you don't feel comfortable with the languages/tech yet.

You have the right idea with that bolded statement.
Grab one form here and start building upon.
http://foundation.zurb.com/templates.html

Once you have more experience you'll feel more confident with taking a blank document and turning it into something.
Click to expand...

Thanks for the responses, I really do appreciate it. And yeah right now I'm not learning what all the elements I was typing out in css from the first course. Now it's starting to click as far how a site comes together. I know I'm kinda thinking ahead but I just want to be able to have something started. Figure if I at least have a skeleton of a site laid out I can build on that as I learn more and more rather than learning everything but with nothing to show for it. Since atm I'm typing along the code as I watch the videos. Kinda worried just because I don't want to still be lost after finishing a few more courses or the whole track itself and still have no idea how to make my own site lol.
 
Nelo Ice said:
Thanks for the responses, I really do appreciate it. And yeah right now I'm not learning what all the elements I was typing out in css from the first course. Now it's starting to click as far how a site comes together. I know I'm kinda thinking ahead but I just want to be able to have something started. Kinda worried just because I don't want to still be lost after finishing a few more courses or the whole track itself and still have no idea how to make my own site lol.
Click to expand...

You will be lost.

Honestly IMO the best thing you can do now is disconnect from the courses and start trying to go at it on your own.

Well, by yourself with Google by your side...
seriously, Google will become your most precious treasure. Use it.
 
Granadier said:
You will be lost.

Honestly IMO the best thing you can do now is disconnect from the courses and start trying to go at it on your own.

Well, by yourself with Google by your side...
seriously, Google will become your most precious treasure. Use it.
Click to expand...

So my intuition was right lol. I'm gonna get started on a project then. I've been browsing the treehouse forums and now I'll start googling since yeah I'm sitting here going these courses are awesome but I haven't done anything of function or value on my own yet.

edit:Also the one thing confusing me the most are the numbers in css as far as padding, margins, px etc. Like no clue how to judge and put in the right number for those elements
 
One of these days I will finally figure out if I wanna learn Ember or Angular if I ever have the need for them. I'm mostly leaning towards Ember cause I'm following the lead developer on twitter and his tweets make the project sound very competent. Plus right now I feel it's better if i just wait for whenever Angular 2.0 gets released and assess if it will be worth it.

grmlin said:
You write static HTML files? If you use PHP or any other language server side, there should be a way to get the current path of your file.

Relative paths should work fine though, as long as you don't nest the paths of your pages deeper than root level, of course.
Click to expand...

Using Node.js. I ended up resolving the issue from the server side, just setup a configuration in my startup JSON file if the app is hosted on its own domain or it's mounted on some other domain. Seems to work fine for now.
 
Nelo Ice said:
So my intuition was right lol. I'm gonna get started on a project then. I've been browsing the treehouse forums and now I'll start googling since yeah I'm sitting here going these courses are awesome but I haven't done anything of function or value on my own yet.

edit:Also the one thing confusing me the most are the numbers in css as far as padding, margins, px etc. Like no clue how to judge and put in the right number for those elements
Click to expand...

Here's a good explanation.
 
I downloaded bootstrap/grunt/jquery stuff earlier today and got it all installed. Probably going to need to find some youtube videos to get a better idea of how to use those tools. I'm still fairly new to modern web design/development, but I'd like to get a handle on the tools the competent industry folk use.

I can see the drag and drop functionality, but I need(/want) a better understanding of the framework.
 
I learned writing HTML/CSS/JS before it became a cool, hyped and permanently evolving thing. I think the toolchain was MUCH much more user friendly back then, as it was a blank editor window ;)

Now you have to deal with preprocessors, grunt, frameworks and whatnot. I ranted a lot about maven, java, grails etc. back then, the frontend of today gives me similar feeling at times.

- If you're interested in Javascript development, learn the language first. What I mean is: don't start with a framework. If you don't know what that prototype is, you'll be lost later.
- CSS is a ugly mess (at least in my opinion) and practice and long term experience is all that helps. Learn the basic concepts of CSS and than use it. (I prefer SASS btw)
- Write semantic and accessible HTML. Lot's of good articles on this subject can be found online.
- Don't jump on every hype train that rushes through twitter. You won't find time to code otherwise :)
- Not every project needs a huge app framework. Good old websites are still a thing.
- read the Web Development Reading List, awesome weekly summary for web development if you don't have the time to read hundreds of news at hackernews a day.

I still have tons of fun writing code, mostly because web development changes permanently. No time to get bored and old.
 
grmlin said:
I learned writing HTML/CSS/JS before it became a cool, hyped and permanently evolving thing. I think the toolchain was MUCH much more user friendly back then, as it was a blank editor window ;)

Now you have to deal with preprocessors, grunt, frameworks and whatnot. I ranted a lot about maven, java, grails etc. back then, the frontend of today gives me similar feeling at times.
Click to expand...

I couldn't disagree more, really. Sure it applies to very simple projects (and you can still do everything in the same fashion) but the modern web dev toolchain saves me hours everyday because I don't have to waste time doing mundane stuff multiple times a day. Web is much more robust in the year 2015 than it was in, say, 2008, which makes sense for the toolchain to be more robust too.

Of course you have to learn the basics first because you cannot skip that step. But the point is that you don't have to deal with preprocessors, taskrunners or frameworks, but you can and most likely should if you feel like you spend most of your time doing mundane crap instead of actually developing.
 
You misunderstood me :)

I can't go back. I love my grunt, coffee etc. Development was much worse in the past.

But it's much harder to get things going today, because it's so much you have to do and deal with.
I grew into it with the years. I think all that at once can be overwhelming.
 
grmlin said:
You misunderstood me :)

I can't go back. I love my grunt, coffee etc. Development was much worse in the past.

But it's much harder to get things going today, because it's so much you have to do and deal with.
I grew into it with the years. I think all that at once can be overwhelming.
Click to expand...

Well, in retrospect, I should have picked it up from the ";)", my bad :P
 
Hey guys. I've just published my first framework, Redshift, and thought some of you might be interested.

It's a UX engine that handles animation, input tracking and physics-based movement. You write the setter callbacks yourself, allowing you to output to any framework or technology (like the DOM, jQuery, canvas etc). Today's the first time I've shown anyone outside my mates so any feedback would be awesome!
 
MrKnives said:
I need to make a web app. It's not going to be huge and I just need the front end on top of my backend which is done in java using play framework.
Has anyone here used http://materializecss.com/ css framework. I like the look of it but it's still in alpha which has me worried.

I'm basically just going to be fetching json data with ajax to the site so I was just looking at jquery and possibly some css framework. If I can find a nice one. My priority is that it has to work well on mobile. Any recommendations or advice is apprecieted.
Click to expand...

PetriP-TNT said:
If you want Bootstrap and material design, there's bootstrap-material-design which became rather popular rather fast and thus is being constantly updated: https://fezvrasta.github.io/bootstrap-material-design/
Click to expand...

I've been obsessed with materiel design lately, these are two really awesome sources.

Thank you for sharing.
 
About stuff like Brackets, Webstorm and others... which ones work without a local server? I only really need it to see live changes when I edit my HTML/CSS. I was surprised I couldn't get Brackets' live editwork at home. It turns out I forgot I had XAMPP installed at work so live edit worked straight away. I don't see why I need to install a server just for Bracket's live HTML/CSS edit.

grmlin said:
You mean the div? What about min-height instead?
Click to expand...
I can't believe it's that easy. :( I take it that height is only evaluated when the page is loaded, while min-height always evaluates on resize?

And now somehow I can't get calc() to work. I got it working on a previous project, but it doesn't work here. As soon as I do any arithmetic inside, it completely ignores the entire value. eg.
min-height: 100% // works
min-height: calc(100%) // works
min-height: calc(100%-50px) // as if I didn't set any min-height at all (whatever is default)
 
Brackets starts up it's own server instance to have live reloading.

WebStorm doesn't have live reloading out of the box.
 
I prefer live reloading handled by grunt/gulp. All developers touching the project profit this way no matter what IDE is used.

And now somehow I can't get calc() to work. I got it working on a previous project, but it doesn't work here. As soon as I do any arithmetic inside, it completely ignores the entire value. eg.
min-height: 100% // works
min-height: calc(100%) // works
min-height: calc(100%-50px) // as if I didn't set any min-height at all (whatever is default)
Click to expand...

Try to add some spaces. At least in safari/chrome/ff it works fine this way. Calc is a little picky...

http://codepen.io/grmlin/pen/GgvGve

Code: 
min-height: calc(100% - 50px);
 
CodeKit is also a great solution that I've come to love.

~$30, but it provides live reloading on all devices. Starts up a local server for the pages, and then you just navigate there on any device.

Makes responsive, mobile development a breeze.

Obviously there's a lot more features to it beyond that.
 
It's all a matter of taste and project conditions I think.

I often have to deal with other developers, interestingly not everyone uses a mac or a specific app. ;)
It's great if all you have to do is

Code: 
$ npm install
$ grunt

But if it's up to you alone or you're in a team where all members are committed to the same workflow, it's great to install a single app and don't have to worry about build steps etc.
 
I've honestly never used Grunt/Gulp, so I'm curious.

How do they handle the live reloading?
 
In grunt I use it with a watch task, that watches files for changes.

In the browser you can include a livereload script or use a browser extension handling it. But to be fair, it uses websockets and older IEs will not livereload (no big deal, as no one really uses them for developing ;))
 
Interesting, I'm going to have to take a look into that.

Your point about CodeKit bring great for solo devs or a whole shop using it is valid. It never hurts to get familiar with more tech!
 
I'm having this weird issue when displaying a c3.js pie-chart in the webpage (if I disable it, all is behaving as intended). This happens in Chrome and Firefox.

to6wuae.gif


This is a "learning" project I'm doing so there may well be something obvious I'm missing.
I'm using material-design (v0.7, I know, I shouldn't have used it) and angular 1.3.5 although I don't think this is the issue.

Material-design (the html templating framework) uses flex-box as the CSS engine (when I get rendering glitches I'm thinking CSS).

Here's the css file I'm using:

body {
display: flex;
justify-content: center;
/*width: 100%;*/
}

.container-flex {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: center;
width: 1400px;
flex:100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
}

md-checkbox {
margin-top : 2px;
margin-bottom : 2px;
margin-left : 8px;
margin-right : 8px;
}

#piechart {
width: 200px; /* Or whatever */
height: 200px; /* Or whatever */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: auto;
justify-content: center;
}

Does anything seem wrong in the css file to you?
 
I've figured it out, no glitches with the following code:
.container-flex {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 1400px;
flex:100%;
flex-flow : column nowrap;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
 
Machspeed007 said:
I've figured it out, no glitches with the following code:
.container-flex {
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 1400px;
flex:100%;
flex-flow : column nowrap;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
Click to expand...

Nice.
 
I'm becoming a web developer at my current company. After using our software for 5 years I'll be building it. I thought I knew what I'd be getting myself into, turns out I have no idea. Luckily everyone knows what a huge pile of mess the legacy code is so they are quite forgiving.

Do you guys visit any blogs to keep up with what's new and hot in (front end) web development?
 
You must log in or register to reply here.

Similar threads

Sports betting |OT|
7
11K
Hideous Snake replied
ItalianGAF |OT| - Italia
3
1K
Azzurri replied
Food |OT| GAFeteria
2
77
19K
SLoWMoTIoN replied
Tabletop & Board Game Design |OT1| By Peoples for Meeples
2
50
8K
RelentlessRolento replied
Supergirl S3 |OT| Long May She Reign - Mondays 8/7c on The CW
4 5 6 7 8
361
49K
Grizzlyjin replied
Top Bottom