The document contains code snippets and notes about CSS frameworks and methodologies including: - Media queries and mixins for responsive design - BEM, OOCSS, and SMACSS principles and patterns - CSS file structure organization approaches including modular and component-based structures - Usage of CSS preprocessing with Sass/SCSS

5. .header {
..
}
@media(max-width: 768px) {
.header {
..
}
}
@media(max-width: 320px) {
.header {
..
}
}

6. @mixin Pad{
@media(max-width: 768px) {
@content
}
}
@mixin iPhone6{
@media(max-width: 375px) {
@content
}
}

7. .header {
..
@include Pad{
..
}
@include iPhone6{
..
}
}

8. .header
..
+Pad
..
+iPhone
..

11. <div class="media">
<div class="body">
<h3 class="alpha"></h3>
<p class="lede"></p>
</div>
</div>

15. button
button
<input type="button" class="btn">
<input type="button" class="btn btn-primary">
<input type="button" class="btn btn-primary btn-large">
button
btn hack
btn-primary
btn-large padding

16. <table class="pure-table">
<table class="pure-table pure-table-bordered">

22. // (JS)
.block--active
//
.block--MobileShake
//block title Float
.block__title--float //BEM
.block-title--float //

24. <div class="table table-h trailer">
<div class="table-row table-row--MobileInline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </div>
<div class="table-content"> </div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile

25. <div class="table table-h trailer">
<div class="table-row table-row--MobileIline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </D>
<div class="table-content"> </div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
SMACSS
1.table
2.table-h table-v

26. <div class="table table-h trailer">
<div class="table-row table-row--MobileIline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </D>
<div class="table-content"> </div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
1. div table
RWD
Mobile
2. table

27. <div class="table table-h trailer">
<div class="table-row table-row--MobileIline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </D>
<div class="table-content"> </div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
trailer = margin-bottom:1
w20 = 20%
OOCSS - CSS Class

28. <div class="table table-h trailer">
<div class="table-row table-row--MobileInline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </D>
<div class="table-content"> </div>
</div>
</div>
display:table
display:table-row
display:table-cell
display:table-cell
PC Mobile
table-row--MobileInline = div inline
BEM -

29. <div class="table table-h trailer">
<div class="table-row table-row--MobileInline">
<div class="table-title w20"> </div>
<div class="table-content"> </div>
</div>
<div class="table-row">
<div class="table-title"> </div>
<div class="table-content"> </div>
</div>
</div>

32. |-- _variables.scss
|-- _reset.scss
|-- _mixins.scss
|-- _layout.scss
|-- _index.scss
|-- _page1.scss
|-- _page2.scss
//
// meyerweb Normalize
// Mixin function
// (header aside)
//
//
//

33. |-- _variables.scss
|-- _reset.scss
|-- _grid.scss
|-- _OOCSS.scss
|-- _typography.scss
|-- _mixins.scss
|-- _layout.scss
|-- _index.scss
|-- _page1.scss
|-- _page2.scss
//
// meyerweb Normalize
// RWD
// CSS
//
// Mixin function
// (header aside)
//
//
//

34. |-- config (reset variables typography grid)
|-- helper (state Mixin OOCSS)
|-- core (button table form)
|-- component (button-group breadcrumb)
|-- layout (header footer l-list)
|-- page (page1 page2)
|-- vendor (jqSlider jqValid)
|-- inbox ( )

35. @import "config/*";
@import "helper/*";
@import "component/*";
@import "layout/*";
@import "page/*";
@import "vendor/*";
@import "inbox";
//

36. RFP ..

37. <link rel="stylesheet" href="/css/all.css">
<link rel="stylesheet" href="/css/version/bsp.css">
1.all.css CSS
2.bsp.css theme

38. 1. scss bsp.scss red.scss
2. _subtheme.scss
bsp.scss

39. _subtheme.scss
_subtheme.scss

47. code
GG