Hello World
12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter-2/at-rules/styles.css: -------------------------------------------------------------------------------- 1 | p { 2 | text-decoration: underline; 3 | text-underline-offset: 1rem; 4 | } 5 | 6 | @supports not (text-underline-offset: 1rem) { 7 | p { 8 | text-decoration: none; 9 | padding-bottom: 1rem; 10 | border-bottom: solid 3px orange; 11 | display: inline-block; 12 | } 13 | } -------------------------------------------------------------------------------- /chapter-2/attribute-selector/icon-audio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-2/attribute-selector/icon-audio.png -------------------------------------------------------------------------------- /chapter-2/attribute-selector/icon-pdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-2/attribute-selector/icon-pdf.png -------------------------------------------------------------------------------- /chapter-2/attribute-selector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |35 | The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. 36 |37 |
38 | Wikipedia is a multilingual online encyclopedia created and maintained as an open collaboration project by a community of volunteer editors using a wiki-based editing system. It is the largest and most popular general reference work on the World Wide Web, and is one of the most popular websites ranked by Alexa as of October 2019. 39 |40 | PDF File 41 | Word Doc 42 | 43 | 44 | -------------------------------------------------------------------------------- /chapter-2/attribute-selector/styles.css: -------------------------------------------------------------------------------- 1 | label, input, a, button { 2 | display: block; 3 | margin-bottom: 1rem; 4 | } 5 | button { 6 | display: flex; 7 | align-items: center; 8 | } 9 | 10 | /* Matches password input fields */ 11 | input[type="password"] { 12 | color: red; 13 | } 14 | 15 | /* Strikes out any quotes cited from Wikipedia */ 16 | blockquote[cite*="wikipedia.org"] { 17 | text-decoration: line-through; 18 | } 19 | 20 | /* Underlines any element with a title attribute containing 21 | the word "continue" with any Capitalization. 22 | */ 23 | [title*="continue" i] { 24 | text-decoration: underline; 25 | } 26 | 27 | /* Display a gray border around any input which has an 28 | accept starting with image, such as image/png 29 | */ 30 | input[accept^="image"] { 31 | border: solid 4px gray; 32 | } 33 | 34 | /* Display a PDF icon beside any .pdf download links */ 35 | a[href$=".pdf"]::before { 36 | content: url(icon-pdf.png); 37 | } 38 | 39 | /* Matches a font-awesome icon such as fa-home */ 40 | i[class|="material-icons"] { 41 | color: blue; 42 | width: 32px; 43 | } 44 | -------------------------------------------------------------------------------- /chapter-2/class-selector/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-2/class-selector/image.png -------------------------------------------------------------------------------- /chapter-2/class-selector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt posuere sem, commodo dictum velit consequat quis. Curabitur a sodales massa. Nulla accumsan sapien in ex imperdiet, eu suscipit sapien congue. Vestibulum et ipsum ex. Vivamus viverra urna non fringilla fringilla. In rhoncus ullamcorper massa, nec lacinia justo tincidunt malesuada. Curabitur sagittis at massa nec tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
13 |
14 |
15 |
16 | There are a few other combinators to make this possible, and they even provide for hierarchical context based upon the elements' relationship within the DOM.
28 |By combining selectors together we can select elements to style based upon their natural location and ordering within an HTML documents.
41 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt posuere sem, commodo dictum velit consequat quis. Curabitur a sodales massa. Nulla accumsan sapien in ex imperdiet, eu suscipit sapien congue. Vestibulum et ipsum ex. Vivamus viverra urna non fringilla fringilla. In rhoncus ullamcorper massa, nec lacinia justo tincidunt malesuada. Curabitur sagittis at massa nec tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
13 |
14 |
15 |
16 | | Name | 14 |Zip Code | 16 | 17 | 18 ||
|---|---|---|
| Jane | 20 |jane@email.com | 21 |15978 | 22 |
| John | 25 |john@email.com | 26 |11458 | 27 |
| Alex | 30 |alex@email.com | 31 |68978 | 32 |
I am a paragrah
12 |I am also a paragrah
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter-2/type-selector/styles.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-size: 24px; 3 | } 4 | 5 | p { 6 | padding: 0.5rem; 7 | } -------------------------------------------------------------------------------- /chapter-2/universal-selector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales erat fringilla turpis accumsan, at gravida nunc sollicitudin. Mauris vulputate purus a ultrices posuere. Etiam et est semper sem egestas faucibus vel eu nunc. Fusce ac massa nec libero aliquet feugiat. Fusce quis congue ligula, sit amet eleifend tellus. Phasellus ultrices venenatis enim suscipit malesuada. Cras pretium quam eros, in laoreet est lobortis at.
13 |
14 | | Lorem Ipsum | 17 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. | 18 |
|---|---|
| Pellentesque | 21 |Pellentesque sit amet massa auctor est hendrerit ullamcorper ac in libero | 22 |
Pellentesque sit amet massa auctor est hendrerit ullamcorper ac in libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin rhoncus odio nec nisl porta fringilla. Morbi pulvinar tempus posuere. Quisque eu felis ullamcorper sapien gravida efficitur. Aenean hendrerit placerat elit.
25 |Duis vitae iaculis risus. Vivamus id egestas dolor, ac auctor ante. Praesent auctor nibh eget massa euismod, et ornare velit iaculis. Duis in mollis lacus, ac vulputate odio. Morbi ultricies lectus vitae sem efficitur, at condimentum nibh dignissim. Quisque a velit tempor eros blandit convallis suscipit a felis. Donec imperdiet vitae augue elementum pretium.
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter-3/inheritance/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: gray; 3 | padding: 2rem; 4 | text-align: justify; 5 | line-height: 1.5rem; 6 | font-family: Helvetica, Arial, sans-serif; 7 | font-weight: lighter; 8 | } 9 | 10 | h1 { 11 | color: slategray; 12 | font-family: 'Comic Sans MS'; 13 | font-size: 2.5rem; 14 | letter-spacing: .0625rem; 15 | } 16 | h1 { 17 | font-family: fantasy; 18 | } 19 | 20 | p:first-of-type::first-letter { 21 | color: gold; 22 | display: block; 23 | float: left; 24 | font-size: 3rem; 25 | line-height: 0; 26 | margin: .5rem .5rem 0 0; 27 | } 28 | 29 | table { 30 | border-collapse: collapse; 31 | } 32 | tr { 33 | color: slategray; 34 | border-top: solid 1px lightsteelblue; 35 | border-bottom: solid 1px lightsteelblue; 36 | } 37 | td { 38 | padding: .5rem 1rem; 39 | } 40 | 41 | img { 42 | margin: 0 0 0 1rem; 43 | float: right; 44 | width: 200px; 45 | } 46 | -------------------------------------------------------------------------------- /chapter-3/precedence/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales erat fringilla turpis accumsan, at gravida nunc sollicitudin. Mauris vulputate purus a ultrices posuere. Etiam et est semper sem egestas faucibus vel eu nunc. Fusce ac massa nec libero aliquet feugiat. Fusce quis congue ligula, sit amet eleifend tellus. Phasellus ultrices venenatis enim suscipit malesuada. Cras pretium quam eros, in laoreet est lobortis at.
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter-3/precedence/styles.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: black !important; 3 | } 4 | 5 | p { 6 | animation: 3s linear 1s 1 alternate slidein; 7 | } 8 | @keyframes slidein { 9 | from { transform: scaleX(0); } 10 | to { transform: scaleX(1); } 11 | } -------------------------------------------------------------------------------- /chapter-3/precedence/user.css: -------------------------------------------------------------------------------- 1 | body { background: black !important } 2 | 3 | *, p { 4 | animation: none !important; 5 | color: white !important 6 | } 7 | -------------------------------------------------------------------------------- /chapter-4/box-sizing/border-box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Content
14 |Content
17 |Content
23 |Content
26 |Content
32 |Content
35 |Content
14 |Content
17 |Content
23 |Content
26 |Content
14 |Content
17 |Content
23 |Content
26 |I am code.
14 | And some more text.
15 | I am an anchor tag.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/chapter-4/display/inline/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | font-size: 24px;
3 | padding: 36px;
4 | margin: 0;
5 | }
6 | a {
7 | padding: 10px;
8 | outline: dotted 2px grey;
9 | }
10 |
11 | code {
12 | margin: 10px;
13 | outline: dotted 2px grey;
14 | outline-offset: 8px;
15 | }
--------------------------------------------------------------------------------
/chapter-4/flex/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-4/flex/image.png
--------------------------------------------------------------------------------
/chapter-4/flex/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | padding: 12px 36px;
3 | margin: 0;
4 | }
5 |
6 | h1 { text-align: center; }
7 | nav {
8 | border-top: solid 1px gray;
9 | border-bottom: solid 1px gray;
10 | }
11 |
12 | ul {
13 | display: flex;
14 | padding-left: 0;
15 | justify-content: space-around;
16 | }
17 |
18 | .container { display: flex; }
19 |
20 | aside {
21 | background: rgba(0, 0, 0, .16);
22 | flex-basis: 30%;
23 | flex-shrink: 0;
24 | padding: 30px;
25 | }
26 |
27 | section {
28 | background: rgba(0, 0, 0, .5);
29 | align-items: center;
30 | display: flex;
31 | flex-direction: column;
32 | justify-content: space-evenly;
33 | }
34 |
35 | section div {
36 | color: white;
37 | background: rgba(0, 0, 0, .50);
38 | align-items: center;
39 | display: flex;
40 | height: 100px;
41 | justify-content: center;
42 | width: 100px;
43 | }
44 |
45 | main {
46 | background: rgba(0, 0, 0, .05);
47 | padding: 30px;
48 | }
49 |
50 | li { list-style-type: none; }
51 | img {
52 | width: 100%;
53 | max-width: 250px;
54 | float: left;
55 | padding-right: 20px;
56 | }
--------------------------------------------------------------------------------
/chapter-4/float/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-4/float/image.png
--------------------------------------------------------------------------------
/chapter-4/float/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | padding: 36px;
3 | margin: 0;
4 | }
5 |
6 | h1 {
7 | text-align: center;
8 | }
9 | nav {
10 | border-top: solid 1px gray;
11 | border-bottom: solid 1px gray;
12 | display: flow-root;
13 | }
14 | nav ul {
15 | padding: 0;
16 | margin: 0;
17 | }
18 | nav li {
19 | box-sizing: border-box;
20 | list-style-type: none;
21 | float: left;
22 | padding: 1rem;
23 | text-align: center;
24 | width: 33.33%;
25 | }
26 |
27 | section {
28 | float: left;
29 | background: rgba(0, 0, 0, .16);
30 | }
31 | section div {
32 | box-sizing: border-box;
33 | color: white;
34 | background: rgba(0, 0, 0, .50);
35 | height: 100px;
36 | width: 100px;
37 | text-align: center;
38 | padding: 37px;
39 | margin-top: 5rem;
40 | margin-bottom: 5rem;
41 | }
42 |
43 | main {
44 | background: rgba(0, 0, 0, .05);
45 | box-sizing: border-box;
46 | padding: 30px;
47 | float: left;
48 | width: calc(100vw - 244px - 30%)
49 | }
50 |
51 | aside {
52 | box-sizing: border-box;
53 | background: rgba(0, 0, 0, .16);
54 | width: 30%;
55 | padding: 30px;
56 | float: right;
57 | }
58 |
59 | img {
60 | width: 100%;
61 | max-width: 250px;
62 | float: left;
63 | padding-right: 20px;
64 | }
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/chapter-4/grid/column-row-numbers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue neque, porttitor in dolor in, hendrerit mattis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer a mauris enim. Vestibulum non orci massa. Cras sit amet placerat mi. Phasellus at congue ante. Nullam ullamcorper eget urna sed lacinia. Sed a nibh pharetra, faucibus ligula in, mollis tellus. Donec in velit auctor, tempus dolor ac, sollicitudin justo.
18 |Quisque faucibus, augue sed varius ornare, sem neque dictum velit, a blandit urna nulla et urna. Nulla vehicula dolor eu arcu iaculis, sed porta mauris consectetur. Nunc eu pulvinar dolor. In magna ante, luctus sed consequat quis, facilisis id dui. Proin rhoncus, dui iaculis pretium ornare, ex est faucibus lorem, et dignissim felis lectus nec lorem. Phasellus sagittis interdum purus. Ut vel nunc eu erat finibus finibus vitae porttitor magna. Nulla fermentum vestibulum tincidunt. Fusce gravida, arcu ac egestas porttitor, augue enim aliquet elit, rhoncus dapibus velit libero a dui. Sed laoreet lacinia lacus convallis fermentum.
19 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue neque, porttitor in dolor in, hendrerit mattis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer a mauris enim. Vestibulum non orci massa. Cras sit amet placerat mi. Phasellus at congue ante. Nullam ullamcorper eget urna sed lacinia. Sed a nibh pharetra, faucibus ligula in, mollis tellus. Donec in velit auctor, tempus dolor ac, sollicitudin justo.
18 |Quisque faucibus, augue sed varius ornare, sem neque dictum velit, a blandit urna nulla et urna. Nulla vehicula dolor eu arcu iaculis, sed porta mauris consectetur. Nunc eu pulvinar dolor. In magna ante, luctus sed consequat quis, facilisis id dui. Proin rhoncus, dui iaculis pretium ornare, ex est faucibus lorem, et dignissim felis lectus nec lorem. Phasellus sagittis interdum purus. Ut vel nunc eu erat finibus finibus vitae porttitor magna. Nulla fermentum vestibulum tincidunt. Fusce gravida, arcu ac egestas porttitor, augue enim aliquet elit, rhoncus dapibus velit libero a dui. Sed laoreet lacinia lacus convallis fermentum.
19 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia, magna sed efficitur cursus, tortor nisi dictum lorem, vitae dictum nibh mauris ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac consequat odio, ut convallis magna. Praesent at malesuada ex.
16 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia, magna sed efficitur cursus, tortor nisi dictum lorem, vitae dictum nibh mauris ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac consequat odio, ut convallis magna. Praesent at malesuada ex.
26 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia, magna sed efficitur cursus, tortor nisi dictum lorem, vitae dictum nibh mauris ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac consequat odio, ut convallis magna. Praesent at malesuada ex.
36 |Paragraph
14 | 15 | 37 | 38 | 39 | Link 40 | 41 |Blockquote48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /chapter-5/fallbacks/beach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-5/fallbacks/beach.png -------------------------------------------------------------------------------- /chapter-5/fallbacks/child.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-5/fallbacks/child.png -------------------------------------------------------------------------------- /chapter-5/fallbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia, magna sed efficitur cursus, tortor nisi dictum lorem, vitae dictum nibh mauris ut mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ac consequat odio, ut convallis magna. Praesent at malesuada ex.
12 |
12 |
13 | CSP Test Page
15 | 16 | 17 | -------------------------------------------------------------------------------- /chapter-8/bootstrap-mixins/node_modules/jquery/test/data/1x1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-8/bootstrap-mixins/node_modules/jquery/test/data/1x1.jpg -------------------------------------------------------------------------------- /chapter-8/bootstrap-mixins/node_modules/jquery/test/data/ajax/unreleasedXHR.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/architecting-css/0778857492206cccd43737177335495f3e9b1fae/chapter-8/bootstrap-mixins/node_modules/jquery/test/data/ajax/unreleasedXHR.docx -------------------------------------------------------------------------------- /chapter-8/bootstrap-mixins/node_modules/jquery/test/data/atom+xml.php: -------------------------------------------------------------------------------- 1 | 2 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed neque semper ante mattis tempor. Morbi volutpat ex ante, eget vulputate ligula pulvinar gravida.
13 | 14 |Aged cortado, carajillo saucer wings aftertaste robusta americano plunger pot. Aromatic eu, skinny affogato saucer cinnamon barista robusta. Siphon, et redeye variety percolator sweet plunger pot. Macchiato, french press filter coffee beans wings redeye saucer id cinnamon.
18 |Chew master's slippers i is not fat, i is fluffy but i can haz yet eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap.
24 |Lorem ipsum dolor sit amet...
26 | 27 |
Lorem ipsum dolor sit amet...
30 | 31 |