https://sumitkumar25.github.io/AdvancedCss/
- Sass
- Responsive design without framework.
- Sass 7-1 Architecture and BEM.
- Icon font usage.
- CSS properties.
@import.
@include.
include mixins, partials.
@content
Pass a block of code to a mixin.
@supports
browser support checks.Used in implemention graceful degradation.
- Starts with '_'.
- While import no prefix _ and no extension.
- $variableName
- Inside css calc #{variableDeclaration})
Three main categories.
Float Layouts.
FlexBox (Unidirectional).
Css Grid.(Bidirectional).
Media queries based on max-width.
Media queries based on min-width.
root defaults don't work in media queries conditionals..
rem and em derived from browser font-size and unaffected by root font size settings.
support for rem can be faulty use em for conditionals.
rem works fine for style rules.
Media queries doesn't add any specificity.Stylesheet order resolves conflicting rules.
Breakpoint selections.
Select based on real world device popularity.
Ignore devices all together and focus on content
- Media Queries Usage.
- Media query written for most of the style based on breakpoints.
- Mixin using @content projection.
// following will result in no. of mixins === breakpoints.
html {
font-size:62.5%;
@include phone-view( {
font-size:50%;
}
)
}
@mixin phone-view {
@media (max-width:600px) {
@content
}
}- Mixin with breakpoint as argument and using @if directive.
/* following will result in 1 mixins and conditions equal to breakpoints. */html {
font-size:62.5%;
@includerespond(phone) {
font-size:50%;
}
}
@mixin respond($breakpoint) {
@if $breakpoint==phone {
@media (max-width:600px) {
@content
}
}
}- Order or styles crucial while using media queries.
Images scaled using relative units.
Using Responsive images involves use of different images based on different scenarios.
Resolution switching.
Serve a scaled down (low resolution image) for lower resolution views.
Density switching.
Opposite of resoultion switching.
Art direction.
Different image altogether for different screen sizes.
<img> desity switch.
using sourceset attribute instead of src with density descriptors.
<imgsrcset="url-1 1x, url-2 2x" alt="text"><picture> art direction.
media attribute allows for media queries in html.
<picture><sourcesrcset="url-11 1x, url-21 2x" media="(max-wdith:37.2em)"><imgsrcset="url-1 1x, url-2 2x" alt="text"></picture>- <img> resolution switching using width descriptors and sizes attribute.
<imgsrcset="url-11 100w, url-21 200w" sizes="(max-width:900px) 20vw,(max-width:600px) 30vw,300px" alt="text">Use dpi based media queries combined with other conditions.
@media (min-resolution:192dpi) {
/* background change here */
}| Directory | contains |
|---|---|
| base | animations, resets, typography, utils |
| layout | header, footer, navigation, popup. |
| component | forn, features |
| abstract | functions, mixins, variables |
| pages | application pages. |
| themes | --- |
| vendor | -- |
Images does not scale well. Therefore vector icons fonts are better. Svg is also an option.
Perspective.
Use moz prefix.
Background Clip
Webkit prefix.
Backface Visibility.
Background blend mode.
overflow hidden required if rouded coreners of parent and
image reaches the edges.
Clip Path
Box decoration break.
Perspective.
figure
shape-outside
- element has to be floated.
- specify height and width.
Figure and figcaption.
filter.
video.
source
object-fit
Gradients.linear gradient mimicking clip-path
adjacent sibling,genric sibling,(both needs to be after the selected element) universal selector.
::input-placeholder
:focus, :invalid, placeholder-shown, :checked.
Custom radio button.
Checkbox hack.
Animation timing fns using bezier curves.
solid color gradients animations.
transform origin.
hypen
column-count
column-gap
column-rule
hyphen
:target
::selection
background-filter.
CSS GRID REPO: https://github.com/sumitkumar25/CSSGrid