mirror of
https://github.com/primer/css.git
synced 2024-12-26 23:54:28 +03:00
commit
ff8d28f914
@ -9,7 +9,7 @@ Learn more about this styleguide, particularly how it's built and who maintains
|
||||
|
||||
Primer is GitHub's internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS. It's been used internally at GitHub for years now.
|
||||
|
||||
Open-sourcing Primer means sharing and learning with the community. There's a lot we can improve upon in Primer, and help is always appreciated. While we don't currently plan on building this out as a competitor to other front-end frameworks, we will ocassionally add, remove, or modify things.
|
||||
Open-sourcing Primer means sharing and learning with the community. There's a lot we can improve upon in Primer, and help is always appreciated. While we don't currently plan on building this out as a competitor to other front-end frameworks, we will occasionally add, remove, or modify things.
|
||||
|
||||
### Future updates
|
||||
|
||||
|
@ -22,7 +22,7 @@ Be sure to set `width` and `height` attributes for maximum browser performance.
|
||||
|
||||
## Small avatars
|
||||
|
||||
We ocassionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
|
||||
|
||||
{% example html %}
|
||||
<img class="avatar avatar-small" src="https://avatars3.githubusercontent.com/u/9919?v=3&s=32" width="32" height="32">
|
||||
|
@ -170,7 +170,7 @@
|
||||
|
||||
// Octicon buttons
|
||||
//
|
||||
// Improve alignemnt of Octicons within buttons and minibuttons. Also auto tweak
|
||||
// Improve alignment of Octicons within buttons and minibuttons. Also auto tweak
|
||||
// the right arrow to float right for ease of use.
|
||||
.btn {
|
||||
> .octicon-arrow-right {
|
||||
|
@ -42,7 +42,7 @@ textarea {
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
// input.class is needed here to increase specifity over input[…]
|
||||
// input.class is needed here to increase specificity over input[…]
|
||||
input.input-contrast,
|
||||
.input-contrast {
|
||||
background-color: #fafafa;
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
// Grid system
|
||||
//
|
||||
// Create rows with `.columns` to clear the flaoted columns and outdent the
|
||||
// Create rows with `.columns` to clear the floated columns and outdent the
|
||||
// padding on `.column`s with negative margin for alignment.
|
||||
|
||||
.columns {
|
||||
|
@ -1,4 +1,4 @@
|
||||
// A rounded corner box containing a lable "open" or "closed"
|
||||
// A rounded corner box containing a label "open" or "closed"
|
||||
// Without a state it is grey.
|
||||
//
|
||||
// open - green background
|
||||
|
@ -1,11 +1,11 @@
|
||||
// Truncate
|
||||
//
|
||||
// css-truncate will shorten text with an elipsis.
|
||||
// css-truncate will shorten text with an ellipsis.
|
||||
|
||||
.css-truncate {
|
||||
// Truncate double target
|
||||
//
|
||||
// css-truncate will shorten text with an elipsis. The maximum width
|
||||
// css-truncate will shorten text with an ellipsis. The maximum width
|
||||
// of the truncated text can be changed by overriding the max-width
|
||||
// of the .css-truncate-target
|
||||
&.css-truncate-target,
|
||||
|
Loading…
Reference in New Issue
Block a user