W uproszczeniu, emmet pomaga nam w szybkim pisaniu html
Może występować jako plugin czy może być wbudowany do edytora którego używamy.
Ja używam visual studio code i on jest tam wbudowany w dodatku bardzo ładnie podpowiada składnię.
Poniżej to tylko mała lista przydatnych funkcji resztę można znaleźć tutaj
Zaczniemy od podstaw.
Napisz ! dostaniemy podstawę HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>W dzisiejszym świecie css nie obejdzie się bez breakpointów do RWD. Praktycznie wszyscy używają scss a w takim razie możemy użyć mixin.
Najpierw tworzę listę breakpoints jako mapę, którą będziemy wykorzystywać w naszych stylach. Poniżej przykładowa lista, do własnych projektów użyj własnej listy.
$breakpoints: (
xs: 512px,
sm: 768px,
md: 896px,
lg: 1152px,
xl: 1280px
);Następna czynność to użycie mixin i expression. Użyłem w tym przykładzie min-width ale również można użyć max-width. Dokładnie chodzi o @media (min-width: 512px) {} lub @media (max-width: 512px) {} wybór należy już tylko od Ciebie.
@mixin breakpoint( $breakpoint ) {
@if map-has-key( $breakpoints, $breakpoint ) {
@media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
@content;
}
} @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
@media (min-width: $breakpoint ) {
@content;
}
} @else {
@warn "Nie można pobrać żadnej wartości z `#{$breakpoint}`. Nie jest zdefiniowany w mapie `$breakpoints` lub jest nieprawidłową liczbą px, em, lub rem.";
}
}Cztery Pięć sposobów centrowania elementu w div.
Najpierw przygotujemy style dla html, mały reset nie jest zły 😉
* {
padding: 0;
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
overflow: hidden;
}Podam dwa sposoby na przyspieszenie renderowania się stron.
I. Sposób
Pierwszy sposób dotyczy najnowszych przeglądarek ale w przyszłości będzie działać wszędzie. Tego sposobu używa aliexpress.com 🙂 Chyba największy sklep na świecie, więc czy Chińczycy mogą się mylić 😉
Poniższy przykład wyrenderuje stronę dopiero wtedy kiedy przetworzy całą zawartość app.css
<head>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<header class="page-header">...</header>
<section class="sidebar">...</section>
<main class="content">...</main>
<footer class="page-footer">...</footer>
</body>Kilka użytecznych przykładów użycia "console".
Najpierw stwórzmy sobie plik html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<p>DZISIAJ W ...</p>
<script src="console.js"></script>
</body>
</html>