BEST.TUTORIAL.VIDEO.EVER! Thanks man, so helpful. I'm curently strugling with CSS layouting. Getting frustated with native positioning. But this save me a lot. Definitely gonna subscribe!
I'm sorry man, I love your videos, but I'm really not a fan of this shorthand CSS. I'm still fairly new to web design and this just confuses me. Also, I'd like to be able to use this in other browsers and would like to know all that "webkit" stuff I keep seeing. Well, in any case, I'll probably come back to this video in a few months when I get better and understand CSS better.
For a person who is doing everythng in vanila css it's pretty hard to understand what's going on here. I mean flex is the new thing, but sass or scss which you are using makes it even more complicated. Probably this lesson is for professionals.
I'll tell you that the sass stuff is not so hard. It's just missing the brackets so you could just add them in and not need a compiler. the jade stuff has special syntax. like no tags you could right your elements like css. but you need some type of compiler but you could also translate that your self.
Probably at the beginning it is but SASS is not that hard at all to understand. You just need to learn to visualize it •SASS don't use brackets to introduce proprieties or semicolons at the end of a statement Here's an example (I'm writing this from my phone, I hope it will be visualized correctly!) •CSS .wrapper { padding: 30px; } •SASS .wrapper padding: 30px And if you want to nest elements you just put them beneath its parent (yes, SASS basically works by analyzing spaces and identifying parents and children •CSS .wrapper { padding: 10px; } .wrapper .div1 { background-color: red; } •SASS .wrapper padding: 10px .div1 background-color: red See how .div1 was in the same line as wrapper proprieties? That means that I'm referring to the wrapper child called .div1 And since background-color propriety was inside .div1 that means that background propriety is referring to .div1, child of .wrapper Everything else in this video are normal CSS proprieties.
I wrote all this for whoever need it and Is having problems with SASS syntax understanding. By the way. Don't know if you was just making a consideration or needed help :)
Don't worry about the SASS or Jade verbaitm in this video. Just get the gist of what he was saying, imagine what that would look like in html and css, and use your intuition as to how to progress in the example. I found the first example to be beginner friendly and I'm nowhere close to getting at SASS or Jade yet.
Hey, great video! I was wondering if set max-width solves the problem of justify-content: space-between. I believe the problem will show again if there're 2 more shots, and they are going to be separated from each other leaving huge space in between, any fixed about that?
This isn't specific to this video, but to all of your videos really. Why do you always use classes and not IDs? Even when there is definitely only going to be one instance of that object, you seem to always make classes rather than IDs.
what would you do if you had 14 box while one line contains just 3 box? how can you fix last line? is there any solution you know or its just impossible with flex ? :D
Just a note, I had to place "align-items: flex-start;" to the content, since stretch is default and my Bill Murray in media object was still streched. Does this makes sense?
hi... i am having problem ... the problem is whenever a paragragh is insert into the main container, it push the two side divs . plz help . and sory for my grammar.
Hi thank you for tutorial great stuff, I couldn't' find a repo on github for this tutorial. I f you have a chance can you submit it or point me where it is. Thank you for your time
+DevTips Yes I did, and unfortunately I don't see this repo github.com/DevTips I checked your personal as well github.com/travisneilson I cant find repo named Rebuilding Dribbble (or any similar names) Here is the repos I see: Parallax-on-the-Web-DevTips- Artists-Theme Jekyll-Powered-Podcast-XML-Generator DevTips-Starter-Kit splash-page-and-modal How-to-get-more-signups-using-browser-cookies Codepen-example-base CSS-Grid-Frameworks-Series Animated-Music-Player Zooming-Header Custom-Animated-Checkboxes javascript-templating Responsive-Web-Design-Basics HTML-and-CSS-slide-out-navigation thank you
Hey Travis, I have a question about a margin that appears when divs wrap to the next line. It's roughly 10px on the bottom. Any ideas on how to remove that? codepen.io/mLirette/pen/PqQWab - example of where I'm seeing this margin. Thanks in advance!
halox80 You can use it now, if you are brave enough! Haha. Actually you can, tho. It really depends on your audience. For example I don't have any issue with using it because my audience (you) are tech-minded and likely have a current browser. You can check analytics to help you make a descision.
first, thank you very much for your videos, i learned so much from you, kudos man :) and regarding that issue @31:31, declaring a fixed width doesn't really fix the issue. if you have dynamic content and can't control how much boxes are in one row, like in your example you had 12 so 3 rows, perfect, but how about if you had 15 boxes? you'll still get a last row with 3 box separated according to the space between them, any other property to avoid that? not that im complaining really, really glad i stopped using floats :D
For a tutorial i might be better to use just HTML and CSS ... i might be a little more work but not every one is using preprocessors and those who don't wont understand it but those who do sill understand plain code.
+DieQwietscheente if you click on the codepen link below the video you can actually see the compiled versions of what he has wrote i.e. it will convert it to plain code
Liked the video as usual(I'm watching all of them from the first one) but one thing I still can't get over is the fact you rely so much on sass/jade and CodePen. I know they're good and faster but for a tutorial it would still be way better if you showed us everything from scratch in normal html + css via your code editor of choice. I know we have all the styling and such on CodePen but getting lost on this stuff is easy and starting with a lot of assumptions already ain't the best in my opinion. I followed the first topics easily since I already knew them but now that we start doing more advanced stuff and I'm still not practical with FlexBox seeing preprocessed html and preprocessed css is not helping at all :/ I mean, if I have to learn I wanna start literally from a blank document and build everything from there to have my own copy which I wrote along you since that really helps to acquire the stuff you're writing instead of just "seeing it" and then feeling lost when you're trying to reproduce it on your own. EDIT: I forgot it should also be useful, if you'd still want to stick with Codepen, SASS, Jade and bourbon, to give us the starting CodePen also so we can follow. I also understand that with what I'm requesting the video would be much longer and that you're also showing us the power of Sass + Jade when writing but still, building from scratch would be way easier to understand...or maybe it's just me, checking the Jade episode now to better understand this one :)
AndreCorner just so you know I watched the Jade video and can't believe I worked without it so far, I'm using Prepros instead of the one you use in that video though because it's 100% free it seems. That being said I still think that for lessons building with vanilla html + css and in the code editor from scratch would be better, but on the other hand I know it's time consuming so yeah, you choose but you're still awesome :)
AndreCorner I'm glad you watched the Jade video. I know that it may put a few people off, but honestly, if I'm gonna go through all the trouble of making these videos, I'm going to need to use that makes me happy/excited. thanks for your patience/understanding
DevTips true that and to be honest after writing some markup with it for one-two hours only I can see why you won't come back to vanilla, it's just THAT better, faster to write and better looking. The only thing that you could still "improve" is not working on files where huge styling has been applied already imho. I'm following all of your videos and you jump from the html5+css3 basics to stuff like this but in that series you cover, as you said, the basics but then jump directly into the "heavy designed" stuff. I know how to reproduce this but opening the codepens or seeing your editor makes it still a bit confusing like I have to stop and understand what's doing what, for a beginner that would be nearly impossible imho. Still a great series, loving every video anyway!
+DevTips jumping from your flex box to this was jarring for newbies like me. I dint even see any mention that your code is preprocessed until i read the comments.
Can you do a tutorial on FlexBox and modernizr? I feel like a feature detection system for FlexBox is important in cases where someone has an old browser. I subscribed because the 3 videos I saw from you were useful.
With repeated parts of code we can do even better (not only mixins), jade allows us to do iterations: - var images = ["img1.jpg", "img2.jpg", "img3.jpg"] - var links = ['www.firstlink.com', 'www.secondlink.com', 'www.thirdlink'] - var names = ['John', 'Andy', 'Liza'] - var avatars = ['av1.jpg', 'av2.jpg', 'av3.jpg'] each img, index in images //just fake numbers - var views = Math.floor(Math.random() * (15 - 13000) + 13000) - var comments = views/10 - var likes = views/100 +shot(img, views, comments, likes, avatars[index], names[index], links[index]) That's all the shots :)
What is wrong with that Travis guy? I tell you: Absolutely 100% nothing :) Travis, I am a clunky old school vanilla css guy and all that learning of those helper tools like Jade, Sass, Bourbon, Vodka is kind of postponed because I need to go production first. Although I know I would be faster being good with then I can not go the risk of wasting time having to search f.e. an indentation error not knowing what I am doing. I can imagine that some of the viewers have a similar problem. So your videos seem to us kind of non accessible at first sight. But since you provide that CodePen links I found out that that in fact it is well accessible. There is one button that changes everything: "Toogle compiled view" It is just a feeling, but if you keep that good codepen way I think just telling us Vanillas at the start of a video - that we don't need to panic, there is this one magic button as a fallback to where we feel more secure looking on what we better understand would at the end result in larger viewer numbers that don't skip over that great content you provide.
I must have missed this comment. Sorry for not replying earlier. This is goden feedback. Thank you for letting me know that this is working for you. I really like the idea of codepen-based tutorials too. Thanks for pointing out the accessibility for the vanilla lovers.
In Part 1 and Part 2 of this video there's a black border around the content and some additional fonts (Lato?) imported as well. Also, in Part 3 of this video you did lots of styling in your external CSS w/ partials. Can we see THAT code? For me, that's some of the best stuff b/c it shows us how your importing fonts, what color schemes you're using, and all the Syntax and tools your using. So I guess what I'm asking is, can you share ALL your code with us? As always, thank you for everything you do for us!
@Travis Neilson bro your Videos Is really Helpfull to me .. I,m a big Fan of your's bro.. you are Awesome .. I learn Jade Nd i Also learn Sass .. it's really easy to do a project with Jade nd Sass .. i think i'm falling love with jade Bro .......... :) and Keep hacking :)
Why did the img shrink at 15:10 when you use max-width: 300px and display: flex? Shouldn't it stay 50*50px and the text should occupy the other remaining space in the box of max-width: 300px?
Hey Trav, I know this is about flexbox, but I'm wondering if you could show how to develop something similar to the _shots.jade code. I'm trying to understand how to import the metas for the likes, views and comment, and additionally how to establish the sections.shots container... Or is there a link you know I could browse to learn? Thanks man...
Are there any particular website parts which you will recommend to style with flexbox, and those you will not recommend using flexbox at all? Because now it looks like one can make all of html blocks display: flex right away to make things short and sweet and not even bother with block/inl-block
In the codepen example I notice that the 'fillmurray' example image is not behaving responsive, unfortunately! I mean, when the window is shrinked to a minimum width.
I had a problem with my blog " Using Grid Style " and when a post has more text or content, the next posts in the following row goes under the next post. Sorry, I can't explain it well.
Hi Travis! Thanks for all the great tutorials! I want to make a music player like it is on Native Instruments. Ho can I make these great waveforms? Would be great to see a tutorial about that music player on your channel in the future. ;)
that little thing where upon each change your layout transitions to it's new location based on your changes. what is that? apologies if I'm entirely missing something obvious.
great tutorial. fyi though the youtube controls pop up and cover the annotations when i mouse over them making it impossible to click them. unless i'm just missing something obvious.
Hey, at the end of your Flexbox Essentions vid, you still have it showing "Video coming soon" instead of a link to this vid. Just thought you'd like to know!
Hey Travis, nice video. Question: I know you're a big thoughtbot/Bourbon guy, and perhaps you've used thoughtbot's Neat grid system as well. How do you think such a grid system fits in with using FlexBox, or do you advocate not using a grid system at all (and simply use flexbox)? It looks like Neat is using floats under the covers, so I wondered if you've run into problems with using FlexBox for some things and Neat for other things in the same layout. Or any advice about these issues.
there is no issue with using flex and floats together. They do different things. Now, using them in the same grid system may not be ideal. In the new series I build a flex grid from scratch. Grids don't need to be complex... unless they need to be :)
Hey Travis I've been trying to use Flexbox on my site and I have it working perfect in Firefox and Chrome but Safari just won't seem to display it the same. Instead of 2 rows with 3 images it just stacks them on top of each other. Any idea of a work around? I'm trying this on Safari 8.0.5 but looking at some spec it looks it should be working since I'm using all the prefixes required.
In the three column layout, was there any reason you moved the order of the nav to -1, rather than just putting it first in the dom? Or was that just show show off order?
Will flexbox work for ie9? Or, if it won't work straight out of the box, is there some special code (I've heard of html5shiv) that I can add to make it work for ie9 users? [FYI - I am not a web designer but I inherited a simple webpage for our team at the office. It's a Windows Enterprise environment and there is quite a bit of ie9 running. I love your videos!]
Nice series on flex, in theory this eliminates the need for neat grid system and you just use bourbon on it's own and just use flex to position, ill be trying this out in a few days should work pretty well, cheers.
Hey. Great videos. You really helped me a lot getting grip on flex. The layout you made with a sticky footer that stays at the bottom even if there is little content was just what I needed. Unfortunately, as it turned out, that sticky footer is not so sticky after all. If you add some content and scroll down, the footer scrolls together with the page, like it was stuck to the page not the vieport. Here's my example gph.is/2bYQeLb . I also tried your codepen, It doesnt work as expected either. Any idea how to sort this out ? Any help much appreciated.
Are you considering doing some AngularJS? I never got the courage to start with it and it's one of the most requested frameworks on every front-end jobs I find. Hugs, and thanks for the awesome videos! :)
The whole video is awesome. In fact all your video are very ... awesome (i don't know another words :) I like the idea with the three buttons. I clicked on them just to see if they work well :))
Simion Chis Thanks Simon, I'm trying new things all the time. The three buttons was an interesting idea, but they were also really fussy to make. We'll see how useful people think they are.
flexflow is the shorthand for flex-direction and flex-wrap together, so instead of declaring tow separate properties "flex-direction: column" and "flex-wrap: wrap", you declare "flex-flow: column wrap" or any of their separate properties
Alright, I'm going through the responsive desing from scratch playtist and I'm quite happy with it. Building my own site with jekyll, not step by step the same, but just following general rules. Getting stuck with positioning, auto margining, floating and whatever. Noticed you used +display(flex) bournon mixin, not paying too much attention. Today, I woke up, took my phone and just youtube searched css flexbox. Discovered this. I had to pause the video and just breathe it out. I can't describe the feeling. Flexbox is just so great. I haven't been fan of grid systems because I quite never knew how it worked and was so lazy to go trough the css. But now I can write my own and know exactly how it works. I'm one hundred per cent positive that flexbox will save not hours, but days of my life. Thank you, Travis, for showing us. I really appreciate that.
hi travis i'm really enjoying your videos. i have a question how did you do the video thumbnail was it with photoshop ? and can you do it using css layouts ?
Yo Travis, i got a tip for you this time! If you don't want the codepen to reset to the top everytime you edit the html, you can add an ID to the div you're working on and then you can inspect the where your project is loaded and add #yourDivId to the src url. Then when you edit the html, codepen will reload the hooked to your div. It is actually were quick to do and works well. Nice video btw :)
First I will say „thank you“ for all your work and you doing this in an very sympathetic way. But what I don‘t understand: why you must use „JADE“ - Template Engine!!?? The first question you must have before you begin with an Tutorial: for whom will I doing this? Are your Tutorials for professionals who know all and every thing? I guess you doing this for beginners or semi-professional who all (I bet with you) uses codes platformes like Brackets od CodePen with normal css3 and html5 - not your funny „JADE“. Or is this something like happy hour - „two in one“ Tutorial huu? So far I know it's primarily used for server-side templating in NodeJS.
Thiiiiiisss videooo!! I love you... not in a weird way, I.just.love.you., It was a little bit hard to understand since I haven't used sass, buuuut thanks for doing a practical video, it helps a lot!
hello, i say at the outset that you're doing a great job. I have a question about this film. whether it is possible that the last line of the picture is aligned to the left , if so, can you demonstrate how to do it , thanks in advance.
Hey Travis! Great vid man thanks a lot! Would you say that flexbox is going to be the new standard way to layout web pages as opposed to float layouts and stuff? Thanks again =]
How would you go about spacing it if say each row weren't always guaranteed the maximum number of entries (in this case 4). Obviously, you wouldn't want such huge gaps between each piece of content... now this is my first foray into the world of flex boxing, but the float solution seems pretty easy in this case.
You could do a number of things. Maybe use margins to endure the minimum space between the shots, use justify-content: center, and then make the shot width a % instead of a hard px.
ah good point with the justify-content: center... for some reason I kept thinking about using the flex-grow: 1 or whatever it's called, but then that would limit any obscure sizing. I have a project for work that needs to be done in only 2 weeks, luckily the design was completed by an agency. Still, this flex-box should help tremendously... as long as the company doesn't mind the lack of support for IE9
Thanks for the vid! It's great to be able to have the codepen example to tinker with while watching the ep. Can open the example up, try to predict what code does what on the example, then watch your vid, it's great! Keep up the great work!
I haven't seen a combination of "see and do" with other youtube channels. Codepen + video lesson is definitely unique! Really emphasises the "Keep on hacking" ethos :D
