The document discusses using CSS Grid Layout and other modern CSS techniques to create magazine-style layouts and interfaces. Some key points:
- The Media Object pattern is demonstrated using CSS Grid Layout, with images and text arranged in columns and rows.
- Flexbox and minmax() are used to create flexible layouts with auto-sizing elements.
- Feature queries allow applying styles conditionally based on browser support for CSS features.
- Techniques like shape-outside and grid areas are used to create magazine-style layouts with images, captions, and floating elements. Fancy headers with circular elements are also demonstrated.
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts.
twitter.com/jdsteinbach
jamessteinbach.com
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts.
twitter.com/jdsteinbach
jamessteinbach.com
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
Grid Layout is here! What is it? Why is it different to flexbox? How do I get started? What about old browsers? All these questions and more in a high speed tour of the spec.
Solving Layout Problems With CSS Grid and FriendsFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Rachel Andrew, Perch CMS
Overview
CSS Grid Layout launched into the majority of our browsers in 2017. As designers and developers have started to use Grid Rachel has been answering a lot of questions about the specifications. In this talk she’ll answer some of the common questions about Grid Layout in production – from dealing with old browsers to what might come next in CSS for layout. There will be plenty of practical tips for you to use in your projects today.
Objective
To give attendees practical ways in which they can use new CSS to solve tricky problems
Target Audience
Front-end developers
Assumed Audience Knowledge
Some CSS knowledge
Five Things Audience Members Will Learn
CSS Grid
Flexbox
Box alignment
Feature queries
CSS tips and tricks
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
I explain some of the common layout problems that CSS Grid and related specifications attempt to solve - while answering some of the common questions I am asked about Grid Layout.
CSS3 Basic Ideas Tags and Animations, Learn the Basic of CSS 3 with the help of this slideshare slideshow, detailed slides about CSS 3 are coming soon, Flash and Animations in CSS3 will be uploaded soon to teach you get rid of Flash, Javascript Animations, Silverlight etc,.. so why wait get ready to be a Rock-star in CSS3 designing. Keep in mind that in near future web technologies are going to rule the technology world and HTML, CSS and Javascript is going to play a key role in it.
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
UNLOCKING THE POWER OF CSS GRID LAYOUT
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
More Related Content
Similar to An Event Apart DC - New CSS Layout meets the Real World
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
Grid Layout is here! What is it? Why is it different to flexbox? How do I get started? What about old browsers? All these questions and more in a high speed tour of the spec.
Solving Layout Problems With CSS Grid and FriendsFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Rachel Andrew, Perch CMS
Overview
CSS Grid Layout launched into the majority of our browsers in 2017. As designers and developers have started to use Grid Rachel has been answering a lot of questions about the specifications. In this talk she’ll answer some of the common questions about Grid Layout in production – from dealing with old browsers to what might come next in CSS for layout. There will be plenty of practical tips for you to use in your projects today.
Objective
To give attendees practical ways in which they can use new CSS to solve tricky problems
Target Audience
Front-end developers
Assumed Audience Knowledge
Some CSS knowledge
Five Things Audience Members Will Learn
CSS Grid
Flexbox
Box alignment
Feature queries
CSS tips and tricks
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
I explain some of the common layout problems that CSS Grid and related specifications attempt to solve - while answering some of the common questions I am asked about Grid Layout.
CSS3 Basic Ideas Tags and Animations, Learn the Basic of CSS 3 with the help of this slideshare slideshow, detailed slides about CSS 3 are coming soon, Flash and Animations in CSS3 will be uploaded soon to teach you get rid of Flash, Javascript Animations, Silverlight etc,.. so why wait get ready to be a Rock-star in CSS3 designing. Keep in mind that in near future web technologies are going to rule the technology world and HTML, CSS and Javascript is going to play a key role in it.
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
UNLOCKING THE POWER OF CSS GRID LAYOUT
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
Grid layout has now landed in all of the mainstream desktop browsers. It's exciting but how do we start to move to using grid layout, and why should we?
Today we have CSS specifications for animation and transitions, complex layout, custom properties and much more. In addition to the breadth of modern CSS specifications, our evergreen, auto-updating browsers sneak in new features with every release.
In this talk, I’ll be taking a look at some of the things that CSS is capable of, some of which you might think you need a JavaScript framework or at least a pre-processor to achieve.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
An Event Apart DC - New CSS Layout meets the Real World
1. New CSS Layout Meets the Real World
Rachel Andrew @ An Event Apart DC
2. “The state of the use of Cascading Style Sheet on the web is really
beginning to get boring. Why haven't designers begun exploiting
its benefits yet?”
3. I can remember a time not too long ago when individuals were
running amok exploiting the simplest of html tags and creating
works of beauty. But now, after browser vendors have stepped
it up and given us much of the control we've been asking for, I
can't seem to find web designers that are exploiting these new
found powers.
4. I can remember a time not too long ago when individuals were
running amok exploiting the simplest of html tags and creating
works of beauty. But now, after browser vendors have stepped
it up and given us much of the control we've been asking for, I
can't seem to find web designers that are exploiting these new
found powers.
Chris Casciano
19. Media Object
▸ contains an image plus content
▸ is flexible
▸ elements should stack on mobile
▸ box should clear the contents
▸ image can be to the left or the right
▸ can be nested
21. <div class="media">
<h2 class="title">This is my title</
h2>
<div class="img">
<img src="/assets/img/
placeholder.jpg" alt="Placeholder">
</div>
<div class="content">
</div>
<div class="footer">
footer here
</div>
</div>
Media Object
A parent with a class of ‘media’
Four child elements:
- title
- img
- content
- footer
22.
23.
24.
25. @media (min-width: 600px) {
.media {
display: grid;
}
}
Media Object
To create a grid use a new value of
the display property:
display: grid
27. @media (min-width: 600px) {
.media {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 1fr 3fr;
}
}
Media Object
The grid-template-columns property
creates column tracks on the grid.
The new fr unit represents a fraction
of the available space.
36. <div class="flex-example">
<div class="one">Box one</div>
<div class="two">Box two</div>
<div class="three">
<div class="inner">Box three</div>
</div>
</div>
auto as flex-basis
Box one, two and three are nested
inside flex-example.
There is another element nested
inside box three.
37. .flex-example {
display: flex;
}
.flex-example > div {
flex: 1 1 auto;
}
auto as flex-basis
The parent becomes a flex container,
and all direct children are set to grow
and shrink from a flex-basis of auto.
38. no box has a width, and flex-basis is auto and so resolved from the content
39. .flex-example {
display: flex;
}
.flex-example > div {
flex: 1 1 auto;
}
.two {
width: 350px;
}
.three .inner {
width: 200px;
}
auto as flex-basis
Use auto and the flex-basis will be
taken from any width set on the item.
If there is no width, flex-basis will be
taken from the content width.
41. @media (min-width: 600px) {
.media {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"img title"
"img bd"
"img ft";
}
}
Media Object
The grid-template-rows property
defines the rows on the grid.
If we don’t define rows grid will
create them as part of the implicit
grid.
42. @media (min-width: 600px) {
.media {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"img title"
"img bd"
"img ft";
}
}
Media Object
Mix absolute lengths with fr units to
have flexible containers that have
some fixed width tracks.
43. Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right
▸ can be nested
44. @media (min-width: 600px) {
.media {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 150px 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"img title"
"img bd"
"img ft";
}
.media.media-flip {
grid-template-columns: 1fr 150px;
grid-template-areas:
"title img"
"bd img"
"ft img";
}
}
Media Object
Flipping the display by creating new
rules for the ‘media-flip’ class.
45.
46. Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right ✓
▸ can be nested
47.
48. .media > .media {
grid-column: 2 / -1 ;
}
Media Object
If an item with a class of media is the
direct child of an item with a class of
media, start on column line 2.
Line -1 is the final line of the grid.
49.
50.
51. Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right ✓
▸ can be nested ✓
61. .half-border {
display: grid;
border-top: 2px solid #000;
grid-template-rows:
minmax(30px, 1fr) 2fr;
align-self: start;
}
Half-border Box
The first row of the grid is a minimum
of 30px tall, a maximum of 1fr.
70. @media (min-width: 600px) {
.feature-fig {
display: grid;
grid-template-columns: 2fr 2fr 1fr;
grid-template-rows:
minmax(200px, auto)
minmax(100px, auto)
auto
minmax(100px,auto);
}
.feature-fig img {
object-fit: cover;
}
}
Magazine Style Layout
Creating row tracks. The minmax()
notation means that we can set a
minimum size for the tracks.
71. .feature-fig figcaption {
grid-column: 1;
grid-row: 3;
margin-top: 10px;
}
Magazine Style Layout
Position the figcaption after grid
column line 1, and grid row line 3
72.
73. .feature-fig .main {
grid-row: 1 / 3;
grid-column: 1 / 3;
z-index: 2;
}
.feature-fig .insert {
grid-row: 2 / 5;
grid-column: 2 / 4;
border-top: 10px solid #fff;
border-left: 10px solid #fff;
z-index: 3;
}
.feature-fig .small {
grid-row: 4 / 6;
grid-column: 1 ;
}
Magazine Style Layout
The items are positioned using line-
based positioning.
Grid items respect z-index so we can
layer items that end up in the same
cells.
80. <header class="run-header">
<h1><span class="distance-wrap">
<span class="distance">4.5</span>
<span class="miles">Miles</span></
span>
<span class="location">in Berlin,
Germany</span></h1>
<div class="intro">
<p> </p>
</div>
</header>
Fancy Header
We need to add some mark-up to
identify the parts of the h1 text we
want to style.
81.
82. .run-header .distance-wrap {
border-radius: 50%;
width: 5em;
height: 5em;
padding: 0;
background: linear-
gradient(rgba(0,0,0,0),
rgba(0,0,0,0.8)),url(/assets/img/flag-
germany.jpg) center center;
background-size: cover;
margin: 0 auto 1em auto;
z-index: 2;
}
Fancy Header
I use border-radius set to 50% to
make the distance part of the header
a circle.
83.
84. .run-header .distance-wrap {
display: block;
border-radius: 50%;
width: 5em;
height: 5em;
padding: 0;
background: linear-
gradient(rgba(0,0,0,0),
rgba(0,0,0,0.8)),url(/assets/img/flag-
germany.jpg) center center;
background-size: cover;
margin: 0 auto 1em auto;
z-index: 2;
}
Fancy Header
Setting display to block will mean the
span becomes block level.
85.
86. .run-header .distance-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 5em;
height: 5em;
padding: 0;
background: linear-
gradient(rgba(0,0,0,0),
rgba(0,0,0,0.8)),url(/assets/img/flag-
germany.jpg) center center;
background-size: cover;
margin: 0 auto 1em auto;
z-index: 2;
}
Fancy Header
I use border-radius set to 50% to
make the distance part of the header
a circle.
87.
88. @media (min-width: 600px) {
.run-header .distance-wrap {
float: left;
margin: 0 10px 10px 0;
}
.run-header h1 {
text-align: left;
width: 100%;
}
.run-header .location {
display: inline-block;
padding-left: 1em;
margin-left: -1em;
}
.intro {
padding: 0;
}
}
Fancy Header
Floating the distance-wrap class left
means the location comes up
alongside it.
89.
90. @media (min-width: 600px) {
.run-header .distance-wrap {
float: left;
margin: 0 10px 10px 0;
}
.run-header h1 {
text-align: left;
width: 100%;
}
.run-header .location {
display: inline-block;
padding-left: 1em;
margin-left: -1em;
}
.intro {
padding: 0;
}
}
Fancy Header
We can use the shape-outside
property with a value of margin-box
to create the curved text.
91. @media (min-width: 600px) {
.run-header .distance-wrap {
float: left;
shape-outside: margin-box;
margin: 0 10px 10px 0;
}
.run-header h1 {
text-align: left;
width: 100%;
}
.run-header .location {
display: inline-block;
padding-left: 1em;
margin-left: -1em;
}
.intro {
padding: 0;
}
}
Fancy Header
We can use the shape-outside
property with a value of margin-box
to create the curved text.
103. @supports (shape-outside: margin-box) {
}
Fancy Header
A Feature Query looks very similar to
Media Queries. Here we test for a
property and value pair.
104. Using Feature Queries
▸ Write CSS for browsers without support
▸ Override those properties inside the feature queries
▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
▸ A component based approach helps to keep this all in check!
105. .intro {
padding: 0;
margin-left: 9em;
}
@supports (shape-outside: margin-box) {
.run-header .distance-wrap {
shape-outside: margin-box;
margin: 0 10px 10px 0;
}
.intro {
margin-left: 0;
}
}
Fancy Header
Outside of the feature query I add a
left margin to the intro.
Inside the feature query we add the
shape-outside property and also
remove that margin.
112. @media (min-width: 600px) {
.half-border {
width: 45%;
display: inline-block;
vertical-align: top;
}
.feature-fig img {
object-fit: cover;
display: inline-block;
width: 45%;
}
.feature-fig .small {
vertical-align: bottom;
margin: 0 0 20px 5%;
}
.photo-circle {
border-radius: 50%;
}
@supports(display: grid) {
.feature-fig img,
.half-border {
width: auto;
}
.feature-fig .small {
margin: 0;
}
/* the rest of my CSS for grid */
}
}
Magazine Style Layout
Outside the Feature Query add CSS
for non-grid browsers.
Inside write CSS to override plus the
rules for grid layout.
113.
114. @media (min-width: 600px) {
.half-border {
width: 45%;
display: inline-block;
vertical-align: top;
}
.feature-fig img {
object-fit: cover;
display: inline-block;
width: 45%;
}
.feature-fig .small {
vertical-align: bottom;
margin: 0 0 20px 5%;
}
.photo-circle {
border-radius: 50%;
}
@supports(display: grid) {
.feature-fig img,
.half-border {
width: auto;
}
.feature-fig .small {
margin: 0;
}
/* the rest of my CSS for grid */
}
}
Magazine Style Layout
Outside the Feature Query add CSS
for non-grid browsers.
Inside write CSS to override plus the
rules for grid layout.
115. If using display: grid or display: flex
▸ Floated items that become grid or flex items lose their float behaviour
▸ vertical-align has no effect on a grid item
▸ Items set to display: inline-block or display: block become grid items
▸ Your overrides mostly will be concerned with changing widths, margins and
padding.
▸ If grid tracks or flex-basis seem to be using a size you didn’t expect, check
your item widths!
119. Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right ✓
▸ can be nested ✓
120. .media:after {
content: "";
display: table;
clear: both;
}
.media > .media {
margin-left: 160px;
clear: both;
}
Media Object
We need to add a ‘clearfix’ to the
media object outside the Feature
Queries, and also clear nested Media
Objects.
121. .media .img {
float: left;
margin: 0 10px 0 0;
width: 150px;
}
.media.media-flip .img {
float: right;
margin: 0 0 0 10px;
}
.media > * {
margin: 0 0 0 160px;
}
.media.media-flip > * {
margin: 0 160px 0 0;
}
Media Object
The image is floated left, or right.
Add a right, or left margin to the
other child elements.
122. @supports(display: grid ) {
.media > *,
.media.media-flip > * {
margin: 0;
}
.media .img,
.media.media-flip .img {
width: auto;
margin: 0;
}
.media:after {
content: none;
}
/* the rest of my CSS for grid */
}
Media Object
The overrides are to remove margins
and widths and the now redundant
generated content for clearing.
123.
124.
125. <div class="media">
<div class="img">
<img src="/assets/img/placeholder.jpg"
alt="Placeholder">
</div>
<h2 class="title">This is my title</h2>
<div class="content">
</div>
<div class="footer">
footer here
</div>
</div>
Media Object
Moving the title below the image in
the source.
126.
127. .media {
display: grid;
grid-column-gap: 20px;
grid-template-areas:
"title"
"img"
"bd"
"ft";
}
Media Object
A single column grid to arrange our
elements for narrow widths.
128.
129. A variety of Media Objects - https://cssgrid.me/media-objects
131. Vendor Prefixes
▸ Vendor specific extensions to CSS
▸ Used by browsers to expose experimental features
▸ Used by developers to use those experimental features in production
132. Prefix Removals
▸ The only prefixed Grid is the old IE10 implementation -ms prefix
▸ shape-outside is -webkit prefixed in Safari and iOS Safari 10, later Safari
does not need it.
▸ Flexbox is now unprefixed in all browsers
133. For older browsers
▸ Check caniuse.com to see where you still need prefixes
▸ Autoprefixer uses the Can I Use database to add these automatically
▸ Autoprefixer will prefix very simple grids with the -ms version, if you enable
this.
▸ Autoprefixer may also make a terrible mess if you have used properties not
part of the IE implementation. Be sure to test!