mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

add device grids and border utils

Browse Source
This commit is contained in:
Jenil Gogari 2019-03-23 13:54:27 -04:00
parent f19bda80c6
commit c32b24a5d0
8 changed files with 527 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
dist/chota.css vendored
View File

@ -168,10 +168,10 @@ iframe {
margin-right: calc(var(--grid-gutter) / -2);
}
.row.reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.col {
-webkit-box-flex: 1;
@ -255,13 +255,13 @@ iframe {
flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 599px) {
.container {
width: 100%;
}
.col,
[class*=" col-"],
[class*="col-"],
[class^='col-'] {
-webkit-box-flex: 0;
-ms-flex: 0 1 100%;
@ -269,6 +269,176 @@ iframe {
max-width: 100%;
}
}
@media screen and (min-width: 900px) {
.col-1-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12-md {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
}
@media screen and (min-width: 1200px) {
.col-1-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12-lg {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
}
fieldset {
padding: 0.5rem 2rem;
}
@ -608,26 +778,39 @@ button:disabled:hover {
/* Colors */
.bg-primary {
background-color: var(--color-primary);
color: #fff;
}
.bg-light {
background-color: var(--color-lightGrey);
}
.bg-dark {
background-color: var(--color-darkGrey);
color: #fff;
}
.bg-grey {
background-color: var(--color-grey);
color: #fff;
}
.bg-error {
background-color: var(--color-error);
color: #fff;
}
.bg-success {
background-color: var(--color-success);
color: #fff;
}
.bd-primary {
border: 1px solid var(--color-primary);
}
.bd-light {
border: 1px solid var(--color-lightGrey);
}
.bd-dark {
border: 1px solid var(--color-darkGrey);
}
.bd-grey {
border: 1px solid var(--color-grey);
}
.bd-error {
border: 1px solid var(--color-error);
}
.bd-success {
border: 1px solid var(--color-success);
}
.text-primary {
color: var(--color-primary);
@ -647,6 +830,9 @@ button:disabled:hover {
.text-success {
color: var(--color-success);
}
.text-white {
color: #fff;
}
/* Position & alignment */
.pull-right {
float: right;
@ -746,13 +932,18 @@ button:disabled:hover {
.is-hidden {
display: none !important;
}
@media screen and (max-width: 480px) {
.hide-phone {
@media screen and (max-width: 599px) {
.hide-sm {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.hide-tablet {
@media screen and (min-width: 600px) and (max-width: 1199px) {
.hide-md {
display: none !important;
}
}
@media screen and (min-width: 1200px) {
.hide-lg {
display: none !important;
}
}

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

121
docs/_includes/grid.html
View File

@ -1,6 +1,7 @@
<section id="grid">
<h4>Grid</h4>
<p>The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the <code>--grid-maxWidth</code> in the <code>:root</code>.</p>
<p>The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max
width can be controlled by changing the <code>--grid-maxWidth</code> in the <code>:root</code>.</p>
<p>Much like other frameworks, wrap your content in a <code>.container</code> to center it on the page.</p>
<br>
<h5>Flexible grid</h5>
@ -9,7 +10,8 @@
<li>Add a <code>.row</code> container</li>
<li>Add as many <code>.col</code> elements as you want</li>
</ul>
<p>Each column will have an <strong>equal width</strong>, in a row. There is no restriction on number of columns, but it is recommended <strong>not</strong> to add more than 12 columns in a row.</p>
<p>Each column will have an <strong>equal width</strong>, in a row. There is no restriction on number of columns, but
it is recommended <strong>not</strong> to add more than 12 columns in a row.</p>
<div class="row">
<div class="col">
<div class="card is-center">.col</div>
@ -26,7 +28,7 @@
<div class="card is-center">.col</div>
</div>
</div>
{% highlight html %}
{% highlight html %}
<div class="row">
<div class="col"> .col </div>
</div>
@ -35,7 +37,7 @@
<div class="col"> .col </div>
<div class="col"> .col </div>
</div>
{% endhighlight %}
{% endhighlight %}
<hr>
<h5>Sized</h5>
<p>You can also specify the size of the columns</p>
@ -43,7 +45,8 @@
<li>Add a <code>.row</code> container</li>
<li>Add a <code>.col-n</code> child where <strong>n</strong> can be from 1 to 12</li>
</ul>
<p>Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use <code>.col-4</code>.</p>
<p>Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use
<code>.col-4</code>.</p>
<div class="row">
<div class="col-1">
<div class="card is-center">.col-1</div>
@ -110,11 +113,67 @@
<div class="row">
<div class="col-12"> .col-12 </div>
</div>
{% endhighlight %}
<hr>
<h5><span class="tag is-small">New</span> Responsive grids:</h5>
<p>We now have responsive grids that work based on device width.</p>
<ul>
<li>All columns are 100% for device width &lt; 600px</li>
<li><code>.col</code> and <code>.col-N</code> for all device sizes &gt;= 600px</li>
<li><code>.col-N-md</code> for &gt;= 900px sizes</li>
<li><code>.col-N-lg</code> for &gt;= 1200px sizes</li>
</ul>
<div class="row">
<div class="col-12 col-6-md col-4-lg">
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
</div>
<div class="row">
<div class="col col-6-lg">
<div class="card is-center">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-12 col-6-md col-4-lg">
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
</div>
<div class="row">
<div class="col col-6-lg">
<div class="card is-center">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
</div>
{% endhighlight %}
<hr>
<h5>Mix-n-Match</h5>
<p>You can use a combination of <strong>flexible</strong> and <strong>sized</strong> columns.</p>
<p>When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.</p>
<p>When using a combination, the sized width column takes the size specified and the remaining is filled in by the
flexible column.</p>
<div class="row">
<div class="col-2">
<div class="card is-center">.col-2</div>
@ -138,11 +197,19 @@
</div>
</div>
<div class="row">
<div class="col"><div class="card is-center">auto</div></div>
<div class="col"><div class="card is-center">auto</div></div>
<div class="col">
<div class="card is-center">auto</div>
</div>
<div class="col">
<div class="card is-center">auto</div>
</div>
<div class="is-full-width"></div>
<div class="col"><div class="card is-center">auto</div></div>
<div class="col"><div class="card is-center">auto</div></div>
<div class="col">
<div class="card is-center">auto</div>
</div>
<div class="col">
<div class="card is-center">auto</div>
</div>
</div>
{% highlight html %}
<div class="row">
@ -163,23 +230,24 @@
<div class="col"> auto </div>
</div>
{% endhighlight %}
<p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is one of the <a href="#utilities">utility</a> class.</p>
<p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a
<code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is
one of the <a href="#utilities">utility</a> class.</p>
<hr>
<h5>Reverse Direction</h5>
<p>Add <code>.reverse</code> to the <code>.row</code> to reverse the column direction. </p>
<div class="row reverse">
<div class="col-6">
<div class="card is-center">.col-6</div>
<hr>
<h5>Reverse Direction</h5>
<p>Add <code>.reverse</code> to the <code>.row</code> to reverse the column direction. </p>
<div class="row reverse">
<div class="col-6">
<div class="card is-center">.col-6</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
<div class="col-3">
<div class="card is-center">.col-3</div>
</div>
</div>
{% highlight html %}
<div class="row reverse">
<div class="col-6">
@ -193,5 +261,4 @@
</div>
</div>
{% endhighlight %}
</section>
</section>

12
docs/_includes/utilities.html
View File

@ -4,6 +4,7 @@
<ul>
<li><code>text-primary</code> - <span class="text-primary">Primary text</span></li>
<li><code>text-light</code> - <span class="text-light">Light text</span></li>
<li><code>text-white</code> - <span class="bg-primary text-white">White text</span></li>
<li><code>text-dark</code> - <span class="text-dark">Dark text</span></li>
<li><code>text-grey</code> - <span class="text-grey">Grey text</span></li>
<li><code>text-error</code> - <span class="text-error">Error text</span></li>
@ -14,6 +15,12 @@
<li><code>bg-grey</code> - <span class="bg-grey">Grey background</span></li>
<li><code>bg-error</code> - <span class="bg-error">Error background</span></li>
<li><code>bg-success</code> - <span class="bg-success">Success background</span></li>
<li><code>bd-primary</code> - <span class="bd-primary">primary border</span></li>
<li><code>bd-light</code> - <span class="bd-light">Light border</span></li>
<li><code>bd-dark</code> - <span class="bd-dark">Dark border</span></li>
<li><code>bd-grey</code> - <span class="bd-grey">Grey border</span></li>
<li><code>bd-error</code> - <span class="bd-error">Error border</span></li>
<li><code>bd-success</code> - <span class="bd-success">Success border</span></li>
<li><code>pull-right</code> - floats an element to the right</li>
<li><code>pull-left</code> - floats an element to the left</li>
<li><code>is-text-center</code> - center aligns text</li>
@ -34,7 +41,8 @@
<li><code>is-marginless</code> - removes any margin</li>
<li><code>clearfix</code> - clears the floats</li>
<li><code>is-hidden</code> - hides the element completely</li>
<li><code>hide-phone</code> - hides the element for screens &lt;480px</li>
<li><code>hide-tablet</code> - hides the element for screens &lt;768px</li>
<li><code>hide-sm</code> - hides the element for screens &lt;600px</li>
<li><code>hide-md</code> - hides the element for screens &gt;=600px and &lt;=1200px</li>
<li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li>
</ul>
</section>

6
package.json
View File

@ -4,7 +4,8 @@
"description": "A really small CSS framework",
"main": "dist/chota.min.css",
"scripts": {
"start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
"start": "run-p browser-sync watch",
"browser-sync": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
"build": "rimraf dist/* && yarn postcss && cross-env NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css | wc -c",
"postcss": "postcss ./src/chota.css -d dist/",
"watch": "cross-env NODE_ENV=development yarn postcss -w",
@ -26,10 +27,11 @@
"url": "https://github.com/jenil/chota/issues"
},
"devDependencies": {
"autoprefixer": "^9.4.2",
"autoprefixer": "^9.5.0",
"browser-sync": "^2.26.3",
"cross-env": "^5.2.0",
"cssnano": "^4.1.7",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.0.1",
"postcss-csso": "^3.0.0",
"postcss-import": "^12.0.1",

130
src/_grid.css
View File

@ -14,7 +14,7 @@
}
.row.reverse {
flex-direction: row-reverse;
flex-direction: row-reverse;
}
.col {
@ -87,15 +87,139 @@
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 599px) {
.container {
width: 100%;
}
.col,
[class*=" col-"],
[class*="col-"],
[class^='col-'] {
flex: 0 1 100%;
max-width: 100%;
}
}
@media screen and (min-width: 900px) {
.col-1-md {
flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2-md {
flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3-md {
flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4-md {
flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5-md {
flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6-md {
flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7-md {
flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8-md {
flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9-md {
flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10-md {
flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11-md {
flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12-md {
flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
}
@media screen and (min-width: 1200px) {
.col-1-lg {
flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2-lg {
flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3-lg {
flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4-lg {
flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5-lg {
flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6-lg {
flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7-lg {
flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8-lg {
flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9-lg {
flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10-lg {
flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11-lg {
flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12-lg {
flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
}

47
src/_util.css
View File

@ -1,7 +1,6 @@
/* Colors */
.bg-primary {
background-color: var(--color-primary);
color: #fff;
}
.bg-light {
@ -10,22 +9,42 @@
.bg-dark {
background-color: var(--color-darkGrey);
color: #fff;
}
.bg-grey {
background-color: var(--color-grey);
color: #fff;
}
.bg-error {
background-color: var(--color-error);
color: #fff;
}
.bg-success {
background-color: var(--color-success);
color: #fff;
}
.bd-primary {
border: 1px solid var(--color-primary);
}
.bd-light {
border: 1px solid var(--color-lightGrey);
}
.bd-dark {
border: 1px solid var(--color-darkGrey);
}
.bd-grey {
border: 1px solid var(--color-grey);
}
.bd-error {
border: 1px solid var(--color-error);
}
.bd-success {
border: 1px solid var(--color-success);
}
.text-primary {
@ -52,6 +71,10 @@
color: var(--color-success);
}
.text-white {
color: #fff;
}
/* Position & alignment */
.pull-right {
float: right;
@ -145,14 +168,20 @@
display: none !important;
}
@media screen and (max-width: 480px) {
.hide-phone {
@media screen and (max-width: 599px) {
.hide-sm {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.hide-tablet {
@media screen and (min-width: 600px) and (max-width: 1199px) {
.hide-md {
display: none !important;
}
}
@media screen and (min-width: 1200px) {
.hide-lg {
display: none !important;
}
}

55
test/components.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Components</title>
<link rel="stylesheet" href="../dist/chota.min.css">
<link rel="stylesheet" href="../dist/chota.css">
<style>
.nav {
border: 1px solid red;
@ -67,7 +67,8 @@
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> Brand</a>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
Brand</a>
</div>
<div class="nav-right">
<div class="tabs">
@ -120,7 +121,8 @@
<header>
<h4>Card title</h4>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
<footer class="is-right">
<a href="#!" class="button primary">Submit</a>
@ -130,10 +132,13 @@
</div>
<div class="col-6">
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
<p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis,
debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
<p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas,
nobis,
debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti
enim!</p>
</div>
</div>
</div>
@ -316,6 +321,40 @@
<div class="card is-center">.col-12</div>
</div>
</div>
<h4>Responsive grids:</h4>
<div class="row">
<div class="col-12 col-6-md col-4-lg">
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
</div>
<div class="row">
<div class="col col-6-lg">
<div class="card is-center">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
<div class="card is-center">.col.col-3-lg</div>
</div>
</div>
<div class="row">
<div class="col hide-sm">
<div class="card is-center">.hide-sm</div>
</div>
<div class="col hide-md">
<div class="card is-center">.hide-md</div>
</div>
<div class="col hide-lg">
<div class="card is-center">.hide-lg</div>
</div>
</div>
</section>
<section>
<h1>Helpers</h1>
@ -350,13 +389,13 @@
</section>
<section>
<h1>Icons</h1>
<button type="button" class="button primary icon">New file
<button type="button" class="button primary icon">New file
<img src="https://icongr.am/feather/file.svg?size=16&color=ffffff" alt="icon">
</button>
<button type="button" class="button icon">New file
<img src="https://icongr.am/feather/file.svg?size=12" alt="icon">
</button>
<button type="button" class="button dark icon">New file
<button type="button" class="button dark icon">New file
<img src="https://icongr.am/feather/file.svg?size=32&color=ffffff" alt="icon">
</button>
<button class="button icon-only">