快速入门Foundation框架

需积分: 10 179 浏览量更新于2024-07-21 收藏 6.4MB PDF 举报

"Jump Start Foundation" 是一本由SitePoint出版，由Syed Fazle Rahman和Joe Hewitson编写的图书，旨在帮助读者在短时间内快速掌握使用Foundation框架构建响应式Web应用的技能。Foundation是由Zurb开发的流行CSS框架，它简化了响应式网页设计的流程，是首个响应式的开源前端框架，也是首个采用移动优先设计理念的框架。书中涵盖了以下几个关键知识点： 1. **Building a Foundation**：这部分可能讲解了如何初始化和设置Foundation项目，包括安装必要的工具和库，以及理解Foundation的基本结构和组件。 2. **Getting Started With Foundation's Grid System**：Foundation的网格系统是其核心功能之一，用于创建灵活的布局。这部分可能会详细介绍网格系统的原理、使用方法，以及如何创建不同列数的布局。 3. **Laying Out a Prototype**：这部分将指导读者如何利用Foundation构建网站原型，可能包含创建导航、页脚、头部等常见页面元素的方法，以及如何调整布局以适应不同屏幕尺寸。 4. **Content Is King**：强调内容的重要性，可能涵盖如何优化内容以提高用户体验，以及如何使用Foundation的组件来增强内容的表现力。 5. **Handling Media**：处理媒体内容是现代Web设计的关键。这部分可能会讨论如何使用Foundation的媒体查询和响应式图片策略，以确保多媒体在不同设备上的适配和表现。 6. **Working With Forms**：Foundation提供了强大的表单组件。这部分会讲述如何创建和定制表单，包括输入验证、按钮样式、表单布局等。 7. **Customizing Foundation Using Sass**：Sass是预处理器，可以增强CSS的功能。这部分将介绍如何通过Sass自定义Foundation的主题，包括变量、嵌套规则和混入，以满足个性化需求。除此之外，书籍还可能包含前言、技术审阅者的信息，以及版权声明等内容。这本书以一种快速学习的方式，旨在让读者在周末内就能掌握Foundation的基础，并开始构建自己的响应式网站。通过阅读此书，读者能够了解并熟练运用Foundation框架，提升其在Web设计和开发中的效率。

Tips, Notes, and Warnings

Hey, You!

Tips will give you helpful little pointers.

Ahem, Excuse Me …

Notes are useful asides that are related—but not critical—to the topic at hand.

Think of them as extra tidbits of information.

Make Sure You Always …

… pay attention to these important points.

Watch Out!

Warnings will highlight any gotchas that are likely to trip you up along the way.

Supplementary Materials

http://www.sitepoint.com/store/jump-start-foundation/

The book's website, containing links, updates, resources, and more.

https://github.com/spbooks/jsfoundation1

The downloadable code archive for this book.

http://community.sitepoint.com/c/html-css

SitePoint's forums, for help on any tricky web problems.

books@sitepoint.com

Our email address, should you need to contact us for support, to report a prob-

lem, or for any other reason.

Want to take your learning further?

Thanks for choosing to buy a SitePoint book. Would you like to continue learning?

You can now gain unlimited access to ALL SitePoint books and courses, plus high-

www.it-ebooks.info

Introduction to CSS Frameworks

If you’ve never used a software framework before, it might be beneficial to think

of it in the construction sense. When building a house, one of the first steps of actual

construction is the development of the frame. Built out of any number of basic ele-

ments, it serves as a unified structure supporting the rest of the house. Without it,

you’d have nothing to hinge your doors on or place your walls against. Similarly,

a CSS framework provides a styling structure from which you can more easily build

your web projects.

I know this all sounds well and good for a general contractor, but how can it help

you build a better web project? CSS frameworks grant you the ability to develop

web projects quickly using predeveloped CSS components. There’s no need to rein-

vent the wheel every time you start a new project. To use most of these components,

you simply write down the required HTML markup and you’re done. It makes it

easier to create a basic web user interface prototype without having to write down

many CSS or JavaScript codes.

I’ll give you a quick example of how CSS frameworks work in practice. When creating

a new web project without the aid of a CSS framework, until stylesheets are created

to define even the simplest of elements, your resulting pages will look little better

than if they were created with a typewriter. When the time comes to begin styling,

every facet of the page structure must be considered and styled appropri-

ately―everything from the most basic paragraphs to fully customized div containers.

Not only do these basic styles need to be developed from scratch, but also more

advanced components such as image galleries or JavaScript features must likewise

be manually developed or integrated into the project.

You can imagine (if you’ve spent any appreciable amount of time developing web

projects from scratch) how this process can quickly become time consuming. But

with a CSS framework, this process is made drastically easier by using many of its

built-in CSS and JavaScript components.

Instead of tediously defining each basic element of a new web project, you only

need to worry about styles you’d like to customize further. This can cut large amounts

of hand-styling out of the web development equation, letting you focus more on

refining the look of your project rather than defining every piece of its appearance.

Jump Start Foundation2

www.it-ebooks.info

Furthermore, it reduces countless hours tinkering with fussy JavaScript with the

hope of adding fancy effects. For example, adding a simple thumbnail feature to

your project would likely require dozens of lines of code without having use of

prebuilt libraries. Heck, even with jQuery you’d need to include the requisite scripts,

set up an anchor with a call to the action, and finally style the thumbnail itself.

With a CSS framework such as Foundation, it’s as simple as this:

</a>

By simply specifying the thumbnail class, th in the case of Foundation, the image

is automatically styled and the required JavaScript applied to create a polished

thumbnail image. Again, this is just one example of how CSS frameworks can make

your life easier as a web developer. We’ll be learning more about Foundation com-

ponents and how it is easy it is to employ them in our websites from Chapter 4 on-

wards; however, to check out the complete list of components and their usages, you

can always refer to the Foundation documentation.

Becoming Acquainted with Foundation

The Foundation framework began as a humble style guide used by the folk at Zurb,

a product design company, back in 2008 for all their client projects. It wasn’t long

before they realized that their development methods were much too slow and inef-

ficient. What they needed was a library of frequently used tools that they could re-

implement in a quick and easy fashion. Sounds like a CSS framework, doesn’t it?

That’s exactly what they built, and presumably realizing that it would be useful for

others too, decided to release it to the world.

Bringing together their most commonly utilized CSS, jQuery plugins, elements, and

best practices, Zurb released the Foundation framework in 2011. With its release

came a couple of firsts: the first open-source front-end framework to be responsive,

and the first to take a mobile-first approach, and the first to be semantic.

http://foundation.zurb.com/docs/

http://zurb.com/

3Building a Foundation

www.it-ebooks.info

剩余129页未读，继续阅读

vanridin

粉丝: 108
资源: 1187

快速入门Foundation框架

Jump Start MySQL(SitePoint,2015)

Jump Start PHP Environment(SitePoint,2015)

ump Start JavaScript SitePoint 2013

Jump Start HTML5

英文原版-Jump Start PHP 1st Edition

Sitepoint-source, 在 Sitepoint ( 自 2015年03月 ) 上，我的文章的源代码.zip

Sitepoint来源：我在Sitepoint上的文章的源代码（自2015年3月起）

Sitepoint-Test:Sitepoint 前端测试

sitepoint-jquerypic

sitepoint-tabswitcher

最新资源