taniarascia / primitive Goto Github PK
View Code? Open in Web Editor NEW⛏️ A front-end design toolkit for developing web apps.
Home Page: https://taniarascia.github.io/primitive
License: MIT License
⛏️ A front-end design toolkit for developing web apps.
Home Page: https://taniarascia.github.io/primitive
License: MIT License
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.
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.
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.
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!
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?
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?
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
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
I was wondering if you would mind using git
tags for versions and doing releases on GitHub. My reasons for this are:
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!
Hi,
Is it possible to update the version installed via npm to the latest please?
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==);
}
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.
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'));
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.