css
#define css: \
I----------------------------------------------\
I----------------------------------------------\
I----------------------------------------------\
I /$$$$$$ /$$$$$$ /$$$$$$ \
I /$$__ $$ /$$__ $$ /$$__ $$ \
I | $$ \__/| $$ \__/| $$ \__/ \
I | $$ | $$$$$$ | $$$$$$ \
I | $$ \____ $$ \____ $$ \
I | $$ $$ /$$ \ $$ /$$ \ $$ \
I | $$$$$$/| $$$$$$/| $$$$$$/ \
I \______/ \______/ \______/ \
I----------------------------------------------\
I----------------------------------------------\
I----------------------------------------------I
https://cssbattle.dev/
• "Cascading Style Sheets"
• used for customizing the display of markup languages
• most associated with HTML
• GUI libraries and configuration files also use dialects of CSS
• the core language can be learned to fluency under an afternoon by anyone,
difficulty comes from memorizing CSS properties, their side-effects and interactions
• the Pareto Principle accurately applies to CSS in the sense that
"the remaining 20% to perfection takes 80% of the effort"
the point being that perfection is inhumanly achieve using CSS;
as a personal tip: just ignore it, no body will ever know;
it is not worth the effort
COMMENTS: COMMENTS:
: multiline html comment; applies only in a CSS context
RULES: RULES:
• all css "code" is rule based
[selector] {
([option]: [value]( [mode]);)+
}
○ [selector]
([class-1])([operator][class-n]*)
* : selector for all elements
○ [class]
[class-base](\[[attribute]\])
○ [class-base]
TLDR:
x : targets <x>
.x : targets class="x"
#x : targets id="x"
— true class
[class]
• plain name of a markup tag { div, a }
{ p {
font-size: 18;
}
}
— pseudo class
.[class]
• starts with a dot
• specific to elements with [class] as a class assigned to them
{ .red_block {
background: red;
}
<p class="red_block">
Im a red block!
</p>
}
○ list:
— id
#[class]
• starts with a hashtag
• specific to an element with [class] id as its attribute
{ #blue_block {
background: blue;
}
<p id="blue_block">
Im the blue block!
</p>
}
○ [attribute]
[attribute]([operator][value])
[attribute] : selects elements which have an [attribute] assigned
○ [operator]
• filtes here means filters in and not filters out;
when talking about [value] always the same attribute is converned
= : filters elements which have [value] as their this->value
*= : filters elements which contain [value] as a substring of this->value
~= : filters elements which contain [value] as a word of this->value (word being in a regex context)
^ : filters elements which starts with [value] as a substring of this->value
$ : filters elements which ends with [value] as a substring of this->value
Pseudo: ?!
:hover : when hovered over
:link : link that has not been visited yet
:visited : a link that has been visited
:active : represents an element (such as a button or link) that is being activated by the user
○ [pseudo_element]
• each one is prefixed with double colons
• single colons might be used, but dont
• the inner text of pseudo elements cant be selected
::before : an inline element inserted before *this
::after : an inline element inserted before *this
::backdrop
::cue
::cue-region
::first-letter : great for creating initials
::first-line
::file-selector-button
::grammar-error
::marker
::part()
::placeholder
::selection
::slotted()
::spelling-error
::target-text
○ [operator]
none : and operator; selects elements which are in both class-es;
none here means an empty string { [class][class] }; { .myClass#myId }
' ' : in operator; selects elements which are in [class-n] and are nested inside [class-1];
' ' here means a single char of space { [class] [class] }; { .myDiv .myA }
, : or operator; selects elements which are in either of the class-es
• : parent operator; selects elements which are in [class-1] and are nested inside [class-n]
○ [mode]
!important : all subsequent rules on an element are to be ignored,
and the rule denoted by !important is to be applied.
this rule overrides all previous styling rules.
the !important property increases its priority.
VALUES: VALUES:
Size: Size:
[double][measurement] : specifies a size
auto : either all avaliable space (whichs calculation is element dependent) or 0px
○ [measurement]
px : pixels
% : parent element percentage
em : a relative unit to the closest "font-size" property; default-s to 16
rem : root em; a relative unit to <html>s "font-size" property; default-s to 16
Pos: Pos:
center
left
right
Angle: Angle:
[double][measurement] : specifies an angle
• if [double] > 0, the rotation will be clockwise
• if [double] < 0, the rotation will be counter clockwise
○ [measurement]
deg : degrees
rad : radian
grad : gradian
turn : full turns ( 1turn == 360deg )
Color: Color:
[hex] || rgb() || [name] : specifies a color
○ [hex]
#[hex_values]
○ [name]
• alias of a [hex]
| name | value |
| :------------------: | :-----: |
| AliceBlue | #F0F8FF |
| AntiqueWhite | #FAEBD7 |
| Aqua | #00FFFF |
| Aquamarine | #7FFFD4 |
| Azure | #F0FFFF |
| Beige | #F5F5DC |
| Bisque | #FFE4C4 |
| Black | #000000 |
| BlanchedAlmond | #FFEBCD |
| Blue | #0000FF |
| BlueViolet | #8A2BE2 |
| Brown | #A52A2A |
| BurlyWood | #DEB887 |
| CadetBlue | #5F9EA0 |
| Chartreuse | #7FFF00 |
| Chocolate | #D2691E |
| Coral | #FF7F50 |
| CornflowerBlue | #6495ED |
| Cornsilk | #FFF8DC |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkBlue | #00008B |
| DarkCyan | #008B8B |
| DarkGoldenRod | #B8860B |
| DarkGray | #A9A9A9 |
| DarkGrey | #A9A9A9 |
| DarkGreen | #006400 |
| DarkKhaki | #BDB76B |
| DarkMagenta | #8B008B |
| DarkOliveGreen | #556B2F |
| DarkOrange | #FF8C00 |
| DarkOrchid | #9932CC |
| DarkRed | #8B0000 |
| DarkSalmon | #E9967A |
| DarkSeaGreen | #8FBC8F |
| DarkSlateBlue | #483D8B |
| DarkSlateGray | #2F4F4F |
| DarkSlateGrey | #2F4F4F |
| DarkTurquoise | #00CED1 |
| DarkViolet | #9400D3 |
| DeepPink | #FF1493 |
| DeepSkyBlue | #00BFFF |
| DimGray | #696969 |
| DimGrey | #696969 |
| DodgerBlue | #1E90FF |
| FireBrick | #B22222 |
| FloralWhite | #FFFAF0 |
| ForestGreen | #228B22 |
| Fuchsia | #FF00FF |
| Gainsboro | #DCDCDC |
| GhostWhite | #F8F8FF |
| Gold | #FFD700 |
| GoldenRod | #DAA520 |
| Gray | #808080 |
| Grey | #808080 |
| Green | #008000 |
| GreenYellow | #ADFF2F |
| HoneyDew | #F0FFF0 |
| HotPink | #FF69B4 |
| IndianRed | #CD5C5C |
| Indigo | #4B0082 |
| Ivory | #FFFFF0 |
| Khaki | #F0E68C |
| Lavender | #E6E6FA |
| LavenderBlush | #FFF0F5 |
| LawnGreen | #7CFC00 |
| LemonChiffon | #FFFACD |
| LightBlue | #ADD8E6 |
| LightCoral | #F08080 |
| LightCyan | #E0FFFF |
| LightGoldenRodYellow | #FAFAD2 |
| LightGray | #D3D3D3 |
| LightGrey | #D3D3D3 |
| LightGreen | #90EE90 |
| LightPink | #FFB6C1 |
| LightSalmon | #FFA07A |
| LightSeaGreen | #20B2AA |
| LightSkyBlue | #87CEFA |
| LightSlateGray | #778899 |
| LightSlateGrey | #778899 |
| LightSteelBlue | #B0C4DE |
| LightYellow | #FFFFE0 |
| Lime | #00FF00 |
| LimeGreen | #32CD32 |
| Linen | #FAF0E6 |
| Magenta | #FF00FF |
| Maroon | #800000 |
| MediumAquaMarine | #66CDAA |
| MediumBlue | #0000CD |
| MediumOrchid | #BA55D3 |
| MediumPurple | #9370DB |
| MediumSeaGreen | #3CB371 |
| MediumSlateBlue | #7B68EE |
| MediumSpringGreen | #00FA9A |
| MediumTurquoise | #48D1CC |
| MediumVioletRed | #C71585 |
| MidnightBlue | #191970 |
| MintCream | #F5FFFA |
| MistyRose | #FFE4E1 |
| Moccasin | #FFE4B5 |
| NavajoWhite | #FFDEAD |
| Navy | #000080 |
| OldLace | #FDF5E6 |
| Olive | #808000 |
| OliveDrab | #6B8E23 |
| Orange | #FFA500 |
| OrangeRed | #FF4500 |
| Orchid | #DA70D6 |
| PaleGoldenRod | #EEE8AA |
| PaleGreen | #98FB98 |
| PaleTurquoise | #AFEEEE |
| PaleVioletRed | #DB7093 |
| PapayaWhip | #FFEFD5 |
| PeachPuff | #FFDAB9 |
| Peru | #CD853F |
| Pink | #FFC0CB |
| Plum | #DDA0DD |
| PowderBlue | #B0E0E6 |
| Purple | #800080 |
| RebeccaPurple | #663399 |
| Red | #FF0000 |
| RosyBrown | #BC8F8F |
| RoyalBlue | #4169E1 |
| SaddleBrown | #8B4513 |
| Salmon | #FA8072 |
| SandyBrown | #F4A460 |
| SeaGreen | #2E8B57 |
| SeaShell | #FFF5EE |
| Sienna | #A0522D |
| Silver | #C0C0C0 |
| SkyBlue | #87CEEB |
| SlateBlue | #6A5ACD |
| SlateGray | #708090 |
| SlateGrey | #708090 |
| Snow | #FFFAFA |
| SpringGreen | #00FF7F |
| SteelBlue | #4682B4 |
| Tan | #D2B48C |
| Teal | #008080 |
| Thistle | #D8BFD8 |
| Tomato | #FF6347 |
| Turquoise | #40E0D0 |
| Violet | #EE82EE |
| Wheat | #F5DEB3 |
| White | #FFFFFF |
| WhiteSmoke | #F5F5F5 |
| Yellow | #FFFF00 |
| YellowGreen | #9ACD32 |
List_Style_Type: List_Style_Type:
symbols() : defines an anonymous style of the list
<string> : the specified string will be used as the item's marker
none : no item marker is shown
disc : a filled circle (default value)
circle : a hollow circle
square : a filled square
decimal : decimal numbers, beginning with 1
cjk-decimal : han decimal numbers
decimal-leading-zero : decimal numbers, padded by initial zeros
lower-roman : lowercase roman numerals
upper-roman : uppercase roman numerals
lower-greek : lowercase classical Greek
lower-alpha and : lowercase ASCII letters
lower-latin
upper-alpha and : uppercase ASCII letters
upper-latin
arabic-indic and : arabic-Indic numbers
— moz-arabic-indic
armenian : traditional Armenian numbering
bengali, -moz-bengali : bengali numbering
cambodian/khmer : cambodian/Khmer numbering
cjk-earthly-branch and : han "Earthly Branch" ordinals
— moz-cjk-earthly-branch
cjk-heavenly-stem and : han "Heavenly Stem" ordinals
— moz-cjk-heavenly-stem
cjk-ideographic : identical to trad-chinese-informal
devanagari and : devanagari numbering
— moz-devanagari
ethiopic-numeric : ethiopic numbering
georgian : traditional Georgian numbering
gujarati and -moz-gujarati : gujarati numbering
gurmukhi and -moz-gurmukhi : gurmukhi numbering
hebrew : traditional Hebrew numberin
hiragana : dictionary-order hiragana lettering
hiragana-iroha : iroha-order hiragana letterin
japanese-formal : japanese formal numbering to be used in legal or financial documents;
the kanjis are designed so that they can't be modified to look like another correct one
japanese-informal : japanese informal numbering
kannada and -moz-kannada : kannada numbering
katakana : dictionary-order katakana letterin
katakana-iroha : iroha-order katakana letterin
korean-hangul-formal : korean hangul numbering
korean-hanja-formal : formal Korean Han numbering
korean-hanja-informal : korean hanja numbering
lao and -moz-lao : laotian numbering
lower-armenian : lowercase Armenian numbering
malayalam and : malayalam numbering
— moz-malayalam
mongolian : mongolian numbering
myanmar and -moz-myanmar : myanmar (Burmese) numbering
oriya and -moz-oriya : oriya numbering
persian and -moz-persian : persian numberin
simp-chinese-formal : simplified Chinese formal numbering
simp-chinese-informal : simplified Chinese informal numbering
tamil and -moz-tamil : tamil numbering
telugu and -moz-telugu : telugu numbering
thai and -moz-thai : thai numbering
tibetan : tibetan numbering
trad-chinese-formal : traditional Chinese formal numbering
trad-chinese-informal : traditional Chinese informal numbering
upper-armenian : traditional uppercase Armenian numbering
disclosure-open : symbol indicating that a disclosure widget such as <details> is opened
disclosure-closed : symbol indicating that a disclosure widget, like <details> is closed
Non-offical:
— moz-ethiopic-halehame
— moz-ethiopic-halehame-am
ethiopic-halehame-ti-er, -moz-ethiopic-halehame-ti-er
ethiopic-halehame-ti-et, -moz-ethiopic-halehame-ti-et
hangul, -moz-hangul
hangul-consonant, -moz-hangul-consonant
urdu, -moz-urdu
VARIABLES: VARIABLES:
{ --[name]: [value];
var(--[name])
}
• "custom properties"
• macro behaviour
• must be refrenced with the var() function
• scooped
• exists inside a rule and then inherits
css_complementary
#define css_complementary:: \
I------------------------------------------------------------------\
I ___ _ _ _ \
I / __|___ _ __ _ __| |___ _ __ ___ _ _| |_ __ _ _ _ _ _ (_) \
I | (__/ _ \ ' \| '_ \ / -_) ' \/ -_| ' \ _/ _` | '_| || | _ \
I \___\___/_|_|_| .__/_\___|_|_|_\___|_||_\__\__,_|_| \_, |(_) \
I |_| |__/ \
I------------------------------------------------------------------I
BACKGROUND: BACKGROUND:
style="background-color:[color]" : sets background to [color]
style="background-image:[url||path]" : sets background to image
style="background-repeat: repeat-y" : repeats; (lets say the background is a gif)
TEXT: TEXT:
Fonts: Fonts:
font-family: "[font]" : specifies font
font-size: [size] : size
○ [font]
• any installed font
— generic:
• used to ensure every user will see something similar
as noone garantees that the she will have a specific font on her machine
+ serif
+ sans-serif
+ monospace
+ cursive
+ fantasy
+ system-ui
— global values:
+ inherit
+ initial
+ unset
Writing_mode: Writing_mode:
• controls the direction of stacking
• the naming is very counter intuitive
• it is relative to how the things would be layed out by default
horizontal-tb : "horizontal tab"; default (if youre white)
verticlal-lr : "vertical left-right"
verticlal-rl : "vertical right-left"
sideways-lr : "sideways left-right"
sideways-rl : "sideways right-left"
{
var originalText = "Original\ntext"
########
OOOO
vertical-lr: | vertical-rl: | sideways-lr: | sideways-lr:
#O | O# | # | O#
#O | O# | # | O#
#O | O# | # | O#
#O | O# | # | O#
# | # | #O | #
# | # | #O | #
# | # | #O | #
# | # | #O | #
the the way letter face relative to each other never changes
}
text-decoration [options||none] : apply more options at once; separated by spaces; (color; dotted; underline)
SIZE: SIZE:
width: [size];
height: [size];
Calculation:
box-sizing: content-box || border-box
content-box : when calculating the size only the contents are taken into acount; default
content-height : when calculating the size the contents and the border are taken into acount
BOX_MODELL: BOX_MODELL:
• applies to every non-metadata element
Padding: Padding:
padding [size] : empty space that must be left around element
• relative to the width (both vertical and horizontal)
the top and bottom padding of inline elements are not respected (ignored)
Border: Border:
border-[specification1]-[specification2]: [options]
○ [specification]
top
bottom
left
right
○ [specifications2]
radius: <int>px : to make it round
style: [solid || dotted || double || dashed] : duh
border-color: [colors] : sets border color
Margin: Margin:
margin [size] : margin of element
• an outer circle around the element which cannot by benetrated by the hitbox of other elements,
but not part of the hitbox per se
• margin collapsing happens when two elements with margins are adjacent;
than only the larger margin is taken into account
{ <a style="margin-right: 20px;">_im text_</a>
<a style="margin-left: 10px;">_so am i_</a>
_im text_[20px]_so am i_
}
• not affected by background (color)
the <body> has a margin by default
the top and bottom margin of inline elements are not respected (ignored)
Fullsize = Content + Padding + Border + Margin
Content : inner text
Red : padding
Border : border
Purple : margin
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXX +------Border-------+ XXX
XXX | ############## | XXX
XXX | ############## | XXX
XXX | # Content # | XXX
XXX | ############## | XXX
XXX | ############## | XXX
XXX +-------------------+ XXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
OVERFLOW: OVERFLOW:
<style>
overflow: visible || hidden || clip || scroll || auto;
</style>
• the property of what shall be done with nested elements when they are larger than their container
visible : ignore, let it grow and be displayed; default
hidden : crop the display of overflowing items; only show the parts that fit inside
clip : similar to hidden (see ABOVE), but forbids any kind of inner scrolling
scroll : both scroll bars are always shown and if the content overlows one way
the corresponding one becomes functional
auto : adds a scroll bar to every side which overflows
POSITION: POSITION:
position: static || relative || absolute || fixed || sticky
top: ;
bottom: ;
left: ;
right: ;
• the top, bottom, left and right attributes together are called the directional attributes
• controls how the directional attributes affect the element;
also decides how other elements shall interact with it
• non-static elements disown their parents for the next non-static element up the hierarcy or <html>
(this affects every attribute)
<div id=1 style="width: 800px; position: relative">
<div id=2 style="width: 600px">
<div id=3 style="width: 100%; position: absolute">
<!-- has a with of 800px as Đ2Đ is ignored, because its static -->
</div>
</div>
</div>
static : behave normally, as specified by display; the directional attributes
have no effect; default
relative : behave normally, as specified by display; when a directional attribute is set,
only move the element visually, keeping its hitbox in place, therefor never
affecting the position of any other element; for the rules of displaying
over/under see "stacking" BELOW
absolute : remove the element from the flow, ie. as if it were metadata, other elements
have no concern over its position or size; for the rules of displaying
over/under see "stacking" BELOW
fixed : ?!
sticky : ?!
STACKING: STACKING:
z-index: <int>;
• concerned with the alignment of the elements along with the Z axes (the one perpendicular to the screen)
— basic order (ascending):
1. The background and borders of the root element
2. Descendant non-positioned blocks, in order of appearance in the HTML
3. Descendant positioned elements, in order of appearance in the HTML
• z-index sets which layer it should be displayed on; only works on non static-ally positioned elements
of the elements to the center point of the cross axes
LAYOUT: LAYOUT:
None: None:
<style>
display: none;
</style>
• the element is not rendered graffically nor its pseudo elements
Inline_Block: Inline_Block:
<style>
display: inline-block;
</style>
• its top and bottom margins and paddings are respected
• doesnt capitalize an entire row, ie. other elements can fit next to it
• they dont seek upwards
{ // notice how "char" is not an actually valid value type
<style>
div {
display: inline-block;
}
big {
width: 3 char;
height: 3 char;
}
small {
width: 2 char;
height: 2 char;
}
</style>
<div class="big" style="background: blue"></div>
<div class="big" style="background: yellow"></div>
<div class="small" style="background: red"></div>
this text examples float-ing around
┌─────Page─────┐
│### OOO │
│### OOO ++ │
│### OOO ++ │
│ │
│ │
└──────────────┘
}
• next to inline-block elements a invisible, uninspectible gap will be created
• do remove the gap one must -i kid you fucking not- uncomment any whitespaces
{ // notice how "char" is not an actually valid value type
<style>
div {
display: inline-block;
width: 3 char;
height: 3 char;
}
</style>
<div style="background: blue"></div><!-- // NOTE: the html comment
--><div style="background: yellow"></div>
this text examples float-ing around
┌─────Page─────┐
│###OOO │
│###OOO │
│###OOO │
│ │
│ │
└──────────────┘
}
Float: Float:
<style>
float: none || left || right || inline-start || inline-end
</style>
• allows inline elements to flow around it
• specifies a direction where the element shall be justified inside its container
{ // notice how "char" is not an actually valid value type
<p syle="float: left;\
width: 2 char;\
height: 2 char">
</p>
this text examples float-ing around
┌─────Page─────┐
│##this text │
│##examples │
│float-ing │
│around │
│ │
└──────────────┘
}
Flex: Flex:
<style>
display: flex;
flex: <int> <int> [fval];
alias flex-1 flex-grow
alias flex-2 flex-shrink
alias flex-3 flex-basis
</style>
• a modell of container which allows for various layout options
• were originally made with single access layout manipulation in mind, ie. being 1 dimensional;
thats no longer the case however
• an element with its display property set to flex is called the flex container
• the flex container behaves as a block element
• elements directly nested inside a flex container are called flex items
• each flex container has 2 dimensions called the main axes and the cross axes,
whichs correspondence to the vertical and horizontal axes are decided by the flex-direction property;
(by default the main is horizontal and the cross is vertical)
• each flex container has 2 points called the start and end
whichs corresponde to a side of the main axes;
(by default the start is on the left and the end is on the right)
• the cross element officially doesnt have named points, however thats retarded as flex-es are
neither 1 dimensional nor they behave like it; therefor im naming
its end points cstart and cend
• if the flex is horizontal cstart is the top most and cend is the bottom mostpoint of the cross axes
• if the flex is vertical cstart is the left most and cend is the right most point of the cross axes;
(left and right being relative to the screen)
{ flex-direction: row;
┌───┤ Flex container ├───┐ - <-- CStart
│ │ A
│ │ |
│ │ | Cross Axes
│ │ |
│ │ V
└────────────────────────┘ - <-- CEnd
|<------Main Axes------->|
A A
| |
Start End
}
Direction: Direction:
flex-direction: row || row-reverse || column || reverse-column
set on container
— row
• main: horizontal
• cross: vertical
• start: left
• end: right
(>cstart: top
• cend: bottom)
— row-reverse
• main: horizontal
• cross: vertical
• start: right
• end: left
(>cstart: top
• cend: bottom)
— column
• main: vertical
• cross: horizontal
• start: top
• end: bottom
(>cstart: left
• cend: right)
— column-reverse
• main: vertical
• cross: horizontal
• start: right
• end: left
(>cstart: left
• cend: right)
— free space:
free space = containers main axes size - items main axes sizes
{ |<------------------Container----------------->|
┌──────┐┌──────┐┌──────┐
│ | ││ || ││ ||| │
│ |. ││ ||. ││ |||.│
└──────┘└──────┘└──────┘<------Free space----->|
}
Grow: Grow:
flex-grow: <int>;
set on item
• has effect when theres spare space in the flex container
• <int> represents *this items ratio
• <int> is retative to the size bases (see basis BELOW),
meaning larger elements will seize more space
• 0 signals that the item shall not be resized
{
#i {
flex-grow: 6;
}
#ii {
flex-grow: 2;
}
#ii {
flex-grow: 4;
}
|<------------------Container----------------->|
┌──────────────────────┐┌──────┐┌──────────────┐
│ | ││ || ││ ||| │
│ |. ││ ||. ││ |||. │
└──────────────────────┘└──────┘└──────────────┘
}
Shrink: Shrink:
set on item
flex-shrink: <int>;
• 0 signals that the item shall not be resized
• negative version of flex-grow (see ABOVE)
• what rules are followed when theres unbreakable text int the way?
We. Just. Dont. Know.
Basis: Basis:
flex-grow: <int> || [auto];
set on item
• decides what is considered the items size when calculating the available space
• [auto] makes the browser use the items actual size for the calculation; default
• <int> is an actual size value override-ing the elements actual size
setting it to 0 on all items and guarantees to have
them occupy as large of a space ratio as specified by flex-grow (see ABOVE)
Justifying: Justifying:
justify-content: start || end || center ||
space-around || space-between || space-evenly
set on container
• controls how items are layed out on the main axis
start : align elements to start
end : align elements to end
center : align the center of the elements to the center of the main axis
space-between : evens the free space between elements
space-around : evens the free space the sides of the container and the far most elements
and between elements with a 1:2 ratio
space-evenly : evens the free space the sides of the container and the far most elements
and between elements with a 1:1 ratio
the free space in this context means free space calculated after flex-grow has taken effect
{
|<------------------Container----------------->|
┌──────┐ ┌──────┐ ┌──────┐
│ | │ │ || │ │ ||| │
│ |. │<---------->│ ||. │<---------->│ |||.│
└──────┘ X └──────┘ X └──────┘
|<------------------Container----------------->|
┌──────┐ ┌──────┐ ┌──────┐
│ | │ │ || │ │ ||| │
|<->│ |. │<------>│ ||. │<------>│ |||.│<->|
X/2└──────┘ X └──────┘ X └──────┘X/2
|<------------------Container----------------->|
┌──────┐ ┌──────┐ ┌──────┐
│ | │ │ || │ │ ||| │
|<--->│ |. │<---->│ ||. │<---->│ |||.│<--->|
X └──────┘ X └──────┘ X └──────┘ X
}
Alignment: Alignment:
align-items: stretch || start || end || center;
set on container
• dont ask what it does, poor thing has an identity crisis
stretch : fill all available space on the cross axes
start : use only as much space on the cross axes as needed and align elements to cstart
end : use only as much space on the cross axes as needed and align elements to cend
center : use only as much space on the cross axes as needed and align the center
Grid: Grid:
<style>
display: grid;
grid: <int> <int> [fval];
grid-template-columns: ;
</style>
• a modell of container which is centered around ordering elements in rows and columns
struct:
grid-template-columns [size]+ || repeat() : controls the amounts and the individual sizes of columns
grid-template-rows [size]+ || repeat() : controls the amounts and the individual sizes of rows
Spacing:
grid-column-gap: [size] : decides how wide of a gap shall be between columns
grid-row-gap: [size] : decides how wide of a gap shall be between rows
grid-gap: [size] : decides how wide of a gap shall be between columns and rows
LISTS: LISTS:
list-style-type: [list_style_type] : decides what text precieds the lists elements
list-style-image: [url] : decides what image precieds the lists elements(;
where [url] points to an image)
list-style-position: ?!
--
#define I----------------------------------------------------------I
#define I----------------------------------------------------------I
#define I----------------------------------------------------------I
FUNCTIONS: FUNCTIONS:
[name]([args])
repeat([size_t], [value]+) : repeats [value] [size_t] times; no it cant be used as a macro, that would be too useful;
has its own return "type" and used in secial case-s (see AT "?!/Grid/Struct")
Math:
calc([eq]) : returns [size] calculated from equasion [eq]
• var() can be nested inside (thank God);
• on subtraction and addition the operator-s ('-' && '+') must be surrended by whitespace
• division and multiplication has to have its second operand an int
{ calc(30px / 10)
calc(30px / 10px)
calc(50px * 25)
calc(50px * 25px)
}
Transform:
transform: [transform_function];
• functions which are used as a value for the transform property
matrix() : the default state of any element is equivalent to matrix(1, 0, 0, 1, 0, 0)
Rotation:
• the letter in the naming signals which axis stays in place
rotateZ([angle]) : rotates the element on the x-y plain according to [angle]; this transformation doesnt affect the
elements hitbox
rotateX([angle]) : rotates the element on the y-z plain according to [angle]; this transformation doesnt affect the
elements hitbox
rotateY([angle]) : rotates the element on the x-z plain according to [angle]; this transformation doesnt affect the
elements hitbox
alias rotate([angle]) rotateZ([angle])
rotate3d([int-1], [int-2], : translates to { rotateX([int-1] * [angle]) rotateY([int-2] * [angle]) rotateZ([int-3] * [angle]) }
[int-2], [angle])
Translate:
• some lunatic thought it would be a good idea calling this
"translate" instead of "shift" or "move"
translateX([size]) : shifts the center of the element on the horizontal axes by [size];
positive [size] values "right", negative one mean "left"
translateY([size]) : shifts the center of the element on the vertical axes by [size]
positive [size] values "down", negative one mean "up"
translate([size-1], : translates to { translateX([size-1]) translateY([size-2]) }
[size-2] = 0)
translateZ() : ?!
translate3d([size-1], : translates to { translateX([size-1]) translateY([size-2]) translateZ([size-3]) }
[size-2], [size-3])
Scale:
scaleX([size]) : resizes, ie. stretches the element on the horizontal axes;
ratios and therefor angles are not affected
scaleY([size]) : resizes, ie. stretches the element on the vertical axes;
ratios and therefor angles are not affected
scale([size-1], : translates to { scaleX([size-1]) scaleY([size-2]) }
[size-2])
scaleZ([size]) : ?!
scale3d() : translates to { scaleX([size-1]) scaleY([size-2]) scaleZ([size-3]) }
Skew: ?!
skewX([angle])
skewY([angle])
HACKS: HACKS:
Width_dependent_height: Width_dependent_height:
" \
Since height percentages are relative to the height of \
the parent element, we can't rely on it. We must rely \
on something else. Luckily padding is relative to the \
width - whether it's horizontal or vertical padding. \
In padding-xyz: 100%, 100% equals 100% of the box's width. \
Unfortunately, padding is just that, padding. The \
content-box's height is 0. No problem! Stick an \
absolutely positioned element, give it 100% width, 100% \
height and use it as your actual content box. The 100% \
height works because percentage heights on absolutely \
positioned elements are relative to the padding-box of \
the box their relatively positioned to. \
" - Alexis Wilke
<!-- CSS -->
<style>
#base {
width: 400px;
}
#wrapper {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#to_scale {
background: blue;
position: absolute;
width: 100%;
height: 150%;
}
</style>
<!-- HTML -->
<div id="base">
<div id="wrapper">
<img id="to_scale" src="deer.jpg">
</div>
</div>