潍坊网站开辟:蓝图框架-教程,若何-指南和东西

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

留言