CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017Morten Rand-Hendriksen
Slides from the WordCamp Europe presentation by the same name. From the conference website:
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
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.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
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.
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017Morten Rand-Hendriksen
Slides from the WordCamp Europe presentation by the same name. From the conference website:
CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.
The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.
In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.
CSS Grid is here, and you can start using it today. This talk shows you how to do it right.
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.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
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.
We will cover whole of the web development basics comprising of HTML, CSS, JavaScript in this series.
Following are topics useful for any newbie to intermediate who is interested in learning Web Development
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?
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.
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.
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.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
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
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
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.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
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.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
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.
3. The trouble with CSS layout
• Floats and clearfix hacks
• Absolute positioning means elements are taken
out of document flow and risk overlaps
• Redundant markup and positioning oddities with
display: table
• White space issues with inline-block
4. The cost of taming layout methods
• Developer hours spent learning non-obvious
concepts.
• Compromises in terms of document semantics in
order to achieve responsive layouts.
• Needing to lean on frameworks to help with
complex math.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
7. In my HTML I have an
article with a class of
‘main’.
<article class="main">
<h1>Blanchard Crosses the Sea in a
Balloon</h1>
<p> ... </p>
</article>
8.
9. Use the property column-
width to declare a width
for our columns.
The browser will create
as many columns as
possible using that as the
ideal width.
.main {
column-width: 220px;
}
10.
11. CSS Multiple column layout
[The column-width value] describes the optimal
column width. The actual column width may be
wider (to fill the available space), or narrower
(only if the available space is smaller than the
specified column width). Specified values must
be greater than 0.
12. Set the property column-
count to 3 and the
browser will always
create three columns.
.main {
column-count: 3;
}
13. The gap between columns
is controlled by the
column-gap property.
Give this a value of 0 and
you have no gap.
.main {
column-count: 3;
column-gap: 0;
}
14.
15. The browser takes the
column-gap into account
when calculating the size
of the columns.
.main {
column-count: 3;
column-gap: 20px;
}
16. Styling columns
• very limited in the current specification
• cannot set size of an individual column
• cannot change background colour of a column
• cannot set padding or margins on a column
17. Multiple column layout
future specifications may add additional
functionality. For example, columns of
different widths and different backgrounds
may be supported.
18. Add a rule between
columns using the
column-rule property.
This is a shorthand for:
column-rule-width
column-rule-style
column-rule-color
These properties behave
just like the border
properties.
.main {
column-count: 3;
column-gap: 20px;
column-rule: 2px dotted #ccc;
}
19.
20.
21. The property column-
span can have a value of
all or none. If set to all the
element will span all
columns.
.main h1,
.image {
column-span: all;
}
28. Navigation marked up as
an unordered list in my
HTML.
<nav>
<ul class="nav">
<li><a href="">Introduction</a></li>
<li><a href="">Ancient Times</a></li>
<li><a href="">Balloon Theory</a></li>
<li><a href="">First Public Trial</a></
li>
<li><a href="">Experiments</a></li>
</ul>
</nav>
29.
30. flex is a new value of the
display property. This
causes the element to use
flexbox.
justify-content lets us set
how the content is
justified. nav ul{
display: flex;
justify-content: space-between;
}
31.
32. To have equal space all
around the item give
justify-content a value of
space-around.
nav ul{
display: flex;
justify-content: space-around;
}
33.
34. Default flexbox behaviour
• Items displayed as a row
• Items displayed in natural (DOM) order
• align-items set to stretch
• flex-wrap set to nowrap
40. The align-items property:
- flex-start
- flex-end
- center
- baseline
- stretch
nav ul{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
41.
42.
43.
44. Our boxes are displayed
using flexbox. If there is
not space for all 3 they
will wrap as the flex-wrap
property is set to wrap.
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box {
border: 1px solid #444;
padding: 10px;
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
min-width: 1px;
}
45. The flex property is a
shorthand for the three
properties. Initial values
as follows:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box {
border: 1px solid #444;
padding: 10px;
margin: 10px;
flex: 1 1 200px;
min-width: 1px;
}
46. Giving the box with a
class of .box2 a flex-grow
value of 2. The other
boxes have flex-grow set
to 1.
.box2 {
flex-grow: 2;
}
47.
48. Use the order property to
change the order of flex
items.
.box1 {
order: 3;
}
.box2 {
flex-grow: 2;
order: 1;
}
.box3 {
order: 2;
}
49.
50. Resources
Solved by Flexbox: http://philipwalton.github.io/solved-by-flexbox/
CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Cheat Sheet: http://www.sketchingwithcss.com/samplechapter/
cheatsheet.html
Flexbox in 5: http://flexboxin5.com/
Useful information on supporting older browsers:
http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/
http://zomigi.com/downloads/Leveling-Up-With-Flexbox_SmashingConf_140319.pdf
55. We have floated our
image left.
.shape {
float: left;
width: 150px;
height: 150px;
margin: 20px;
}
56. Add the property shape-
outside with a value of
circle(50%).
.shape {
float: left;
width: 150px;
height: 150px;
margin: 20px;
shape-outside: circle(50%);
}
65. My HTML contains an
image along with some
text.
<div class="s-box">
<img src="noun_109069.png" alt=""
width="200" class="shape shape-image”>
<p> ... </p>
</div>
66. To use an alpha channel
pass in a URL for your
image and a threshold for
the transparency.
.shape-image {
shape-outside: url('noun_109069.png');
shape-image-threshold: 0.5;
}
67.
68. Use an image in
generated content to
shape your text.
.content:before {
content: "";
float: left;
width: 200px;
height: 200px;
shape-outside: url('alpha.png');
shape-image-threshold: 0.5;
}
69.
70. What’s next for Shapes?
• shape-inside - text flowing inside a shape
• shapes defined on elements that are not floated
• shape-padding property
• Level 2 specification http://dev.w3.org/csswg/
css-shapes-2
71. Resources
How to Get Started with CSS Shapes: http://www.webdesignerdepot.com/2015/03/
how-to-get-started-with-css-shapes/
A List Apart: http://alistapart.com/article/css-shapes-101
HTML5 Rocks: http://www.html5rocks.com/en/tutorials/shapes/getting-started/
How to prepare images using Photoshop: http://blogs.adobe.com/webplatform/
2014/03/11/add-shape-and-depth-to-your-layout-with-photoshop-and-css-shapes/
Adobe: http://webplatform.adobe.com/shapes/
74. Browser Support
All my examples work in Chrome unprefixed - you need to enable
the Experimental Web Platform Features flag.
You can also use Webkit nightlies, with the -webkit prefix.
The work in Blink and Webkit is being done by Igalia, sponsored by
Bloomberg.
IE10 and up has support for the old syntax, with an -ms prefix.
Mozilla are currently implementing Grid in Firefox.
There is a Polyfill under active development: https://github.com/
FremyCompany/css-grid-polyfill/
75. Our HTML consists of a
div with a class of
wrapper and six child
elements.
<div class="wrapper">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>
76. To create a grid we use a
new value of the display
property.
display: grid
.wrapper {
display: grid;
}
77. We describe the grid using
the new properties:
grid-template-columns
grid-template-rows
.wrapper {
display: grid;
grid-template-columns:
100px 10px 100px 10px 100px;
grid-template-rows:
auto 10px auto;
}
78. We position items using the
new properties:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
.a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
79. To position an item bottom
centre, I start at column
line 3, this is the line after
the gutter track.
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
80. To span more tracks we
just change the end row or
column line.
.b {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}
81. The longhand for line-
based placement means
up to 4 properties to
position each element. .a {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
82. Declare start and end
values with grid-column
and grid-row.
Values are separated by a
/ symbol.
.a {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.b {
grid-column: 3 / 6;
grid-row: 3 / 4;
}
85. Grid Lines
Lines can be horizontal or vertical. They
are referred to by number and can be
named.
Highlighted is Column Line 2.
86. Grid Track
A Grid Track is the space between two
Grid Lines. Tracks can be horizontal or
vertical (rows or columns).
The highlighted Grid Track is between
Row Lines 2 and 3.
87. Grid Cell
The smallest unit on our grid, a Grid Cell
is the space between four Grid Lines. It’s
just like a table cell.
The highlighted Grid Cell is between row
lines 2 and 3 and column lines 2 and 3.
88. Grid Area
Any area of the Grid bound by 4 Grid
Lines. It can contain many Grid Cells.
The highlighted Grid Area is between
row lines 1 and 3, column lines 2 and 4.
89. All examples can be found at http://gridbyexample.com. Use Chrome. Enable “Experimental Web Platform Features” flag.
92. The HTML around my
page content.
The various areas of my
page are child elements
of a div with a class of
wrapper.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
</div>
93.
94. Declaring a grid on
wrapper.
The grid has three
columns, and four rows.
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto;
}
95.
96. Positioning our elements
using the grid-column and
grid-row shorthand.
This is all we need to do
to create our layout.
.mainheader {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.panel {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.content {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
97.
98.
99. I can add a footer to this
layout.
<div class="wrapper">
<header class="mainheader"></header>
<div class="panel"></div>
<div class="content"></div>
<footer class="mainfooter"></footer>
</div>
102. Our grid only has 5 row
lines specified - yet we
placed an item between
row lines 5 and 6.
Grid creates an implicit
grid line for us.
.wrapper {
display: grid;
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto;
}
.mainfooter {
grid-column: 1 / 4;
grid-row: 5 / 6;
}
103. Grid lines can be explicit or implicit
• Explicit grid lines are those specified using grid-
template-rows or grid-template-columns.
• Implicit lines are created when you place
something into a row or column track outside of
the explicit grid.
• Default behaviour is those tracks are auto sized.
You can specify a size with the grid-auto-
columns and grid-auto-rows properties.
104. Grid is “table like” however …
• Unlike a table for layout Grid does not rely on
your content being a particular order in the
source.
• Being entirely described in CSS we can move
things around the Grid at different breakpoints,
introduce or redefine a Grid for any breakpoint.
105. Using Grid to order the
page elements in a single
column for narrow screen
widths.
.wrapper {
display: grid;
grid-template-rows:
10px auto 10px auto 10px auto 10px auto;
}
.mainheader {
grid-row: 2 / 3;
}
.content {
grid-row: 4 / 5;
}
.panel {
grid-row: 6 / 7;
}
.mainfooter {
grid-row: 8 / 9;
}
106.
107. Redefine the Grid at min-
width 550 pixels.
Position items as in the
earlier example.
@media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows: 40px auto 20px auto 20px auto;
}
.mainheader {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.panel {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.content {
grid-column: 3 / 4;
grid-row: 4 / 5;
}
.mainfooter {
grid-column: 1 / 4;
grid-row: 6 / 7;
}
}
110. We assign a name to the
elements on our page.
I am doing this outside of
any Media Queries.
.mainheader {
grid-area: header;
}
.content {
grid-area: content;
}
.panel {
grid-area: sidebar;
}
.mainfooter {
grid-area: footer;
}
111. Describe the layout on
the parent element using
the grid-template-areas
property.
A period “.” indicates that
this grid cell is empty.
.wrapper {
display: grid;
grid-template-rows:
10px auto 10px auto 10px auto 10px auto;
grid-template-areas:
"."
"header"
"."
"content"
"."
"sidebar"
"."
"footer";
}
112.
113.
114. Redefining the template
areas for the wider
layout. @media (min-width: 550px) {
.wrapper {
grid-template-columns: 30% 5% 65%;
grid-template-rows:
2em auto 1em auto 1em auto;
grid-template-areas:
". . ."
"header header header"
". . ."
"sidebar . content"
". . ."
"footer footer footer"
}
}
115.
116.
117. Resources
Grid by Example: http://gridbyexample.com
Examples from Igalia: http://igalia.github.io/css-grid-layout/
An article covering the original IE10 implementation: http://24ways.org/2012/css3-
grid-layout/
122. I have an article with an
image as the last child in
the source.
The image has a class of
exclusion.
<article>
<p> ... </p>
<img src="balloons3.jpg" alt="Hot air
balloons" class="exclusion" />
</article>
123. The article has been given
position relative to create
a positioning context.
I have then positioned the
image using absolute
positioning.
.main {
position:relative;
}
.exclusion {
position: absolute;
top: 14em;
left: 14em;
width: 320px;
}
124.
125. The wrap-flow property
means that the text will
respect the positioned
element and wrap round
both sides.
I’m using the -ms prefix
given this is only
implemented in IE
browsers.
.main {
position:relative;
}
.exclusion {
position: absolute;
top: 14em;
left: 14em;
width: 320px;
-ms-wrap-flow: both;
}
130. Regions were in the Blink engine but
removed in January 2014. They are
still part of Safari desktop and iOS.
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/YrnfLxeMO7IJ
131. I have an article contained
inside an article element.
Below that is a set of
empty elements, each
with a class of article-
regions.
<article class="main content”>
<p> ... </p>
</article>
<div class="region1 article-regions"></div>
<div class="regionwrapper">
<div class="region2 article-regions"></div>
<div class="region3 article-regions"></div>
<div class="region4 article-regions"></div>
</div>
<div class="region5 article-regions"></div>
132.
133. We flow the content of
our article into ‘article-
thread’. This is a name we
have given the content.
We then flow the content
into .article-regions - this
is the class we gave our
empty elements.
.main {
flow-into: article-thread;
}
.article-regions {
flow-from: article-thread;
}
136. Resources
An Introduction to CSS Regions: https://dev.opera.com/articles/introduction-to-css-
regions/
Use CSS Regions to flow content through a layout: https://docs.webplatform.org/wiki/
tutorials/css-regions
Say Hello to CSS Regions Polyfill: http://corlan.org/2013/02/08/say-hello-to-css-
regions-polyfill/
Introducing CSS Regions: http://www.webdesignerdepot.com/2013/09/introducing-
css-regions/