列的明智的网格设计为设备可移植如何工作 [英] Column's wise grid designs for device portabilty how it works

问题描述

我会尝试一个模板，需要支持所有的设备大多数他们推荐我网格框架，因为使用媒体查询自我可能会导致时间，但使用框架使fast.Now的东西是我不关于网格和我的任务是用基础框架来完成它。这是最好的方式

*）使用框架通过自己（或）

*像基础

并告诉我的方式和如何使用它感谢很多提前..！

解决方案

有两种相反的方式完成您的任务。

使用非语义CSS网格框架

有许多CSS网格框架。其中最受欢迎的可能是：

• Twitter Bootstrap ;


• Zurb 基金会 ;


• 蓝图。






使用任何这些的优点在于，您可以通过将非语义类应用于HTML元素来快速地对网格进行原型。它们还包含许多方便的装饰风格。





但是这种方法被许多CSS开发人员认为是错误的。有很多问题：






• 通过使用非语义类，您可以混合结构和表示，这是很好的工作完成


• 您强制您的用户下载一个巨大的CSS库，而你几乎不使用它的10％在你的网站上（我必须承认基础允许导入不同的部分的CSS库，并且存在纯网格框架，如 960gs ，它们根本不包含装饰样式）。


• 您受限于网格系统提供的大小和断点。没有优雅的方式来覆盖它们。大多数网格系统只提供两种响应样式：小和大，而您可能需要更多（例如手机肖像，手机横向，平板电脑画面，平板电脑横向，笔记本电脑，桌面）。






使用SASS和指南针的力量





SASS 将CSS转换为有点类似的编程语言。您可以使用变量，函数，方法，可以包括代码库，并使用参数执行它们。可能性几乎是最早的。您可以在SASS中编写样式，然后将它们编译为所有浏览器都接受的vanilla CSS。





Compass 是一堆名为

的东西：





• / li>
  
• 一个庞大的SASS样式库，适用于所有场合;


• 您可以毫不费力地在项目中安装和使用的扩展生态系统。 >
  




存在大量的SASS网格框架。它们允许你在语义上跨越元素。而不是向HTML添加分类。 g .:


 < aside id =sidebar-leftclass =grid-2-of- 6 grid-4-of-12> 
  

...将CSS应用于现有选择器， g：


 ＃sidebar-left {@include float-span（2）; } 
  

另一个优点是你不受默认值的限制。您可以更改列数，其宽度，断点。你甚至可以有不同的网格的不同部分的网页！最美味的功能是，您可以为不同的屏幕宽度（而不是只是让你的列可笑的狭窄）不同数量的列。





在我看来，最好的SASS网格系统有奇点响应网格框架。





对于响应式媒体查询，您可以使用断点或它的喷气推进sidekick Breakpoint Slicer 。使用奇点和断点切片器建立响应网格是一种快乐。





SASS和Compass提供了其他神奇的优势。例如，您可以非常高效地构造代码。这不是一个适当的地方，描述所有的方式与SASS和指南针使你的生活更好。我只是说，与SASS相比，CSS比较像电子表格处理器的副本和算盘。我建议您通过Google为SASS了解更多信息。





SASS方法的缺点是：






• 你必须学习它。需要时间。


• 您必须在SASS中保留您的样式。如果要编辑CSS，则必须编辑SASS并重新编译。这不是一个麻烦，有自动化，甚至整合到部署过程的方法，但它需要时间和努力采纳它们。


• 你的队友被迫使用SASS太因为在每次编译期间都会覆盖CSS中的任何更改。


• 一旦开始使用SASS，就不再需要对香草CSS进行编码。这不是真正的缺点。但你应该知道，作为前端开发人员的生活将永远是不一样的！





Am gonna try a template which needs to support all devices most of them recommended me to grid framework because using media query by self may cause time but using framework makes fast.Now the thing is i don't about grid and my task is to finish it with foundation framework.! and which is the best way

*)writing media query by own (or)

*)using framework like foundation

and tell me the way and how to use it thanks a lot in advance..!

解决方案

There are two opposite ways to accomplish your task.

Using a non-semantic CSS grid framework

There are a number of CSS grid frameworks. The most popular of them probably are:

• Twitter Bootstrap;
• Zurb Foundation;
• Blueprint.

The advantage of using any of those is that you can prototype your grid very quickly by applying the non-semantic classes to your HTML elements. They also contain a lot of handy decorative styles.

But this approach is considered faulty by many CSS developers. There are a number of problems:

• By using non-semantic classes you mix structure and presentation, which is fine to make the job done quickly but unacceptable for a serious project.
• You force your users to download a huge CSS library while you barely use 10% of it on your website (i have to admit that Foundation allows to import different portions of its CSS library separately, and there exits pure grid frameworks like 960gs that don't contain decoration styles at all).
• You are limited with the sizes and breakpoints provided by the grid system. There's no elegant way to override them. Most of grid systems provide only two responsive styles: small and large, while you may want more (e. g. phone portrait, phone landscape, tablet portrait, tablet landscape, laptop, desktop).

Using the power of SASS and Compass

SASS turns CSS into kinda programming language. You can use variables, functions, methods, you can include libraries of code and execute them with your parameters. The possibilities are almost endlest. You write your styles in SASS and then complile them into vanilla CSS accepted by all browsers.

Compass is a bunch of things under one name:

• a handy tool to compile SASS efficiently;
• a huge library of handy SASS styles for all occasions;
• an ecosystem of extensions that you can install and use in your projects effortlessly.

There exist a number of SASS grid frameworks. They allow you to span your elements semantically. Instead of adding classess to HTML, e. g.:

<aside id="sidebar-left" class="grid-2-of-6 grid-4-of-12">

...you apply CSS to existing selectors, e. g.:

#sidebar-left { @include float-span(2); }

Another advantage is that you're not limited with the defaults. You can alter the number of columns, their width, the breakpoints. You can even have different grids for different portions of the web page! And the most tasty feature is that you can have different number of columns for different screen widths (instead of just making your columns ridiculously narrow).

In my opinion, the best SASS grid system out there is Singularity responsive grid framework. It is extremely powerful and flexible and at the same time it's very smooth and simple to use (once you study it).

For responsive media queries you can use Breakpoint or it's jet-propelled sidekick Breakpoint Slicer. Building a responsive grid with Singularity and Breakpoint Slicer is a pleasure.

SASS and Compass provide other fantastic advantages. For example, you can structure your code very efficiently. It's not a proper place do describe all the ways with which SASS and Compass make your life better. I'll just say that CSS compared to SASS is like a copybook and abacus compared to a spreadsheet processor. I suggest that you google for SASS to learn more.

The downsides of the SASS approach are:

• You'll have to study it. It takes time.
• You'll have to keep your styles in SASS. If you want to edit your CSS, you'll have to edit SASS and recompile. That's not much of a hassle and there are ways to automate this or even integrate into the deployment process, but it takes time and effort to adopt them.
• Your teammates are obliged to use SASS too because any changes in CSS are overwritten during each compilation.
• Once you start using SASS, you'll never want to code vanilla CSS anymore. That's not a true disadvantage actually. But you should be aware that your life as a frontend developer will never be the same!

这篇关于列的明智的网格设计为设备可移植如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！