什么是unsemantic？
Unsemantic是一个基于响应式设计的CSS框架，它用于创建灵活的网格布局。它可以帮助您在不同的设备上构建响应式网站。Unsemantic旨在简化响应式设计的实现，使开发人员能够更轻松地设计，并使网站在多个设备上呈现出相同的外观和感觉。
安装和使用unsemantic
安装Unsemantic非常简单，只需要在您的项目目录中运行以下命令即可：
npm install unsemantic
然后，在您的HTML文件中引入unsemantic.min.css文件就可以开始使用了：
<link rel="stylesheet" href="node_modules/unsemantic/assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7.css">
Unsemantic基础
网格系统
Unsemantic使用12列栅格系统来创建网格布局。要将元素放置在网格中，您可以使用类似于以下示例的HTML结构：
<div class="grid-container"> <div class="grid-50">50% width</div> <div class="grid-50">50% width</div> </div>
在这个例子中，我们创建了一个50/50的网格布局，其中每个网格占用整个父容器的50%宽度。
响应式设计
Unsemantic具有用于创建响应式设计的类。使用这些类，您可以根据屏幕尺寸更改元素的大小和位置。
例如，要将元素隐藏在小于768像素的屏幕上，请使用以下类：
<div class="hide-on-tablet">This is hidden on a tablet screen</div>
布局选项
Unsemantic提供了一些其他布局选项，例如使用偏移量放置元素、垂直对齐元素等等。
以下是一些示例：
<div class="grid-50 push-25">50% width, pushed right 25%</div> <div class="grid-50 align-center">Center aligned</div> <div class="grid-50 align-right">Right aligned</div>
Unsemantic进阶
自定义网格
Unsemantic允许您自定义您的网格系统以满足特定的需求。要创建自定义网格，请先下载并安装Sass版本的Unsemantic。
然后，在Sass文件中，您可以设置您想要的列数和列宽度：
$column-count: 16; $column-width: 60px; $gutter-width: 20px; @import "unsemantic";
在上面的示例中，我们将列数设置为16，列宽度设置为60像素，间距设置为20像素。
高级技巧
Unsemantic还提供了一些高级技巧，例如使用Flexbox布局、创建动画等等。这些技巧需要更高级的CSS知识，但可以帮助您创建更高级的响应式设计。
以下是一些示例：
-- -------------------- ---- ------- ----------- - -------- ----- ---------------- ------- ------------ ------- - ----------------- - ---------- ----------- ----------- --- ---- ------------ -
在上面的示例中，我们使用Flexbox布局将元素水平和垂直居中，并在鼠标悬停时添加了一个简单的缩放动画。
结论
Unsemantic是一个非常有用的响应式设计框架。它可以帮助您快速创建灵活的网格布局，使您的网站在不同的设备上呈现出相同的外观和感觉。此外，通过自定义和使用高级技巧，您可以进一步扩展其功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35081