The document summarizes key concepts the author learned about CSS Grid layout. Some key points include:
- CSS Grid handles box alignment and positioning in a logical way based on writing direction rather than physical positioning.
- The display property controls how elements generate boxes and formatting contexts for child elements. Grid items are always blockified.
- Features like subgrid, display: contents, and logical properties give more control over layout.
- Understanding how CSS Grid handles boxes and positioning provides tools to build flexible and accessible layouts.
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.
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.
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 Layout in 2016 is a mess of hacked together methods using techniques that were never designed for complex web and application layout. However change is in the air, brought to us by specifications such as CSS Grid Layout, Flexbox, and the Box Alignment Module. In this session Rachel will introduce these specifications, explaining how they fit together to create a new system for layout.
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.
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 Layout in 2016 is a mess of hacked together methods using techniques that were never designed for complex web and application layout. However change is in the air, brought to us by specifications such as CSS Grid Layout, Flexbox, and the Box Alignment Module. In this session Rachel will introduce these specifications, explaining how they fit together to create a new system for layout.
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.
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
viajamos para o futuro com o novo módulo de CSS que nos permite criar Grids de forma nativa! Nada de bibliotecas ou frameworks aqui. Criaremos nossas interfaces apenas com o bom e velho CSS, só que dessa vez, com novos superpoderes incríveis.
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?
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
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.
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.
9. CSS Display: https://drafts.csswg.org/css-display/
▸ The Outer Display Type - how does this box behave in relationship to its
parent?
▸ The Inner Display Type - what formatting context does it create for its child
elements?
16. https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
“Any table element will automatically generate
necessary anonymous table objects around itself,
consisting of at least three nested objects
corresponding to a 'table'/'inline-table' element, a
'table-row' element, and a 'table-cell' element.”
17. CSS Grid: https://www.w3.org/TR/css-grid-1/#grid-item-display
“Note: Some values of display normally trigger the
creation of anonymous boxes around the original
box. If such a box is a grid item, it is blockified first,
and so anonymous box creation will not happen.
For example, two contiguous grid
items with display: table-cell will become two
separate display: block grid items, instead of being
wrapped into a single anonymous table.”
20. Creating fallbacks
▸ You do not need to write two sets of code
▸ Write your fallback code and then write your grid code
▸ In many cases the spec has you covered
▸ Use Feature Queries to isolate things that would apply to both grid-supporting
and non-supporting browsers
24. .grid {
display: grid;
max-width: 960px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
CSS Grid
Creating a three column layout with
CSS Grid.
https://codepen.io/rachelandrew/pen/XgdydE
25.
26. .card {
display: flex;
flex-direction: column;
}
.card .inner {
flex: 1;
}
Make the card a flex item
Allow the inner to grow, it pushes the
footer down to the bottom of the
card.s
https://codepen.io/rachelandrew/pen/XgdydE
29. .card {
border: 4px solid rgb(24,154,153);
background-color: #fff;
grid-row: auto / span 4;
display: subgrid;
}
display: subgrid
The card is a direct child of the grid
so needs to span four rows of the grid
to make room for the four rows in the
subgridded internals.
display: subgrid means the card now
uses the tracks of the parent grid.
33. display: contents https://drafts.csswg.org/css-display/#box-generation
“The element itself does not generate any boxes,
but its children and pseudo-elements still
generate boxes as normal. For the purposes of
box generation and layout, the element must be
treated as if it had been replaced in the element
tree by its contents”
39. .card {
border: 4px solid rgb(24,154,153);
background-color: #fff;
display: contents;
}
display: contents
We add this to the direct child of the
grid container.
https://codepen.io/rachelandrew/pen/QgNJYa
42. .card {
border: 4px solid rgb(24,154,153);
background-color: #fff;
grid-row: auto / span 4;
display: contents;
}
Make room for the rows
Each card needs four rows.
45. display: contents
▸ Use when the element you are removing has no box styling (e.g. backgrounds
and borders) attached
▸ Current browser support Firefox, Chrome Canary
47. /* this shorthand */
.a {
grid-area: 1 / 2 / 2 / 5;
}
/* is the same as this */
.a {
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 2;
grid-column-end: 5;
}
The order of values in grid-area
•row-start
•column-start
•row-end
•column-end
50. CSS Logical Properties
“This module introduces logical properties and
values that provide the author with the ability to
control layout through logical, rather than physical,
direction and dimension mappings. The module
defines logical properties and values for the
features defined in CSS2.1. These properties are
writing-mode relative equivalents of their
corresponding physical properties.”
51. Logical not Physical
▸ The start of a page rather than the top
▸ The end of a block rather than the right
▸ In grid layout we have start and end for both columns and rows, rather than
referring to the top and bottom of columns and left and right of rows
64. .grid {
display: grid;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[main-start] minmax(0, 660px)
[main-end] minmax(1em, 1fr)
[full-end];
}
.grid > * {
grid-column: main-start;
}
.grid > .gallery {
grid-column: full-start / full-end;
}
Naming lines on the grid
We can now position the items using
their line names.
https://codepen.io/rachelandrew/pen/EXjrJM
71. .grid {
display: grid;
grid-gap: 20px;
grid-template-columns:
100px [main-start]
100px 100px 100px [main-end]
100px 100px;
grid-template-rows:
100px [main-start]
100px 100px [main-end] 100px;
}
.item {
grid-area: main;
}
Implicit named areas
Created by having named lines using
an ident with *-start and *-end.
https://codepen.io/rachelandrew/pen/EXNmvj
72. .grid {
display: grid;
grid-template-columns: [full-start]
minmax(1em, 1fr)
[main-start] minmax(0, 660px) [main-
end]
minmax(1em, 1fr) [full-end];
grid-template-rows: auto auto [full-
start] auto [full-end];
}
.grid > * {
grid-column: main-start;
}
.grid > .gallery {
grid-area: full;
}
Magic named area
We have defined lines named full-
start and full-end for rows and
columns so we have an area named
full.
https://codepen.io/rachelandrew/pen/jwPjWK
73. https://www.w3.org/TR/css-grid-1/#line-placement
“Note: Named grid areas automatically generate
implicit named lines of this form, so specifying
grid-row-start: foo will choose the start edge of
that named grid area (unless another line named
foo-start was explicitly specified before it).”
74. Named lines create a named area
which in turn can be used as
named lines.
77. grid-column: main / main;
grid-column: full / full;
full-start main-start main-end full-end
grid-column: main / main;
full fullmain main
78. .grid {
display: grid;
max-width: 960px;
margin: 0 auto;
grid-template-columns: [full-start]
minmax(1em, 1fr)
[main-start] minmax(0, 660px) [main-end]
minmax(1em, 1fr) [full-end];
}
.grid > * {
grid-column: main;
}
.grid > .gallery {
grid-column: full;
}
Targeting the column track
The line name ‘main’ is created from
the named area created by our
named lines.
https://codepen.io/rachelandrew/pen/owXKMd
81. .grid {
display: grid;
grid-template-columns: minmax(1em,
1fr) minmax(0, 660px) minmax(1em, 1fr);
grid-template-areas:
". title ."
". content-top ."
"full-width full-width full-width"
". content-bottom ."
}
h1 { grid-area: title; }
.content1 { grid-area: content-top; }
.content2 { grid-area: content-bottom; }
.gallery { grid-area: full-width; }
Magic Grid Lines
If you have a named area you get grid
lines named *-start and *-end for rows
and columns.
https://codepen.io/rachelandrew/pen/qjdzwR
82.
83. .grid {
display: grid;
grid-template-columns: minmax(1em,
1fr) minmax(0, 660px) minmax(1em, 1fr);
grid-template-areas:
". title ."
". content-top ."
"full-width full-width full-width"
". content-bottom ."
}
h1 { grid-area: title; }
.content1 { grid-area: content-top; }
.content2 { grid-area: content-bottom; }
.gallery { grid-area: full-width; }
Magic Grid Lines
Each grid-area creates a set of lines
for the start and end of the area -
rows and columns.
For title, we have title-start and title-
end for rows and columns.
https://codepen.io/rachelandrew/pen/qjdzwR
91. Find out more
I made you some resources
Visit Grid by Example for worked examples, patterns with
fallbacks, and a free video tutorial:
gridbyexample.com
I created a huge set of guides for MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Grid_Layout
Over 4 years of grid thoughts on my site at:
https://rachelandrew.co.uk/archives/tag/cssgrid
CSS Grid AMA:
https://github.com/rachelandrew/cssgrid-ama