On https://taniarascia.github.io/html5-test/ selecting the primitive stylesheet doesn't work. In the console I can see that https://taniarascia.github.io/primitive/css/main.min.css returns 404.

Tania,
How are you? I am really happy to evaluate your framework: it looks really clean and light. I noticed that the select boxes display a little tick next to the drop down arrow if you use IE11.
Any idfeas?
Thanks,
Everardo
ps. I could send you a picture.

Also, would you mind if I try to add the following components to your framnework?
tabs, accordions, modals, and date and time pickers.

Hello,
Why you remove gulp ?
If you want, I can again integrate Gulpfile.js with the newest version of gulp (4.0).
I use primitive with my custom gulp scripts.
Tell me if you are interest.
Thanks

Hi,

Is it possible to update the version installed via npm to the latest please?

Ref: https://www.npmjs.com/package/primitive-ui

Currently if you alter the background color of a select element you will see that the used triangle background has itself a white background. It would be nice to have a transparent background image instead.

Tinkered a bit and I am currently using this:

select {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjklEQVQoz5XPMQrCQBBG4W8TBLHXowiewHt4HDvtbDxD7LSy0yvYClZia7CKNlssATfJD8vMMG8fuwF7LORzxSoHFFijyTBNZHSJbqgyTBWZbEKsM5wwbu0/WOLZJSpjfWOEeWu/w1mPhKSf4IhpnF/xNXUfUZH0NbbJvOkr+ffVQzzl0ItpvnjggvsQ0Q+efRi5Tqrz0wAAAABJRU5ErkJggg==);
}

I'm in Firefox 76.0.1 and i have recently find out that it duplicated it the entire web page

It's duplicated
Primitive Docs or primitive/

Normal page
Index of Primitive Docs or primitive/index.html

Would you be willing to add the !default option to lines 145 & 146 in your variables setup? $buttons and $forms both required additional setup, and I found them to not follow the SCSS standard for overriding with a fallback.

https://github.com/taniarascia/primitive/blob/master/src/scss/base/_variables.scss

My current workaround required me to modify your code after the package was installed. Concern that I'll forget when I'm no longer working remote and pull a refresh from my package.json.

Thanks overall. Cheers.

Hello,
on your websit:

https://taniarascia.github.io/primitive

If I click "EIGHTIES MODE" button it goes OK in the eighties mode.
If I click on "Boring Mode" button it does not happen anything.

It would be supposed to go the original CSS formatting.

How can I setup a row to have a 2 column layout with one column 1/4 width and the second column 3/4 width?

Hi,

Just curious, why are you declaring the same class selectors twice in the css file, for example:

/**
 * Grid
 */
.flex-small,
.flex-large {
  padding-left: 1rem;
  padding-right: 1rem;
}

.flex-row {
  margin-left: -1rem;
  margin-right: -1rem;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-small,
.flex-large {
  flex-basis: 100%;
  margin-bottom: 1rem;
}

They have different properties but the selectors are same what's the use case for this?

Hi there,

I installed primitive-ui via npm and included it in my main.scss file. I try to override the primary color variable and expect the link color to change automatically since it's based on the primary color. But it does not.

Example

Here's how I use primitive in my own files:

// my own main.scss
@import "primitive-ui/src/scss/main";

@import "variables";

// my own variables.scss
$primary-color: red;

In the above example, the primary color has been set to red, and I would expect the link color to change to red as well, but it's still the default primary color supplied with primitive.

The Fix

I've tested it and it can be fixed by adding !default values to the primitive variables. A similar approach is used in Bootstrap

Please note that once you add !default values, the order of importing will change as well:

// my own main.scss
@import "variables";

@import "primitive-ui/src/scss/main";

If you'd like to read more about this approach, check this article on Thoughtbot.

Finally, let me know what you think and I'll create a PR for it!

I was wondering if you would mind using git tags for versions and doing releases on GitHub. My reasons for this are:

1. Notifications only for releases: This is an admittedly selfish wish to reduce the amount of email I receive (e.g. by “watching” the repository) but still learn when updates are made.
2. Easily identifying the release commits and viewing the differences between them

Hi Tania,
thanks for creating primitive!
When I try to integrate it with react, I encounter a strange problem.
The spacing between buttons are missing and I can't figure out the problem.
Is that the problem of react?

in html:

    <div class="container">
       <button>Submit</button>      
       <button>Reset</button>    
    </div>
    <div id="root"></div>

in js:

class App extends Component {
  render() {
    return (
      <div className="container">
       <button>Submit</button>      
       <button>Reset</button>            
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

That link was working just a few days ago, and I loved that HTML 5 Test page so much. It was really illuminating to see all the frameworks compared!

After poking around a bit, it appears to me that you either deleted or made private the repo that used to be at https://github.com/taniarascia/html5-test. I was able to find a cached copy here: https://webcache.googleusercontent.com/search?q=cache:OaPkN3VjtHEJ:https://taniarascia.github.io/html5-test/&hl=en&gl=us&strip=0&vwsrc=1

P.S. Thanks for writing this excellent library!