包简介

The simple and intuitive grid, configurable layout for your every need... Designed and optimized to improve the development of a website. You can choose for 12, 16 or 24 columns.

README 文档

README

Quick start

Download the latest release.
Download dist css.
Clone the repo: git clone https://github.com/andreamariotti83/candy-grid-system.git.
Install with Composer: composer require candygs/candy-grid-system.

HTML:

To use the Grid, you need to include the file with Grid number 12, 16 or 24 that you want to use in the section <head> of the page.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/candy-grid-system/2.0.0/12-candygs.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/candy-grid-system/2.0.0/16-candygs.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/candy-grid-system/2.0.0/24-candygs.min.css">

candygs : This class is required to use to set the values of the grids.

<body class="candygs">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

fluid : This class is required to have a fluid layout, setting the width of the container to 100%.

<body class="candygs fluid">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

container : It has a default width for each resolution - 720px - 960px - 1200px - 1560px - 1920px

<body class="candygs">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

It is possible to set a minimum width and / or maximum container

min-widht container :
- min-sm : Set up a min-width to the container, which will be no smaller than 720px
- min-md : Set up a min-width to the container, which will be no smaller than 960px
max-widht container :
- max-sm : Set up a max-width to the container, which will be no larger than 720px
- max-md : Set up a max-width to the container, which will be no larger than 960px
- max-lg : Set up a max-width to the container, which will be no larger than 1200px
- max-xl : Set up a max-width to the container, which will be no larger than 1560px

<body class="candygs min-sm max-lg">
    <div class="container">
        <div class="..."></div>
    </div>
    <div class="container">
        <div class="..."></div>
    </div>
</body>

Now you can set the grids depending on your needs.

<body class="candygs">
	<div class="container">
		<div class="grid-8">
			<div class="row">
				<div class="grid-6"></div>
				<div class="grid-6"></div>
			</div>
		</div>
		<div class="grid-4"></div>
	</div>
</body>

You can also choose different values, depending on the screen resolution.

grid- : For all resolutions
grid-xs- : Only for mobile @media (max-width: 767px)
grid-sm- : @media (min-width: 768px)
grid-md- : @media (min-width: 992px)
grid-lg- : @media (min-width: 1200px)
grid-xl- : @media (min-width: 1560px)
grid-xxl- : @media (min-width: 1920px)

<body class="candygs">
	<div class="container">
		<div class="grid-xs-8 grid-sm-8 grid-md-7 grid-lg-6 grid-xl-5 grid-xxl-4"></div>
		<div class="grid-xs-4 grid-sm-4 grid-md-5 grid-lg-6 grid-xl-7 grid-xxl-8"></div>
	</div>
</body>

In additon to the class grid-, you can select:

prefix-
suffix-
push-
pull-

Depending on your needs, choose the same variables as the grid-.

LESS:

Coming soon

SASS:

Coming soon

PSD:

Download psd templates.

Author

Created by Andrea Mariotti. See the official site for more info: http://candygridsystem.com

https://github.com/andreamariotti83

Copyright and license

Thanks

candygs/candy-grid-system 适用场景与选型建议

candygs/candy-grid-system 是一款基于 CSS 开发的 Composer 扩展包，目前已累计 18 次下载、GitHub Stars 达 4，最近一次更新时间为 2016 年 10 月 05 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「css」「sass」「less」「responsive」「grid」「front-end」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 candygs/candy-grid-system 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 candygs/candy-grid-system 我们能提供哪些服务？

定制开发 / 二次开发

基于 candygs/candy-grid-system 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 candygs/candy-grid-system 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

rickkuipers/justless 6

ZF2 module that allows automation of compiling your LESS with the extra of minifying the files.

neilime/zf-assets-bundle 4

Zend Framework 3+ module that provides assets bundling / caching

stinger-soft/bootstrap-sass 0

bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

codefareith/cf-beskin 0

Define your own css rule-sets for the TYPO3 CMS backend.

candygs/candy-grid-system

包简介

关键字：