https://github.com/kareem-m/customize.css

Customize.css is Modern Alternative To Reset Css & Html Elements
https://github.com/kareem-m/customize.css

css css-reset framework

Last synced: 7 days ago
JSON representation

Customize.css is Modern Alternative To Reset Css & Html Elements

• Host: GitHub
• URL: https://github.com/kareem-m/customize.css
• Owner: kareem-m
• License: mit
• Created: 2021-06-26T19:26:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-07T12:09:59.000Z (over 2 years ago)
• Last Synced: 2024-08-14T21:14:12.568Z (3 months ago)
• Topics: css, css-reset, framework
• Language: HTML
• Homepage: https://customizecss.netlify.app/
• Size: 1.38 MB
• Stars: 21
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  



# About customize.css

#### Customize.css is a small css file that improves user agent stylesheet values

#### so that browsers display all elements more consistently & in compliance with modern standards.

### For example:




```css

h1 {

    font-size: 2em;

}

a {

    text-decoration: none;

    user-select: none;

}

p {

    color: #666;

}

ul, ol {

    margin: 0;

    padding: 0;

}

```




# Features customize.css

#### The advantages of customize.css are very many, and this is evident from the following:

- Small file size and not a lot of comments.

- Corrected some errors in browsers.

- Improve usability with subtle improvements.

#### One of the most important features that are not present in the frameworks and that many developers and programmers do not know is the ability to change the shape of the scroll bar, which gives an attractive appearance to customers.




```css

::-webkit-scrollbar {

    width: 10px;

    height: 5px;

}

::-webkit-scrollbar-track {

    background: var(--main-background, #fff);

}

::-webkit-scrollbar-thumb {

    background: var(--main-color, #07f);

}

::-webkit-scrollbar-thumb:hover {

    border: 1px solid #fff;

}

```

#### Another advantage is the addition of features to some elements that must be placed each time you create a site, which reduces the time required to create the site, and these features include:




```css

form input:not([type="submit"]) {

    padding: 10px 50px 10px 10px;

    caret-color: var(--main-color, #07f);

}

[type="submit"] {

    padding: 10px;

    cursor: pointer;

    text-transform: capitalize;

}

form input:not([type="submit"]):focus,

[type="submit"]:focus {

    outline: 0;

}

textarea {

    resize: none;

}

```




# Customize vs Normalize vs Reset

#### customize.css, of course, overcomes normalize and reset, because customize has all the properties of normalize and reset, in addition to other properties, and it does not have a lot of annoying commints that increase the file space.




# Browser support

### customize.css supports this browsers.




- Chrome

- Edge

- Firefox ESR+

- Safari 8+

- Opera




# Quick start

#### Looking to quickly add customize.css to your project?

#### Copy-paste the stylesheet  into your  before all other stylesheets to load our CSS.




```html

```