潍坊网站开发:蓝图框架-教程,如何-指南和工具

2019.01.10

454

潍坊网站开发

CSS框架是上帝发送的。它们加快了开发速度,确保了可用性,满足了所有W3C标准,跨大多数浏览器实现了可移植性,还有更多。听起来很棒不是吗。为什么每个人都不使用它们?那么,对于新手开发人员来说,框架可能有点棘手吗?也就是说,如果这篇文章出现,希望能让每个人更好地理解框架是什么,以及如何有效地使用它。我们将关注如何使用BlueprintFramework,这是一个比其他框架更主流和更成熟的框架(我没有说得更好)。我们已经开始指南,高级教程,插件,工具和应用程序和一些有洞察力的进一步阅读文章。希望这篇文章能让大家更好地了解CSS框架,并最终爱上它们。

The Blueprint CSS Framework Toolbox

蓝图CSS框架工具箱
“蓝图是一个CSS框架,旨在减少您的开发时间。它为您在上面构建项目提供了坚实的基础,有一个易于使用的网格、合理的排版、有用的插件,甚至还有用于打印的样式表。“

蓝图提供什么?

  • CSS重置,消除了不同浏览器之间的差异。
  • 支持最复杂的布局的坚实的网格。
  • 基于网站之前的专家原则的排版。
  • 表单样式,用于漂亮的用户界面。
  • 打印样式,使任何网页准备纸张。
  • 按钮,标签和精灵插件。
  • 工作流中每个步骤的工具、编辑器和模板。

入门资源蓝图:CSS框架主页下载最新版本的蓝图框架Blueprintcss-Google代码托管项目列表BlueprintWiki BlueprintLiveDemos

The Blueprint CSS Framework Files

该框架有几个文件您应该检查。“src”目录中的每个文件都包含了许多清晰的注释。[来源]

压缩文件(这些文件在HTML中):

  • 蓝图/屏幕
  • 蓝图/打印件
  • 蓝图/第三阶段

源潍坊网站开发文件:

  • 蓝图/src/reset.css:此文件重置浏览器倾向于为您设置的CSS值。
  • 蓝图/src/grid.css:这个文件设置网格(是真的)。它有很多类,您可以应用到div来建立任何类型的基于列的网格。
  • 蓝图/src/typography.css:这个文件设置了一些默认的排版。它也有一些方法,一些真正花哨的东西做你的文字。
  • 蓝图/src/forms.css:包括一些最小的表单样式。
  • 蓝图/src/print.css:这个文件设置了一些默认的打印规则,这样您的站点的打印版本看起来比通常更好。它应该包括在每一页。
  • 蓝图/src/ie.css:包括我们心爱的IE6和7的每一个黑客。

剧本( script的名词复数 ):

  • rb:用于压缩和自定义CSS的Ruby脚本。设置自定义命名空间、列计数、宽度、输出路径、多个项目和语义类名。有关更多信息,请参见press.rb中的注释或运行$rubypress.rb-h。
  • rb:使用W3CCSS验证器验证Blueprint核心文件。

[电影]家庭私小说:

  • 蓝图/插件/:包含其他的功能,以简单插件的形式为蓝图。有关进一步说明,请参阅每个插件目录中的各个自述文件。
  • test/:包含测试Blueprint大多数方面的html文件。打开test/index.html以获得进一步说明。
Quick-Start Tutorial

这是一个关于如何开始使用来自约书亚·克莱顿的蓝图的快速教程。蓝图应该放在你网站的CSS目录中。完成之后,将这三行添加到网页的中。记住要确保href路径是正确的:

现在,你可以走了。你已经准备好处理蓝图了。

Further Getting Started Guides

从部门设计学习蓝图框架的基本知识-蓝潍坊网站开发图快速指南-BlueprintCSS 101

A Closer Look At the Blueprint CSS Framework

蓝图CSS框架工具箱蓝图是一个CSS框架,它可以为您在任何涉及HTML和CSS的项目中节省时间和麻烦,无论是使用Rails、PHP还是仅仅部署HTML页面。在本教程中,您将了解Blueprint的内部工作原理,并将查看一个使用Blueprint更好地了解框架实际工作方式的实时演示应用程序。

Advanced Blueprint Tutorials
Customizing Typography Baselines with Blueprint CSS

蓝图的排版.css文件建立了一些非常好的排版样式,创建了一个漂亮的基线网格。默认情况下,它将字体大小设置为12 px,并在此基础上设置18 px的行高和基线。虽然这很好,但我通常更喜欢使用比12 px更大的字体大小。那么这是怎么计算出来的呢?这个小的,但很有用的教程,解释了自定义蓝图排版基线的方程式。

蓝图CSS jQuery

蓝图CSS框架工具箱One of the neat features of blueprint is a compressor script that not only renders all the various CSS bits that you want according to the given column numbers and sizes for each project into one neat (and compact) CSS file, but it also lets you define semantic classes and ids. And on top of that, the compressor script will also generate a PNG image that conforms to the column size and padding you've selected.
What if you wanted a less obtrusive way of switching the grid on and off? In this tutorial, with little help from jQuery, you will learn how to generate a toggle switch for each page.

带有BlueprintCSS的杂志样式主页模板原型

蓝图CSS框架工具箱This tutorial focuses on the process of applying a CSS grid (Bliueprint)and designing a prototype of a home page template. The layout design, in this tut, is based on the popular layout seen on many WordPress Magazine themes.
A typical design process for web pages is to start with a sketch on paper, followed by a graphic mockup in Photoshop or Fireworks, etc. Drop in all the design elements, positioned approximately where you want them. Later, in the CSS grid-based design phase, you'll determine exact measurements.)
View the Demo

用GIMP和Blueprint CSS开发We

蓝图CSS框架工具箱The GIMP is a popular freeand open source image editing program and Blueprint CSS is a CSS framework, whichmakes web layouts easy and chooses sensible style details on your web page. It is compatible with almsost all moder browsers and makes designing a website easy and simple.
In this three part tutorial you will learn the process of setting up the files and folders and creating the image in the Gimp, the second part will contain how to slice up the image and save it, and the third part shows you how to write the code and finish up.

使用WordPress沙箱和Blueprint CSS框架

蓝图CSS框架工具箱Straight out of the box, the WordPress Sandbox theme is an exercise in styling simplicity, lacking any graphics , boring white on black text, the theme is just waiting for a CSS wizard to craft a masterpiece. Introduce the Blueprint framework into the mix and you have a base with endless possibilties.
This tutorial shows you how to successfully merge the WP Sandbox with the Blueprint framework and simplify your work process.

Blueprint Plugins
Montoya's Blueprint- Plugin – Tabs

这个插件向Blueprint添加了一组简单灵活的水平选项卡,只需将屏幕.css文件上传到服务器上的一个新目录,包括网页中的插件文件,然后将类“选项卡”添加到列表中。很简单。

Liquid Blueprint

到现在,您将知道Blueprint有固定的布局,使用此插件,您可以将其转换为适合任何浏览器窗口大小的流体布局。查看固定布局-查看拉伸流体布局-查看CSS

Silkset Plugin

丝绸集是一组图标,与CSS框架蓝图完美地结合在一起。这个插件包含各种样式表,并被认为可以提高性能和缩短开发时间。

Blueprint Tools and Apps
Blueprint CSS Background Grid Bookmarklet

蓝图CSS框架工具箱When viewing your web site that has been designed with a grid stystem, an easy way to toggle the positioning grid on and off is to use this bookmarklet, it takes away the unnecssary step of having to change the site's HTML templates.
Get the bookmarklet here: Blueprint CSS Background Grid Bookmarklet »

Blueprint Grid CSS Generator

蓝图CSS框架工具箱
这个工具将帮助您生成Blueprint的grid.css和pressed.css及grid.png文件的更灵活的版本。无论您喜欢设计中的8、10、16或24列,当您使用Blueprint框架时,这个生成器提供了更多的灵活性。

BlueCalc – A Grid Calculator for Blueprint.css

蓝图CSS框架工具箱
此工具可帮助您计算基于蓝图的网站或web应用程序的单个网格布局。作为一个静态网格框架,通常首先定义网格的总宽度,然后将工作区划分为列。默认情况下,Blueprint附带950 px网格,分为24列。但是,这种配置通常不足以创建您所想到的布局类型。

Construct Your CSS – Based on Blueprint & jQuery

蓝图CSS框架工具箱
Structure是一个基于Blueprint&jQuery的可视化布局编辑器,它既是CSS设计人员的有用工具,也是可视化布局编辑器能够使用干净的CSS和语义HTML的证明。

Blueprint's Compress.rb: A Walkthrough

蓝图CSS框架工具箱The purpose of refactoring Blueprint’s compress.rb and other scripts was to make it much more extensible and useful for developers working on multiple projects. Developers using Blueprint on one or two single sites don’t care that the full Blueprint distribution is packaged with the site. However, developers working on multiple sites from a single computer are often left with the hassle of keeping all these copies up-to-date, with extra custom files floating around and very much a large mess.
The goal of rewriting the compression script was to allow for extreme customization of the output Blueprint CSS as well as ease of keeping projects up-to-date with the newest Blueprint source without much hassle.

Plumb – Web Layout Composition Tool

蓝图CSS框架工具箱
Plumb是一个聪明的网页布局组合工具,用于蓝图框架。你所要做的就是在页面的舞台上画一些‘东西’,它会为你生成HTML。非常出色

Blueprint CSS Grid Tool for Adobe Air

蓝图CSS框架工具箱Blueprint comes with a background grid image, but it only works as a background, and it is not that useful when you are working with colors and final tweaks. This Adobe AIR app gets around this by showing a floating grid, sized at 18px and with Blueprint-sized columns.
It is semi-transparent, draggable and resizable. So you just start it up and align things as you please. It floats to the front, so you can even edit behind it while it is running.

Boks – A Visual Grid Editor for Adobe Air

蓝图CSS框架工具箱Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS's framework. It's been designed for those who think the Grid System is good but never really took the time to give it love.
It handles grid configuration, baseline rhythm pimpin', CSS (with or without compression) and grid.png export, HTML layout and much more.

Photoshop Template for Blueprint CSS Comps


此模板的目的是允许您创建可视化的设计方案,以便使用CSS布局框架实现。Photoshop文档为CSS框架(如Blueprint)提供了24列网格。它由符合蓝图的24列30 px,10 px宽排水沟和水平宽度950 px的指南组成。水平导轨在18 px或1.5 em线高度为12 px基字体。

Blueprint Cheat Sheet


当然,每个框架或工具都需要一个好的、深入的备忘单。在此下载PDF格式:蓝图备忘单V.0.8

Further Reading

我可以比你更快地设计网站:CherrySaveBlueprintCSS的快速样式表-JeffCroft的内容和表示分离的神话-由Khoi VinhOn的框架正式称为打印-George LesicaWhich CSS Grid Framework应该用于Web设计吗?由Raj DashPopular CSS框架-Yahoo Yui,960 CSS,Blueprint,YAML,jQuery由WebdevelopertutBlueprint编写。MarkBoulton的CSS框架

关键词

最新案例

联系电话 400-6065-301

微信咨询 寒总监