The document discusses the new CSS layout capabilities of Flexbox and CSS Grid Layout. It provides examples of how Flexbox can be used to create responsive and flexible layouts with precise control of alignment both horizontally and vertically. It also shows how CSS Grid Layout allows for true separation of document structure from visual layout, and enables full control over alignment and automatic placement of items. The document argues these new techniques provide a modern system for building layouts in a way that is responsive and flexible by default.
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#).
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.
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XpressEngine
XE 오픈 세미나 - 2014-06-28
XE 레이아웃 제작 노하우 - 고진화
이 발표자료 내용은 오프라인 강의 때 구체적인 설명을 위한 키포인트 정도로 작성된 것이니 자세한 설명이나 궁금하신 사항은 고진화 강사님에게(http://cameron.co.kr) 문의하시기 바랍니다.
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#).
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.
XE 오픈 세미나(2014-06-28) - (1/3) 레이아웃 제작 기본XpressEngine
XE 오픈 세미나 - 2014-06-28
XE 레이아웃 제작 노하우 - 고진화
이 발표자료 내용은 오프라인 강의 때 구체적인 설명을 위한 키포인트 정도로 작성된 것이니 자세한 설명이나 궁금하신 사항은 고진화 강사님에게(http://cameron.co.kr) 문의하시기 바랍니다.
Leveraging Social Media To Raise Funds for Nonprofit OrganizationsAbila
The third session in the Web-wise series, you will learn to understand the recent explosion of social media and its application to nonprofit organizations, presented by Dan Gonzalez, Web Manager, Sage Nonprofit Solutions.
EDI-решения для логистики от компании "Э-КОМ"E-COM UA
GLN (Global Location Number) - обеспечивают технологическое решение для
глобальной цепи поставки по идентификации физических мест нахождения и
юридических лиц, а также их структурных единиц – офисов/ магазинов/складов отгрузки/распределительных центров и т.д.
GTIN (Global Trade Identity Number, раньше EAN) – международный код маркировки и учёта товара.
Серийный код транспортной упаковки - SSCC (Serial Shipping Container Code) предназначен для уникальной идентификации логистической упаковки. Он содержит ссылку на подробную информацию о грузе, хранимую в базе данных EDI.
PARTIN - Party Information
PRICAT - Price/Sales Catalogue
PROINQ - Product Inquiry
PRODAT - Product Data
CNCCND - Contractual Conditions
COACSU - Commercial Account Summary
COMDIS - Commercial Dispute
DESADV - Dispatch Advice
HANMOV - Cargo/Goods Handling and Movement
IFCSUM - Forwarding and Consolidation Summary
IFTMAN - Arrival Notice
IFTMBC - Booking Confirmation
IFTMBF - Firm Booking
IFTMIN - Transport Instruction
IFTSTA - Transport Status
INSDES - Instruction to Dispatch
INVOIC – Invoice
ORDCHG - Purchase Order Change Request
ORDERS - Purchase Order
ORDRSP - Purchase Order Response
OSTENQ - Order Status Enquiry
OSTRPT - Order Status Report
PAYMUL - Multiple Payment Order
QUOTES – Quotation
RECADV - Receiving Advice
REMADV - Remittance Advice
REQOTE - Request for Quotations
RETANN - Announcement for Returns
Don't Leave Your Facilities Needs to Chance: From Game Plan to Master PlanSightlines
This presentation explores what facilities leaders can do when rolling the dice doesn't work regarding the management of deferred maintenance. You'll also learn how to:
- Maximize the value of a deferred maintenance assessment
- Integrate deferred maintenance data with a master plan
- Optimize institutional resources to mitigate risk
- Be a partner in program success rather than a follower
The Opposite of Transportation Livability is KillabilityAndy Boenau
Livability is a concept that has enjoyed tremendous popularity in recent years. The Federal Highway Administration established a formal “Livability Initiative” and in 2010, published a guidebook to educate transportation planning and design professionals.
But even with the enormous amount of data showing direct and tangible connections between street design and public health and safety (i.e. livability), bad design continues to show itself on a regular basis on our street networks.
If good design promotes livability, then bad design must promote the opposite of livability…killability.
City streets are intended for people of all ages and physical abilities. Let's design livable streets. Let's *reclaim* our streets!
This presentation was originally given in a Pecha Kucha (20x20) format during the 2013 American Planning Association national conference.
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.
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.
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.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
# Internet Security: Safeguarding Your Digital World
In the contemporary digital age, the internet is a cornerstone of our daily lives. It connects us to vast amounts of information, provides platforms for communication, enables commerce, and offers endless entertainment. However, with these conveniences come significant security challenges. Internet security is essential to protect our digital identities, sensitive data, and overall online experience. This comprehensive guide explores the multifaceted world of internet security, providing insights into its importance, common threats, and effective strategies to safeguard your digital world.
## Understanding Internet Security
Internet security encompasses the measures and protocols used to protect information, devices, and networks from unauthorized access, attacks, and damage. It involves a wide range of practices designed to safeguard data confidentiality, integrity, and availability. Effective internet security is crucial for individuals, businesses, and governments alike, as cyber threats continue to evolve in complexity and scale.
### Key Components of Internet Security
1. **Confidentiality**: Ensuring that information is accessible only to those authorized to access it.
2. **Integrity**: Protecting information from being altered or tampered with by unauthorized parties.
3. **Availability**: Ensuring that authorized users have reliable access to information and resources when needed.
## Common Internet Security Threats
Cyber threats are numerous and constantly evolving. Understanding these threats is the first step in protecting against them. Some of the most common internet security threats include:
### Malware
Malware, or malicious software, is designed to harm, exploit, or otherwise compromise a device, network, or service. Common types of malware include:
- **Viruses**: Programs that attach themselves to legitimate software and replicate, spreading to other programs and files.
- **Worms**: Standalone malware that replicates itself to spread to other computers.
- **Trojan Horses**: Malicious software disguised as legitimate software.
- **Ransomware**: Malware that encrypts a user's files and demands a ransom for the decryption key.
- **Spyware**: Software that secretly monitors and collects user information.
### Phishing
Phishing is a social engineering attack that aims to steal sensitive information such as usernames, passwords, and credit card details. Attackers often masquerade as trusted entities in email or other communication channels, tricking victims into providing their information.
### Man-in-the-Middle (MitM) Attacks
MitM attacks occur when an attacker intercepts and potentially alters communication between two parties without their knowledge. This can lead to the unauthorized acquisition of sensitive information.
### Denial-of-Service (DoS) and Distributed Denial-of-Service (DDoS) Attacks
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
1. Making Sense
of the new CSS
Layout
Rachel Andrew, Fluent 2016
https://www.flickr.com/photos/nossreh/5510993121/
2. Rachel Andrew
Blogging about tech/business and other things at rachelandrew.co.uk
On Twitter and other places as @rachelandrew
Co-founder of Perch & Perch Runway CMS, see: grabaperch.com
Teaching CSS Layout at thecssworkshop.com
Google Developer Expert for Web Technologies
Contact: me@rachelandrew.co.uk
5. 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 maths.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
6. Our great hopes for layout
• Flexbox
https://drafts.csswg.org/css-flexbox/
• CSS Grid Layout
https://drafts.csswg.org/css-grid/
• Box Alignment
https://drafts.csswg.org/css-align/
7. The new CSS for Layout
• Items in our layouts understand themselves as
part of an overall layout.
• True separation of document source order and
visual display.
• Precise control of alignment - horizontally and
vertically.
• Responsive and flexible by default.
8. Items in our layouts understand
themselves as part of a complete layout.
14. Flexbox
The flex-direction property
can take a value of row to
display things as a row or
column to display them as
a column.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row;
}
15. Flexbox
The visual order can be
switched using row-
reverse or column-reverse.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
16. Flexbox
Adding display: flex to our
container element causes
the items to display flexibly
in a row.
.wrapper {
display: flex;
}
17. Flexbox
The order property means
we can change the order of
flex items using CSS.
This does not change their
source order.
li:nth-child(1) {
order: 3;
}
li:nth-child(2) {
order: 1;
}
li:nth-child(3) {
order: 4;
}
li:nth-child(4) {
order: 2;
}
18. Grid Layout
I have created a grid on
my wrapper element.
The grid has 3 equal
width columns.
Rows will be created as
required as we position
items into them.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
19. Grid Layout
I am positioning my
elements using CSS Grid
Layout line-based
positioning.
Setting a column and a
row line using the grid-
column and grid-row
properties.
li:nth-child(1) {
grid-column: 3 / 4 ;
grid-row: 2 / 3;
}
li:nth-child(2) {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
li:nth-child(3) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
li:nth-child(4) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
23. Grid Layout
When using automatic
placement we can create
rules for items in our
document - for example
displaying portrait and
landscape images
differently.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}
.landscape {
grid-column-end: span 2;
}
24. grid-auto-flow
The default value of grid-auto-flow is
sparse. Grid will move forward planning
items skipping cells if items do not fit .
25. Grid Layout
With a dense packing
mode grid will move items
out of source order to
backfill spaces.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}
.landscape {
grid-column-end: span 2;
}
27. Power and responsibility
• Good = creating the most accessible source
order and using Grid or Flexbox to get the
optimal display for each device.
• Bad = using Grid or Flexbox as an excuse to
forget about the source.
• Terrible - stripping out semantic elements to
make everything a grid or flex item.
30. CSS Box Alignment Module Level 3
“This module contains the features of CSS relating to the
alignment of boxes within their containers in the various CSS box
layout models: block layout, table layout, flex layout, and grid
layout.” - https://drafts.csswg.org/css-align/
33. Flexbox
The justify-content
property is set to space-
between.
The items at each end are
placed against the
container and the
remaining space
distributed evenly.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row;
}
34. Flexbox
The justify-content
property is set to space-
around.
The items are evenly
distributed in the container
with a half size space at
each end.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
}
35. Default alignment
Used by the justify-items and align-items properties.
The align-items and justify-items properties set the default align-
self and justify-self behavior of the items contained by the
element.
36. Flexbox
The value of align-items is
stretch by default.
If I add extra text in one
navigation point the others
all take the same height.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: stretch;
}
37. Flexbox
If I set the value of align-
items to center then we
get vertical centring.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
38. Flexbox
If flex-direction is column
and I set the value of align-
items to center then we
get horizontal centring.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
39. Self alignment
justify-self and align-self properties.
The justify-self and align-self properties control alignment of the
box within its containing block.
40. Flexbox
You can use the align-self
and justify-self properties
to target individual flex
items.
In this example I have set
the group to centre, but
the third item to stretch.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
nav li:nth-child(3) {
align-self: stretch;
}
51. Flexbox
The most simple flexbox
example demonstrates
the inherent flexibility.
The items will be
displayed as a row, with
equal space between each
item.
nav ul{
display: flex;
justify-content: space-between;
}
52. The flex property
• flex-grow - add space
• flex-shrink - remove space
• flex-basis - the initial size before any growing or
shrinking
54. Flexbox
flex: 1 1 200px;
flex-grow: 1
flex-shrink: 1;
flex-basis: 200px;
The initial width of our
box is 200 pixels,
however it can grow
larger and shrink smaller
than 200 pixels.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
55.
56. Flexbox
flex: 1 1 200px;
flex-grow: 1
flex-shrink: 1;
flex-basis: 200px;
If we allow the flex items
to wrap we can see how
flex-basis works by
dragging the window
smaller.
.boxes {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
57.
58. Flexbox
flex: 0 1 200px;
flex-grow: 0
flex-shrink: 1;
flex-basis: 200px;
The initial width of our
box is 200 pixels, it can
shrink smaller than 200
pixels but may not get
larger.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 0 1 200px;
min-width: 1px;
}
59.
60. Flexbox
flex: 1 1 200px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
.box3 has been set to
flex: 0 1 200px;
so cannot grow.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
.box3 {
flex: 0 1 200px;
}
61.
62. Flexbox
If we set box3 to
flex-grow: 2
This box will be assigned
twice of much of the
available free space after
we have reached the 200
pixel initial width.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
.box3 {
2 1 200px;
}
66. Grid Layout
I am creating three grid
column tracks, all 1fr in
width.
This gives me three equally
sized column tracks.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
67. Grid Layout
If I create the first column
as 600 pixels and then
have two 1fr columns the
600 pixel track is removed
from the available space
and the remainder is
distributed equally
between the two columns.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 1fr;
}
68. Grid Layout
With a 600 pixel column, a
1fr and a 3fr column. The
600 pixels is removed from
the available space then
the remaining space is
divided by 4.
The 1fr column gets 25%
and the 3fr column 75%.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 3fr;
}
80. Browser Support for Grid Layout
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.
Grid is on the Edge backlog, marked as High Priority.
Mozilla are currently implementing Grid in Firefox. Some examples
work in Firefox Nightlies.
There is a Polyfill under active development: https://github.com/
FremyCompany/css-grid-polyfill/
82. Thank you
Slides, Resources and code examples:
https://rachelandrew.co.uk/presentations/modern-css-layout
http://csslayout.news - sign up for my weekly CSS Layout email
—
@rachelandrew
me@rachelandrew.co.uk
—
https://rachelandrew.co.uk
https://grabaperch.com