Importing individual "Native Styles"

[david-athena]

At the bottom of the native styles page, it says, "If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing. You can find instructions for how to do that on the individual Native Styles pages." However, I didn't see these instructions on any of the native styles styles pages (specifically, I'm hoping to import the styles for <table>).

[LeaVerou]

Oops, it looks like this slipped through the cracks, sorry about that! We'll try to get the docs in the next release.

Until then, it's basically [cdn URL]/dist/styles/native/[filename].css and you can see the available filenames in https://early.webawesome.com/[email protected]/dist/styles/native.css :

@import url('native/base.css');
@import url('native/content.css');
@import url('native/code.css');
@import url('native/forms.css');
@import url('native/button.css');
@import url('native/callout.css');
@import url('native/checkbox.css');
@import url('native/color-picker.css');
@import url('native/input.css');
@import url('native/details.css');
@import url('native/tables.css'); /* <--- here is the one for tables! --> */
@import url('native/blockquote.css');
@import url('native/dialog.css');
@import url('native/progress.css');
@import url('native/radio.css');
@import url('native/select.css');
@import url('native/slider.css');

[lloydk]

Some of the native styles require additional css files to be included in order to get proper styling. For example, radio.css needs forms.css otherwise the labels don't line up with the radio button. It might be useful to document these dependencies.