Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Table styling #69

Closed
wants to merge 16 commits into from
Closed

Conversation

MichaelArestad
Copy link
Contributor

Super basic v1 of table styling. Looks like this currently and include some fancy overflow styles.

image

Thoughts?

}

th {
padding: em( 12px, 12px );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting the padding for ths twice (see line 23) seems weird.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It appears that way, but they aren't. The em values are different since the font size of th is smaller.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case is there really a point in combining the td and th rules here since they only actually share 2 properties top border and white space. Maybe just add those 2 properties here to the th rule and have above just be td It will make it more clear whats going on to avoid confusion.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will split these up. Probably not worth the combo.

@rohmulan
Copy link
Contributor

@MichaelArestad awesome, I especially love what you did with responsive tables.

@rohmulan
Copy link
Contributor

any specific reasons why headings are less dark and smaller than rest of table by default? I thought it should be other way round?

@MichaelArestad
Copy link
Contributor Author

any specific reasons why headings are less dark and smaller than rest of table by default? I thought it should be other way round?

Yep. The other way around is just a browser default leftover. They are just the labels for the content. The content should be the easiest thing to read. If they are all bold, the th content rows and columns tend to be far more dominant than the table content. If they are all a little lighter and smaller, they still have the visual weight of a label row without overtaking the content visually. Also, labels quite often get lengthier than the table content. Having them smaller allows more to fit in a row.

@arschmitz
Copy link
Contributor

Thought i added this but i don't see it live preview link http://view.css-chassis.com/table/demos/tables.html

@rxaviers
Copy link

👍 looks great

@MichaelArestad
Copy link
Contributor Author

Note: error due to BEM class name.

@arschmitz
Copy link
Contributor

Yup looks like we need to modify our settings

@MichaelArestad
Copy link
Contributor Author

@arschmitz Yep. We should do another PR for fine-tuning the htmllint settings.

td {
border-top: 1px solid #eee;
padding: em( 12px, 16px );
white-space: nowrap;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for later: Remove nowrap on td.


<h2>Tables</h2>

<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here"s -> Here's

@MichaelArestad
Copy link
Contributor Author

Fixed a few things and separated overflow styles (fancy gradient) into its own component, overflow-styles. We can iterate on it from there. CC @arschmitz

// ==========================================================================

// Adds a single pixel underline (so nice) on retina
// Usage: `@include slime-underline;`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"slime" [sic]

Also, the "reimplementing underlines" technique in general seems (a) overcomplicated/overkill (b) not easy to override

@subaha subaha mentioned this pull request Oct 18, 2015
@jzaefferer
Copy link
Contributor

Replaced by #69

@jzaefferer jzaefferer closed this Oct 18, 2015
@rohmulan
Copy link
Contributor

@jzaefferer replaced by #130... you mean?

@jzaefferer
Copy link
Contributor

Yes, copy pasta error.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants