An introduction to the 960 grid system

•Als KEY, PDF herunterladen•

1 gefällt mir•1,809 views

The 960 Grid System is a framework for streamlining web development workflow that is based around a 960 pixel width. It provides commonly used column dimensions of 12 or 16 columns that can be used separately or together. Some benefits include rapid development, clean grid structure, and easy creation of complex layouts. However, it also has limitations such as being restricted to the 960 pixel width. The document discusses the history and features of the 960 Grid System framework.

Technologie

960 Grid System
An introduction

by Mario Hernandez

About
• Web developer for the federal government
• Freelancer with over 10 years experience in
web design
• Front-end designer
• Main platform: Drupal
• Founder of DesignsDrive.com

How far has css come?
• CSS is more powerful than ever
• CSS3 & HTML5
• JQuery and Javascript

What is 960 Grid System?
• The 960 Grid System is an effort to streamline web
development workﬂow by providing commonly used
dimensions, based on a width of 960 pixels.
• Created by Nathan Smith (http://sonspring.com/about)
• There are two variants: 12 and 16 columns, which can
be used separately or in tandem.
• Get it at http://960.gs

Three things:
• You should have a good understanding of css
• This framework will not solve all your
problems
• The grid is not for all websites (newspaper/
magazine style)

Pros
• Rapid development
• Clean grid structure
• Cross browser compatibility - web standards
• Light weight code (~20kb)
• Build complicated layouts easily

Cons
• You are limited to a 960 width
• As with any framework, you lose some
ﬂexibility
• It’s not your own code

The true power of 960 is demonstrated when building
complex newspaper-like layouts.

css classes: grid_x
12

1 11

2 10

3 9

4 8

5 7

6 6

7 5

css classes now in session
• alpha (ﬁrst child grid within a grid)
• omega (last child grid within a grid)
• preﬁx_x (to apply empty space before)
• sufﬁx_x (to apply empty space after)
• pull_x (to horizontally reposition content)
• push_x (to horizontally reposition content)

Other options
• http://www.blueprintcss.org/
• http://www.thegridsystem.org/

Questions?
• web: http://designsdrive.com
• email: designsdrive@gmail.com
• twitter: @designsdrive

Weitere ähnliche Inhalte

Ähnlich wie An introduction to the 960 grid system

CSS3 for web designer - How to design a visually appealing website

Mario Hernandez

Drupal 960 grid system based theming

Gaurav Mishra

Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)

Four Kitchens

Accelerated grid theming using NineSixty (DrupalCamp Dallas)

Four Kitchens

Accelerated Grid Theming

Nathan Smith

CSS Framework + Progressive Enhacements

Mario Hernandez

CSS frameworks allow developers to quickly prototype table-less CSS layouts using pre-made solutions to common problems. This presentation reviews some of the major CSS frameworks and how they can be used to save time and effort in the website development workflow. The discussion will touch on grid design with 960gs, table-less forms with Formy and resetting browser default CSS with YUI, among other topics.

CSS Frameworks: Faster Layout, Consistent Results

Steve Hong

BDUG Responsive Web Theming - 7/23/12

ucbdrupal

An Introduction to CSS Frameworks

Adrian Westlake

Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)

Four Kitchens

CSS Grid Systems

Leonardo Ortega

Why are we using Sass to create Grid Frameworks?

sharjeet

Drupal 7 ninja theming

Claudio Beatrice

CSS Frameworks

Mario Hernandez

Web I - 07 - CSS Frameworks

Randy Connolly

Intro to CSS3

Denise Jacobs

CSS3: Ripe and Ready to Respond

Denise Jacobs

Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease. Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration. Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Acquia

Simply Responsive CSS3

Denise Jacobs

Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)

Four Kitchens

Ähnlich wie An introduction to the 960 grid system (20)

CSS3 for web designer - How to design a visually appealing website

Drupal 960 grid system based theming

Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)

Accelerated grid theming using NineSixty (DrupalCamp Dallas)

Accelerated Grid Theming

CSS Framework + Progressive Enhacements

CSS Frameworks: Faster Layout, Consistent Results

BDUG Responsive Web Theming - 7/23/12

An Introduction to CSS Frameworks

Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)

CSS Grid Systems

Why are we using Sass to create Grid Frameworks?

Drupal 7 ninja theming

CSS Frameworks

Web I - 07 - CSS Frameworks

Intro to CSS3

CSS3: Ripe and Ready to Respond

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

Simply Responsive CSS3

Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)

Mehr von Mario Hernandez

Responsive images in Drupal 8

Mario Hernandez

Component-driven Drupal Theming

Mario Hernandez

Responsive design with flexbox

Mario Hernandez

Building your first d8 theme

Mario Hernandez

HTML5 and CSS3

Mario Hernandez

Introduction to drupal

Mario Hernandez

Rapid wireframing and prototyping

Mario Hernandez

Introduction to HTML and CSS

Mario Hernandez

Responsive Web Design

Mario Hernandez

Introduction to Drupal Content Management System

Mario Hernandez

Front end-design and best practices

Mario Hernandez

Mehr von Mario Hernandez (11)

Responsive images in Drupal 8

Component-driven Drupal Theming

Responsive design with flexbox

Building your first d8 theme

HTML5 and CSS3

Introduction to drupal

Rapid wireframing and prototyping

Introduction to HTML and CSS

Responsive Web Design

Introduction to Drupal Content Management System

Front end-design and best practices

Kürzlich hochgeladen

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Advantages of Hiring UIUX Design Service Providers for Your Business

Pixlogix Infotech

Histor y of HAM Radio presentation slide

vu2urc

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

🐬 The future of MySQL is Postgres 🐘

RTylerCroy

What is a good lead in your organisation? Which leads are priority? What happens to leads? When sales and marketing give different answers to these questions, or perhaps aren't sure of the answers at all, frustrations build and opportunities are left on the table. Join us for an illuminating session with Cian McLoughlin, HubSpot Principal Customer Success Manager, as we look at that crucial piece of the customer journey in which leads are transferred from marketing to sales.

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

HampshireHUG

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

Kürzlich hochgeladen (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Exploring the Future Potential of AI-Enabled Smartphone Processors

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

How to Troubleshoot Apps for the Modern Connected Worker

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Boost Fertility New Invention Ups Success Rates.pdf

Advantages of Hiring UIUX Design Service Providers for Your Business

Histor y of HAM Radio presentation slide

GenCyber Cyber Security Day Presentation

Driving Behavioral Change for Information Management through Data-Driven Gree...

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Tata AIG General Insurance Company - Insurer Innovation Award 2024

🐬 The future of MySQL is Postgres 🐘

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

A Domino Admins Adventures (Engage 2024)

What Are The Drone Anti-jamming Systems Technology?

Boost PC performance: How more available memory can improve productivity

An introduction to the 960 grid system

1. 960 Grid System An introduction by Mario Hernandez

2. About • Web developer for the federal government • Freelancer with over 10 years experience in web design • Front-end designer • Main platform: Drupal • Founder of DesignsDrive.com

3. How far has css come? • CSS is more powerful than ever • CSS3 & HTML5 • JQuery and Javascript

4. What is 960 Grid System? • The 960 Grid System is an effort to streamline web development workﬂow by providing commonly used dimensions, based on a width of 960 pixels. • Created by Nathan Smith (http://sonspring.com/about) • There are two variants: 12 and 16 columns, which can be used separately or in tandem. • Get it at http://960.gs

5. Three things: • You should have a good understanding of css • This framework will not solve all your problems • The grid is not for all websites (newspaper/ magazine style)

6. Pros • Rapid development • Clean grid structure • Cross browser compatibility - web standards • Light weight code (~20kb) • Build complicated layouts easily

7. Cons • You are limited to a 960 width • As with any framework, you lose some ﬂexibility • It’s not your own code

8. The true power of 960 is demonstrated when building complex newspaper-like layouts.

10.

11. css classes: grid_x 12 1 11 2 10 3 9 4 8 5 7 6 6 7 5

12. css classes now in session • alpha (first child grid within a grid) • omega (last child grid within a grid) • prefix_x (to apply empty space before) • suffix_x (to apply empty space after) • pull_x (to horizontally reposition content) • push_x (to horizontally reposition content)

13.

14.

15. Let’s get started Download & demo

16.

17. Other options • http://www.blueprintcss.org/ • http://www.thegridsystem.org/

18. Questions? • web: http://designsdrive.com • email: designsdrive@gmail.com • twitter: @designsdrive

An introduction to the 960 grid system

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie An introduction to the 960 grid system

Ähnlich wie An introduction to the 960 grid system (20)

Mehr von Mario Hernandez

Mehr von Mario Hernandez (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

An introduction to the 960 grid system

Hinweis der Redaktion