Menu icon Foundation

Designer

My Posts






My Comments

Nick Caldwell commented on Nick Caldwell's post over 3 years

These are very good, keep them coming, you guys.

I have a variant that I'm working on with tabs, but it's not going terribly well.

http://codepen.io/Rocketpilot/pen/7fa21b71422f6a824d6e67a26b93d8ea

I've made life a bit harder for myself by putting the tab content area into a different column, to achieve a design I'm working on. The idea will be to have existing content that hides out of the way when the user clicks on a tab.

Nick Caldwell commented on Nick Caldwell's post over 3 years

Those are some damn fine examples, Rafi. Thanks! I take it Tabs shouldn't pose any additional complications on top of that? I should be able to adapt what I see for some of the other constructs.

Nick Caldwell commented on Suzy van Houten's post over 3 years

Raft's method works, but requires a fixed height; my way wouldn't work on mobile without an extra media query to maybe alter the background image positioning for smaller screens. An interesting problem!

Nick Caldwell commented on Suzy van Houten's post over 3 years

Sorry, yes, to be honest I got a bit confused as those links auto-redirected for me in various annoying ways so I wasn't sure what I should've been looking at.

Well, when I want to do "full bleed" stuff I'd wrap the row in a "container" div that has no specific width set. If your design isn't containing everything inside a "page" div with a width set, the container will go edge to edge.

eg:

<body>
<div class="container">
<div class="row">etc</div>
</div>
</body>

And set the background properties roughly as indicated. You'd probably need to stack multiple background images though, one of which is the content you want with half transparent, and use background-size: cover to tweak it. I haven't tried this myself but that's how I'd start to figure out how to achieve that effect.

Nick Caldwell commented on Suzy van Houten's post over 3 years

Addendum, I did a test of the gradient method a while ago, but I haven't used it on a production site.

http://codepen.io/Rocketpilot/pen/ecDoh

Nick Caldwell commented on Suzy van Houten's post over 3 years

Couple ways: use the Equalizer plugin, or a CSS3 gradient background with a very sharp division between the two colours at 50%.

Nick Caldwell commented on Nick Caldwell's post about 4 years

Hi Joel,

Landmark roles should be attached to items without an inherent semantic, though. Evidence:

http://stackoverflow.com/questions/14180785/html5-nav-element-vs-role-navigation

http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-landmarks.html

The recommended pattern is to use as a wrapper around a - adding the landmark role to the isn't, on further reading, required, but it's generally used as a backstop against screen readers that don't understand HTML5 semantic sections.

Nick Caldwell commented on Christian Solorzano's post about 4 years

The red icon means the web browser has encountered a number of problems while trying to load the page. For example, when I loaded the site, I see a number of 404 errors for missing assets, like so:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.js, line 0)

Overall I think the layout of your site is basically sound, but the two principal typefaces you've chosen don't sit terribly harmoniously together.

Nick Caldwell commented on Nick Caldwell's post over 4 years

Well, I'm actually very familiar with definition lists and I still think using them in an accordion is dodgy. What do you gain by using that structure and ONLY using the DD and not the DT?

The bigger point is that the semantics of the HTML elements are debatable. For instance, there's an argument that SECTION should only be used for general divisions like book chapters, not UI constructs. DIVs are frequently the correct choice when you don't want difficult semantic baggage messing up your document outline (which many screen readers use to help a blind user make sense of a document).

Why not just tie the functionality of UI constructs such as accordions to the class names? That way the HTML author gets to decide the validity of the markup they use themselves.

Nick Caldwell commented on Nick Caldwell's post almost 5 years

OK, I honestly did add line breaks for paragraph breaks.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Nick Caldwell's post over 3 years

These are very good, keep them coming, you guys.

I have a variant that I'm working on with tabs, but it's not going terribly well.

http://codepen.io/Rocketpilot/pen/7fa21b71422f6a824d6e67a26b93d8ea

I've made life a bit harder for myself by putting the tab content area into a different column, to achieve a design I'm working on. The idea will be to have existing content that hides out of the way when the user clicks on a tab.

You commented on Nick Caldwell's post over 3 years

Those are some damn fine examples, Rafi. Thanks! I take it Tabs shouldn't pose any additional complications on top of that? I should be able to adapt what I see for some of the other constructs.

You commented on Suzy van Houten's post over 3 years

Raft's method works, but requires a fixed height; my way wouldn't work on mobile without an extra media query to maybe alter the background image positioning for smaller screens. An interesting problem!

You commented on Suzy van Houten's post over 3 years

Sorry, yes, to be honest I got a bit confused as those links auto-redirected for me in various annoying ways so I wasn't sure what I should've been looking at.

Well, when I want to do "full bleed" stuff I'd wrap the row in a "container" div that has no specific width set. If your design isn't containing everything inside a "page" div with a width set, the container will go edge to edge.

eg:

<body>
<div class="container">
<div class="row">etc</div>
</div>
</body>

And set the background properties roughly as indicated. You'd probably need to stack multiple background images though, one of which is the content you want with half transparent, and use background-size: cover to tweak it. I haven't tried this myself but that's how I'd start to figure out how to achieve that effect.

You commented on Suzy van Houten's post over 3 years

Addendum, I did a test of the gradient method a while ago, but I haven't used it on a production site.

http://codepen.io/Rocketpilot/pen/ecDoh

You commented on Suzy van Houten's post over 3 years

Couple ways: use the Equalizer plugin, or a CSS3 gradient background with a very sharp division between the two colours at 50%.

You commented on Nick Caldwell's post about 4 years

Hi Joel,

Landmark roles should be attached to items without an inherent semantic, though. Evidence:

http://stackoverflow.com/questions/14180785/html5-nav-element-vs-role-navigation

http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-landmarks.html

The recommended pattern is to use as a wrapper around a - adding the landmark role to the isn't, on further reading, required, but it's generally used as a backstop against screen readers that don't understand HTML5 semantic sections.

You commented on Christian Solorzano's post about 4 years

The red icon means the web browser has encountered a number of problems while trying to load the page. For example, when I loaded the site, I see a number of 404 errors for missing assets, like so:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.js, line 0)

Overall I think the layout of your site is basically sound, but the two principal typefaces you've chosen don't sit terribly harmoniously together.

You commented on Nick Caldwell's post over 4 years

Well, I'm actually very familiar with definition lists and I still think using them in an accordion is dodgy. What do you gain by using that structure and ONLY using the DD and not the DT?

The bigger point is that the semantics of the HTML elements are debatable. For instance, there's an argument that SECTION should only be used for general divisions like book chapters, not UI constructs. DIVs are frequently the correct choice when you don't want difficult semantic baggage messing up your document outline (which many screen readers use to help a blind user make sense of a document).

Why not just tie the functionality of UI constructs such as accordions to the class names? That way the HTML author gets to decide the validity of the markup they use themselves.

You commented on Nick Caldwell's post almost 5 years

OK, I honestly did add line breaks for paragraph breaks.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content