|
gbaby posted:but you have to explicitly set all of those different column classes for different browser widths Well to be fair that's only if you want the grid to change at those breakpoints. I find the bs grid semantics to be really easy to remember but I'm super used to it.
|
#
?
Dec 20, 2016 04:41
|
|
|
|
| # ? Jun 3, 2024 21:20 |
|
|
CSS frameworks are dumb and you shouldn't use them.
|
|
#
?
Dec 20, 2016 06:09
|
|
|
I like using Neat, presentational classes are ugly and annoying to use for most sites.
|
|
#
?
Dec 20, 2016 11:13
|
|
|
I did it the lazy way and just bound things like .copyright { @include make-col(..); } because I didn't like having a dozen col-*
|
|
#
?
Dec 20, 2016 12:27
|
|
|
kedo posted:CSS frameworks are dumb and you shouldn't use them. we would all love to have unlimited time to develop projects but in reality you have to accept that you can't reinvent the wheel every time and so you use someone else's already written and meticulously tested code, is that so bad?
|
|
#
?
Dec 21, 2016 05:44
|
|
|
Is there any good blog posts/tutorials on building your own grid system? I've always used a framework like Skeleton, but I want to actually learn how it all works.
ddiddles fucked around with this message at 07:38 on Dec 21, 2016 |
|
#
?
Dec 21, 2016 07:36
|
|
|
I'd just suggest you dig into the math for neat or susy, that's probably easier than starting 100% from scratch.
|
|
#
?
Dec 21, 2016 14:18
|
|
|
kedo posted:CSS frameworks are dumb and you shouldn't use them. I used to agree with this completely, until I realised how much more productive I was using a framework. Now I just see it as an extension of using something like Normalize. I can carry the conventions between projects and teams. Even when I was using BEM for everything, I'd often name components slightly differently between projects which was always annoying when I came back 12 months later. ddiddles posted:Is there any good blog posts/tutorials on building your own grid system? I've always used a framework like Skeleton, but I want to actually learn how it all works. This is an oldie but goodie https://css-tricks.com/dont-overthink-it-grids/
|
|
#
?
Dec 21, 2016 20:38
|
|
|
I have a simple problem that is perplexing me. I have a div that surrounds two images. One is an overlay, and the other is full width. code:Any idea why this is happening?
|
|
#
?
Dec 21, 2016 21:04
|
|
|
Is your container class set to position: relative? Can you reproduce the problem in an isolated small fiddle/codepen?
|
|
#
?
Dec 21, 2016 21:11
|
|
|
ynohtna posted:Is your container class set to position: relative? Can you reproduce the problem in an isolated small fiddle/codepen? I love you. Setting the parent container to position: relative fixed the issue! I got another simple css question that I can't seem to google: I have a container that is slightly smaller than the image I want to put in it. FOr simplicity sake I don't want to stretch the image, I am fine with it being cut off, but I want the TOP of the image cut off not the bottom. What is the easiest way to accomplish this. edit: Nvm I am an idiot, position:absolute bottom 0; double edit: But how would I achieve this with a background-img? Knifegrab fucked around with this message at 22:14 on Dec 21, 2016 |
|
#
?
Dec 21, 2016 22:10
|
|
|
If you're in modern CSS & browser land then a combination of background-size: cover and background-position: center bottom (may need other values) could do the job. I find doing this stuff with an <img> to be easier, though.
|
|
#
?
Dec 21, 2016 22:28
|
|
|
Knifegrab posted:I love you. Setting the parent container to position: relative fixed the issue! background: url(blah.png) bottom right;
|
|
#
?
Dec 21, 2016 22:29
|
|
|
You guys rock.
|
|
#
?
Dec 21, 2016 23:32
|
|
|
Heskie posted:This is an oldie but goodie https://css-tricks.com/dont-overthink-it-grids/ That's exactly what I was looking for, thanks!
|
|
#
?
Dec 21, 2016 23:39
|
|
|
I made a kickin rad website for my kickin rad educational outreach group at http://ykmathcircle.com. There's a problem though - lots of email servers are blocking emails that contain links to it, sometimes citing spam concerns. Most recently, I got: quote:The error that the other server returned was: There was a different failure code from a different mail server a while back, but I can't track it down right now. Any ideas? Any red flags in the source / hosting / etc? It's gh-pages hosted, Jekyll built. The site is active on cloudflare (I can't say more than this, because I'm not sure what exactly cloudflare does for a website). I'm really at a loss. It sucks not to be able to link the page in emails about the group.
|
|
#
?
Dec 22, 2016 05:27
|
|
|
Newf posted:I made a kickin rad website for my kickin rad educational outreach group at http://ykmathcircle.com. How are you sending mail out? Who's your mail provider? Are you actually sending mail from your domain or a service? Is your domain blacklisted?
|
|
#
?
Dec 22, 2016 06:38
|
|
|
Newf posted:I made a kickin rad website for my kickin rad educational outreach group at http://ykmathcircle.com. I dunno what's up with your site, but it lags like crazy. Getting maybe 3-5fps when scrolling, even highlighting text is laggy? Happens for me in Chrome on Windows 10, seems to be fine on Edge though, no other sites are acting like this in Chrome. Just a heads up.
|
|
#
?
Dec 22, 2016 07:37
|
|
|
The Fool posted:How are you sending mail out? Who's your mail provider? Are you actually sending mail from your domain or a service? Is your domain blacklisted? I'm just sending an email via my own gmail account. I've got no idea how the domain might have been blacklisted. ddiddles posted:I dunno what's up with your site, but it lags like crazy. Getting maybe 3-5fps when scrolling, even highlighting text is laggy? Happens for me in Chrome on Windows 10, seems to be fine on Edge though, no other sites are acting like this in Chrome. Thanks for that. I had seen this lovely behaviour on a mobile browser but shrugged it off. Chrome sort of matters, so I'll look into it. It's got an onscroll event that checks the scroll height in order to toggle the nag headers appearance. Maybe that gets fired more than once per frame in some browsers.
|
|
#
?
Dec 22, 2016 08:06
|
|
|
Regarding the site performance, it's the svg in the header, just replace it with a png.
|
|
#
?
Dec 22, 2016 10:54
|
|
|
Ninja.Bob posted:Regarding the site performance, it's the svg in the header, just replace it with a png. Yep, removed that svg and it scrolls normally. Thats a pretty intricate design that would need to be redrawn every frame.
|
|
#
?
Dec 22, 2016 11:25
|
|
|
Newf posted:
Mobile/ devices now account for more than half of web traffic. Don't shrug it off unless you have a very specific use case.
|
|
#
?
Dec 22, 2016 12:29
|
|
|
Lumpy posted:Mobile/ devices now account for more than half of web traffic. Don't shrug it off unless you have a very specific use case. That very much depends on the audience. A site I worked on had 0.1% mobile traffic. Use analytics don't guess.
|
|
#
?
Dec 22, 2016 21:32
|
|
|
The Wizard of Poz posted:That very much depends on the audience. A site I worked on had 0.1% mobile traffic. Use analytics don't guess. So you are saying if you have a specific use case you can ignore it?  Using analytics is wise though, but my point which I apparently failed to make was that offhandedly ignoring mobile is not a good idea.
|
|
#
?
Dec 22, 2016 22:21
|
|
|
The Wizard of Poz posted:That very much depends on the audience. A site I worked on had 0.1% mobile traffic. Use analytics don't guess. Even still I'm pretty sure google penalizes for not having a mobile friendly site. I use their checker tool all the time just to cross off a line item
|
|
#
?
Dec 23, 2016 12:54
|
|
|
Noslo posted:Even still I'm pretty sure google penalizes for not having a mobile friendly site. I use their checker tool all the time just to cross off a line item As of when this rolled out last year, the not-mobile-friendly penalty applied only for searches done from a mobile device. Don't ignore mobile, but you don't need to panic about it.
|
|
#
?
Dec 23, 2016 17:14
|
|
|
McGlockenshire posted:As of when this rolled out last year, the not-mobile-friendly penalty applied only for searches done from a mobile device. Didn't they make mobile their primary index earlier this year though?
|
|
#
?
Dec 23, 2016 18:39
|
|
|
Kekekela posted:Didn't they make mobile their primary index earlier this year though? Can you say where you read about this? The mobipocolypse was in April 2015, not this year. Everything I can find about the not-mobile-friendly search result penalty is from that era, and it only talks about searches made from mobile devices.
|
|
#
?
Dec 23, 2016 19:34
|
|
|
Pretty easy to find tons of articles about it, but it's not exactly related to how you create your site, but how people access google. Either way to not have some sort of mobile layout is just flat out ridiculous unless we're talking about a desktop web application.
|
|
#
?
Dec 23, 2016 23:20
|
|
|
So I am wrestling with responsive design, and I have kind of come to a philosophy question. Is it sometimes best to just output the displayed information twice (one that is hidden at certain breakpoints and vice versa)? Once in a way that is organized for desktop and one for mobile (or whatever breakpoints you have set.)? I am realizing that while I can do A LOT with css to change the different responsive sizes, I can't do everything...
Knifegrab fucked around with this message at 01:45 on Dec 24, 2016 |
|
#
?
Dec 24, 2016 01:27
|
|
|
Knifegrab posted:So I am wrestling with responsive design, and I have kind of come to a philosophy question. Is it sometimes best to just output the displayed information twice (one that is hidden at certain breakpoints and vice versa)? Once in a way that is organized for desktop and one for mobile (or whatever breakpoints you have set.)? I am realizing that while I can do A LOT with css to change the different responsive sizes, I can't do everything... I feel that if you have to do that kind of thing something went wrong in the design stage. Things flow in a certain, predictable, way. So yeah, output whatever you need twice if changing the design is not an option. It's kinda out of your hands. Edit: Or make a mobile site. It's a different kind of terribleness but a valid option if the design is not really that responsive. lunar detritus fucked around with this message at 02:58 on Dec 24, 2016 |
|
#
?
Dec 24, 2016 02:53
|
|
|
Screen readers don't see display none so it's 'fine', but usually makes things harder to trace and maintain down the line once the site gets to a certain size. Whenever given a desktop design I always try to lay out the markup in a way that makes sense from a document perspective, and then do any design concessions after. 'Typically' that should result in a code structure that works in mobile, and then you're just gradually adding a smattering of layout styles as the page grows out to desktop sizes.
|
|
#
?
Dec 24, 2016 05:55
|
|
|
Lumpy posted:So you are saying if you have a specific use case you can ignore it? Eh, you're right I misread your post my bad. We agree
|
|
#
?
Dec 24, 2016 11:08
|
|
|
This thing is driving me insane. Someone gave it to me as a riddle and I cannot crack this puzzle. I conceded defeat, but it keeps haunting me. I have a list of requirements: 1. Text centered vertically in boxes. 2. Text centered horizontally in the said boxes. 3. The whole body of the boxes are clickable links, both horizontally and vertically. 4. The boxes sometime have one line of text in it, sometimes two, sometimes three. 5.  No Javascript. That's the rule of the riddle. Otherwise I'd just onclick and call it a day.6. All of the boxes must be of the same height, enough to fit the whole content in the most full box. It is totally fine to set some fixed height to any of the components, but not the number of lines they contain. 7. Not attached to any specific method, besides avoiding JS. Skil level: I'm a web design moron who thought he is smarter than he is. Here is the closest I got to be at, using table cells: http://jsfiddle.net/m1mskfbe/3/ The second box is clickable anywhere, even not on the text. The first box is clickable on the entire width of the box, but only for the heights that have the text. I want the whole box to be always clickable, even if there is no text for a given verticality. please help it hurts so much
|
|
#
?
Dec 24, 2016 15:00
|
|
|
No Gravitas posted:please help it hurts so much With flexbox: http://jsfiddle.net/m1mskfbe/4/
|
|
#
?
Dec 24, 2016 15:30
|
|
|
gmq posted:With flexbox: http://jsfiddle.net/m1mskfbe/4/ I think I love you.
|
|
#
?
Dec 24, 2016 15:31
|
|
|
McGlockenshire posted:Can you say where you read about this? Can't remember if this was the original article that I saw, but they talk about it here: http://www.businessinsider.com/google-changing-index-splitting-into-desktop-and-mobile-2016-10 the third paragraph posted:...Google is prioritising the mobile index over the desktop one...
|
|
#
?
Dec 24, 2016 18:36
|
|
|
Knifegrab posted:So I am wrestling with responsive design, and I have kind of come to a philosophy question. Is it sometimes best to just output the displayed information twice (one that is hidden at certain breakpoints and vice versa)? Once in a way that is organized for desktop and one for mobile (or whatever breakpoints you have set.)? I am realizing that while I can do A LOT with css to change the different responsive sizes, I can't do everything... I've been wondering this myself. I've been working on a site with a lot of diagrams to go with the text, and I want it so that on wide enough screens some diagrams move to a second column alongside the text, while on narrower screens everything is just a single column. I've got this working fine using "display: inline-block," but every now and then I come across a situation where the best two column layout would require the content in a different order than the best single column layout, and I can't decide which to favour. I feel like the best solution might just be to duplicate some stuff with one element hidden and use a media query to switch between them.
|
|
#
?
Dec 24, 2016 18:41
|
|
|
Kekekela posted:Can't remember if this was the original article that I saw, but they talk about it here: http://www.businessinsider.com/google-changing-index-splitting-into-desktop-and-mobile-2016-10 After following that to the source article, I eventually was reminded by this article that the Google Webmasters blog still exists. Mobile-first indexing went live in November. quote:To make our results more useful, we’ve begun experiments to make our index mobile-first. Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results. Of course, while our index will be built from mobile documents, we're going to continue to build a great search experience for all users, whether they come from mobile or desktop devices. McGlockenshire fucked around with this message at 19:01 on Dec 24, 2016 |
|
#
?
Dec 24, 2016 18:53
|
|
|
|
| # ? Jun 3, 2024 21:20 |
|
|
McGlockenshire posted:After following that to the source article, I eventually was reminded by this article that the Google Webmasters blog still exists. They're not saying that they will rank your page higher or lower, they're not talking about pagerank at all. They're saying that the content included in the result text will be drawn from your page using a mobile-first approach. If your content is the same when visited on mobile and on desktop, (including not having a mobile version at all) then you won't see any difference. quote:If you only have a desktop site, we'll continue to index your desktop site just fine, even if we're using a mobile user agent to view your site. (In fact, even the Business Insider article is not talking about pagerank either). putin is a cunt fucked around with this message at 01:23 on Dec 26, 2016 |
|
#
?
Dec 26, 2016 01:20
|
|