Updated on: Sat Apr 23 2022 00:00:00 GMT+0000 (Coordinated Universal Time)

Estimated reading time : 10 min read

css

ui design

CSS Fundamentals

“
Title : Mi primer artículo MDX

Selectors

Used for the selection of HTML DOM elements

Selectors CheatSheet

Types of CSS Selectors

A way to define types of selector we have the following:

Simple selectors (tag selectors, class and id selectors)
- h1 {}
Composed selectors (Grouped, Combined and child)
- h1 span {}
Selectors with operators
- h1 + span {}

Tag Selector

Uses the typo of the HTML tag.

html {    
	//styling
}

div {
}

h1 {
}

span, p {}

Class and Id Selector

Giving the following markup

section.main
    div.article
    div#aside
        div#card
footer.footer

The class selectors would look

.main {    
	/*Styles here*/
}

.article {    
	/*Styles here*/
}

.footer {    
	/*Styles here*/
}

#aside {    
	/*Styles here*/
}

#card {    
	/*Styles here*/
}

Global selector

/* This will select will affect all DOM elements.
It could be used in the process of normalize predetermined styles, 
though it is the best approach  */
* {    
	padding: 0;    
	margin: 0;
}

Direct Child Selector

Example:

ul > li{    
	//code
}

.father .child {    
	//code
}

ul .father {    
	//code
}

From HTML:

<ul>
    <li>The CSS aplies here</li>
    <li></li>
    <li></li>
    <li class="father">
        <ul class="child">
            <li></li>
        </ul>
    </li>
</ul>

Next Brother Selector

Instead of using the > symbol, you need to use the + symbol, it only applies to the next brother element

<h1>
</h1>
<p>
    <!-->The code applies here if it is used h1 + p<-->
</p>
<h2>
</h2>
<p>
    <!-->The code applies here if it is used h2 + p<-->
</p>

h1 + p {
}

h2 +p {
}

Next Brothers Selectors

You can use with the following code

.class1 ~ .class2 {
}

p ~ div {    
	/*This will select all brothers of p and div that comes after div*/
}

The selected HTML is all brothers of .class1 that has the .class2, the condition is that the elements must be children of the same father

Other attribute selectors

Some examples:

[type="email"]{    
	//code here
}

[required]{    
}

/*You can also use RegEx with this attribute*/

/*Starts With*/
[href^=""]{    }
/*End with*/
[href$=""]{    }
/*Contains in*/
[href*=""]{    }

Bases of CSS

Specificity

What style rule is the most specific.

tags, pseudo-Elements 1
classes 10
id 100
inline styles 1000
!important = most important

Cascade

What comes after overrides what is before it.

Inheritance

An element takes the styles from the tag father, if no style is specified to it.

Inherit

Makes a tag to use the default styles (initial value)

Initial

Makes a tag inherit the styles from the father

Architecture

OOCSS.- Object Oriented CSS
ITCSS.- Specificity Oriented CSS
SMACSS

Layout and CSS modules

We have the next CSS modules

Box model
Position
Flexbox
Grid

Display

Inline .- Doesn’t have a width or height, the elements that has this display are shown next to each other
Block .- The element are shown in another line, has width and height.

Box Model

Margin
Border-box
Padding-box
Content-box

.example {
    box-sizing:border-box;
             /*content-box
               padding-box*/
}

Dimensions

Declared.- Fix Size defined (e.g px, %)

💡 Height works with the father layout, the size of the content ends with the content itself (talking about vertical measurements)
Automatic .- Size not defined e.g. min-height.

Margin and Padding

Margin.- Separation between outer elements and the border.

Padding.- Separation between the border and the content of a element.

/*Margin*/
h1 {
    /*Shorthand Up, Right, Down, Left*/
    margin: 10px 5px 8px 4px;
}

/*Trick To use vertical margin in a child component you must add padding,
 otherwise it will be ignored */
article {
    display:block;
}

.card {
    padding-top: 1px;
    margin-top: 10%;   
}

/*Padding*/
h1 {
    /*Shorthand Up, Right, Down, Left*/
    padding: 10px 5px 8px 4px;
}

Box-sizing

Property to declare the way to calculate the width and height

/*trick, it is normal to set the box-sizing to border box,
 using a global pseudo-element */

*, *::before, *:: after {
    box-sizing: border-box;
}

Borders

Some useful example of how to use order property:

/**some shorthands*/
.example {
    border-style: solid dashed dotted double;
    border-color: black red blue purple;
    /**border-width:;*/
    border: 1px solid black;
}

.example{
    border-radius: 50px;
    /*The order of border is top-left, top-right, bot-right, bot-left*/
    border-top-left-radious: coord-x coord-y;
    /*Shorthand*/
    border-radius: x x x x / y y y y;
}

https://codepen.io/eltoncass/pen/KKzpVMG

Border

Border of an element.

Outline

Exterior Border

Box Shadow

h-offset
v-offset
blur
spread
color|inset

body {
    /*box shadow shorthand*/
    box-shadow: h-offset v-offset blur spread color | inset
}

/*example chess table*/
.chess {
    width: 200px;
    height: 200px;
    background : black;
    box-shadow: 400px 0, 800px 0,
                200px 400px, 600px 200px,
                0 400px, 400px 400px,
                800px 400px;
}

Background

/*background is a shorthand*/
body {
    background-color: yellow;
    background-color: url(myawesomeimage.png);
    background-repeat: no-repeat;
}

body {
    background-size: 800px;
    /*background-size: contain|cover;*/
    /*background-position: left center right | top center bottom;*/
    background-position: center center;
    /*To add a padding to the position of an image*/
    background-position: right 1rem bottom 1rem;
}

background-color

Sets a color as the background

background-image

Sets an image as the background, the value can be a relative path or absolute

background-repeat

Indicates if the image will repeat itself. Values (repeat || no-repeat || pos-x || pos-y)

background-size

It only works with background image

background-size can be contain, cover or auto.

By default is auto

Contain maintains the aspect ratio, does not cut the image.
Cover occupies all the area of the element, it cuts the image if it has to.

background-position

It only works with background image

it takes two values, the first its position-x and the second is position-y

background-clip & background-origin

It is not very useful.

.box {
    width: 500px;
    height: 300px;
    background-image: url(example.png);
    background-size: cover;
    margin: 100px auto;
    border: 24px solid;
    border-color: black brown;
    
	/*Using the box model specifies, what would the background cover. */
    background-clip: content-box;
    padding: 50px;
    box-shadow 0 10px 30px 0 rgba(black, 0.4);

    /*Specifies the starting point of the background, using the box model*/
    background-origin: content-box;
}

background-attachment

Maintains the background in its position, it can be useful for cool effects like parallax

.box {
    width: 600px;
    height: 400px;
    background-image: url(example.png);
    margin: 100px auto;
    background-attachment: fixed;
    background-size: 1500px;
}

background shorthand

Background can have multiple images, but just one color.

body {
    background-image: url(playa.jpg), url(carretera.jpg), url(faro.jpg);
    background-size: 20%;
    background-position: 0 0, center center, right bottom;
    background-repeat: no-repeat;
}

body {
    /*shorthand
    background: image position / size repeat atachment origin clip;
    background: color;
    */
    background: url(playa.jpg) 0 0 / 20% no-repeat,
							  url(carretera.jpg) center center / 20% no-repeat,
					      url(faro.jpg) right bottom / 20% no-repeat, yellow;
}

Tip: the last background should always be the last specified. When you want to have a color in your backgrounds always put it on last.

Colors

Concepts

Front.- The most important element, that has a higher visual hierarchy. (color)
Background.- What is behind the front. (background-color)

Current Color

Css now supports this value-variable currentColor, which it will take the last declared color in the element, father-element and so on.

Models

Subtractive.- Applied in Paper, the addition gives black
- The basic colors CMYK
Additive .- Applied in Screen, the addition gives white
- The basic colors RGB

Modes

RBG & RBGA

body {
    background-color: rgb(255,0,0); /*R*/
    background-color: rgb(0,255,0); /*G*/
    background-color: rgb(0,0,255); /*B*/

    background-color: rgb(0,255,255);   /*C*/
    background-color: rgb(255,0,255);   /*M*/
    background-color: rgb(255,255,0);   /*Y*/
    background-color: rgb(0,0,0);       /*K*/

    background-color: rgb(255,255,255); /*W*/
    background-color: #8082
    /*The statement before means: with 22 as alpha*/
    background-color: #88008822;
    background-color: rgba(#880088, 0.2)
}

You can also add transparency (alpha) to the color statements.

Hsl & Hsla

Hue (Color Tone 0-360)
Saturacion color intensity (0->gray 100->light)
Luminosity (0-> black, color-> 50, white -> 100)

“
HSL is not HSB

        - 0 or 360 is red
        - 60 yellow
        - 120 green
        - 180 cyan
        - 240 blue
        - 300 magenta

image-20200802183322678

body {
    /*pure color*/
    background-color: hsl(0, 100%, 50%);
    /*with more light*/
    background-color: hsl(0, 100%, 70%);
    /*darker*/
    background-color: hsl(0, 100%, 30%);
    /*less saturation*/
    background-color: hsl(0, 60%, 30%);
}

Gradient

Gradient are background images, that’s why it needs a element, height or width to be specified.

All gradients are background images

By default the bg-repeat its declared as repeat.

Two types of gradient

Linear

body {
    background-image: linear-gradient(yellow, red);
    background-repeat: no-repeat;

    /*background-image: linear-gradient(color1 [stop]) //stop is optional*/
    background-image: linear-gradient(yellow 50px, red 70%);

    /*background-image: linear-gradient([angle], color1 [stop]) 
    //stop and angle are optional. 180deg is the default value*/
    background-image: linear-gradient(90deg, yellow 50px, red 70%);
    background-image: linear-gradient(to top left, yellow 50px, red 70%);
}

Radial

radial-gradient(size shape, at (x y), colorstop, colorstop, …)

Keywords size shape

body {
    background-image: radial-gradient(yellow, red);
    background-image: radial-gradient(yellow 50%, red 50%);
    background-image: radial-gradient(at 0 -50%, yellow 50%, red 50%);

    /*background-image: radial-gradient([size shape] [at x y], color1 [stop]);*/
    background-image: radial-gradient(200px circle at 0 -50%, yellow 50%, red 50%);
    background-image: radial-gradient(farthest-corner at 0 0, yellow 20%, red);
}

Gradients can be repeated. It is not necessary to use background-repeat.

.box {
    background-image: repeating-radial-gradient(black 0, black 10%, white 10%, white 20%);
    background-image: repeating-linear-gradient(black 0, black 10%, white 10%, white 20%);
}

https://codepen.io/eltoncass/pen/dyMoGdN

Text & Fonts

https://www.youtube.com/watch?v=Rrl_QxPX248

Basic concepts

Typography .- Study of the design and use of different letter types.
Font .- Type of letter created by a designer or by an enterprise.
Glyph .- Draws that represents every character
Font-Style .- Variations of the type of letter (weight, inclination)
Font-Family .- A group of fonts with similar characteristics.

em & rem

em.- variation according the context of the element (generally the font-size of the father)
- em is useful if you want to mantain the aspect ratio
- em should never be used in font-size.
rem.- variation according the root (html tag)
- rem is useful to normalize elements

p {
    font-size: 2rem;
    font-style: italic;
    text-align: left;
    line-height: 2| 200% |4rem;
    /*text-align: justify exists but is not recommended*/
    /*line-height: should be at least 1.3 times of the font size,
    it will depend if it is a title or content*/
    text-decoration: line-through;
    text-transform: uppercase;
    letter-spacing: -0.02m;
    word-spacing: 0.5em;
    font-family: Oswald 'Open Sans';
    font-weight: 500;
    text-shadow: .25px.25px 1px hsl(200,20%,40%);
}

vertical-align

white-spacing & overflow

white-spacing.- the text shown is exactly like in the html document
overflow

clip | break-word | hidden

text-transform

uppercase | lowercase | capitalize | line-throught

letter-spacing & word-spacing

Spacing between characters
Spacing between words

Pseudo-class

Pseudo-Class are a type of selectors are more related to the position and display of elements, they are in charge of the state.

They are used with : character

:root

It refers to the HMTL element (tag), it used for declare CSS variables.

:hover, :active, :visited

hover: when the pointer enters a determined element, it hovers over it, this state represents that.

actived: Indicates an element that has been clicked on.

visited: tags already visited.

:link

:target

Use to represent an element with an unique id in the url page, this element is the destiny of a redirection ()

:not

Excludes an element from a css rule ( e.g. :not([type=""]) )

:empty

Applies to elements without any child.

:nth-child(): nth-last-child(): & :first-child & :last-child

Select the indicated child element. The hierarchy does matter

nth-last-child will start counting from the last child

You can stack this pseudo classes.

/*Find the first five**/
p:nth-child(-n+5) {
    /**styles*/
}

/*Last five**/
p:nth-last-child(-n+5) {
    /**styles*/
}

/*Numbers from x**/
p:nth-child(n + x) {
    /**styles*/
}

/*Number 'til x**/
p:nth-last-child(n + x) {
    /**styles*/
}

/*Multiple of 3*/
p:nth-child(odd):nth-child(3n){
    /**styles*/
}

/*First Child*/
div :first-child {
    /*styles*/
}

/*Last Child*/
div :last-child {
    /*styles*/
}

:nth-of-type & first-of-type: & :last-of-type

Select the element of its type, the hierarchy does not matter. It is used for tags, does not work with classes.

/**Selects the 3rd parragraph*/
p:nth-of-type(3) {
    /*styles*/
}

/*find the first p*/
p:first-of-type {
    /*styles*/
}