solid v3 setup, wip
This commit is contained in:
Lukas Juhas
parent
b02b2f2519
commit
7e87836ada
62 changed files with 665 additions and 4867 deletions
BIN
assets/.DS_Store
vendored
BIN
assets/.DS_Store
vendored
Binary file not shown.
BIN
assets/images/logo.png
Normal file
BIN
assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
36
assets/images/logo.svg
Normal file
36
assets/images/logo.svg
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 250 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
|
||||
<g transform="matrix(0.118406,0,0,0.118406,0,0)">
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M2158.04,447.724L2250.15,367.986L2203.59,367.986L2129.55,431.386L2129.55,285.212L2096.71,285.212L2096.71,535.168L2129.55,535.168L2129.55,463.59L2215.64,535.168L2263.55,535.168L2158.04,447.724Z" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M862.415,381.306C874.099,381.306 885.098,384.059 892.656,392.657L806.031,447.643C801.906,411.562 824.94,381.306 862.415,381.306M863.435,504.357C842.81,504.357 826.658,493.71 815.66,476.182L938.03,398.155C919.13,367.21 897.126,350.371 860.004,350.371C813.598,350.371 773.038,390.587 773.038,438.015C773.038,493.359 809.466,535.309 865.495,535.309C892.656,535.309 920.182,518.206 941.844,503.077L928.059,474.122C910.182,488.205 887.155,504.357 863.435,504.357" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1910.33,503.991L1850.38,503.991C1833.61,503.991 1819.43,498.032 1807.83,486.127C1796.23,474.213 1790.44,459.892 1790.44,443.158C1790.44,426.435 1796.23,412.037 1807.83,399.949C1819.43,387.871 1833.61,381.826 1850.38,381.826C1867.14,381.826 1881.33,387.871 1892.93,399.949C1904.53,412.037 1910.33,426.435 1910.33,443.158L1910.33,503.991ZM1850.26,350.521C1824.7,350.521 1802.71,359.562 1784.32,377.654C1765.91,395.747 1756.71,417.578 1756.71,443.144C1756.71,468.703 1765.91,490.462 1784.32,508.402C1802.71,526.335 1824.7,535.309 1850.26,535.309L1944.05,535.309L1944.05,443.144C1944.05,417.578 1934.81,395.747 1916.33,377.654C1897.85,359.562 1875.82,350.521 1850.26,350.521" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1991.67,378.48C1972.55,397.136 1962.97,419.761 1962.97,446.328L1962.97,535.309L1997.01,535.309L1997.01,446.328C1997.01,430.471 2007.58,389.201 2060.22,382.557L2077.79,382.557L2077.79,350.521L2060.22,350.521C2033.65,350.521 2010.8,359.84 1991.67,378.48" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1666.85,350.448C1646.46,350.448 1620.03,358.731 1607.97,376.062C1595.92,358.731 1569.49,350.448 1549.08,350.448C1512.1,350.448 1478.15,378.323 1478.15,412.28L1478.15,535.309L1511.31,535.309L1511.31,419.836C1511.31,396.807 1530.22,382.093 1549.84,382.093C1571.37,382.093 1591.4,394.167 1591.4,425.114L1591.4,535.309L1624.55,535.309L1624.55,425.114C1624.55,394.167 1644.59,382.093 1666.11,382.093C1685.74,382.093 1704.64,396.807 1704.64,419.836L1704.64,535.309L1737.79,535.309L1737.79,412.28C1737.79,378.323 1703.86,350.448 1666.85,350.448" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1035.53,350.391C991.375,350.391 958.17,382.091 958.17,429.64L958.17,535.309L991.375,535.309L991.375,429.64C991.375,401.709 1011.76,382.091 1035.53,382.091C1059.31,382.091 1079.69,401.709 1079.69,429.64L1079.69,535.309L1112.89,535.309L1112.89,429.64C1112.89,382.091 1079.69,350.391 1035.53,350.391" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1384.15,350.391C1364.9,350.391 1347.92,358.691 1337.73,370.018L1337.73,286.094L1304.53,286.094L1304.53,535.309L1337.73,535.309L1337.73,429.64C1337.73,401.709 1357.74,382.091 1381.88,382.091C1405.65,382.091 1426.04,392.658 1426.04,429.64L1426.04,535.309L1459.23,535.309L1459.23,429.64C1459.23,368.497 1426.04,350.391 1384.15,350.391" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M1221.43,504.258C1191.23,504.258 1164.79,474.387 1164.79,443.145C1164.79,411.201 1187.46,381.325 1220.76,381.325C1240.33,381.325 1249.96,386.485 1264.71,397.473L1284.63,374.803C1266.44,359.005 1244.46,350.425 1220.41,350.425C1168.23,350.425 1131.81,392.991 1131.81,444.177C1131.81,495.341 1174.4,535.181 1220.41,535.181C1246.18,535.181 1268.16,523.489 1285.67,505.294L1264.36,483.653C1252.34,495.341 1240,504.258 1221.43,504.258" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M169.817,346.619C178.469,346.577 187.232,346.648 196.042,346.619C195.966,368.719 195.918,390.34 195.918,410.342C195.918,479.414 252.095,535.587 321.148,535.587C390.196,535.587 446.365,479.414 446.365,410.342C446.365,341.302 390.196,285.239 321.148,285.239C303.12,285.239 280.716,285.157 257.149,285.239C257.178,276.443 257.123,267.688 257.149,259.011C280.737,258.939 303.063,259.011 321.148,259.011C404.658,259.011 472.597,326.848 472.597,410.342C472.597,493.86 404.658,561.803 321.148,561.803C237.633,561.803 169.693,493.86 169.693,410.342C169.693,390.311 169.75,368.699 169.817,346.619M169.873,302.63L196.201,302.63L196.201,328.841L169.873,328.841L169.873,302.63ZM170.05,259.012L196.369,259.012L196.369,285.246L170.05,285.246L170.05,259.012ZM213.551,346.448L239.648,346.448C239.57,368.63 239.517,390.238 239.517,410.342C239.517,455.366 276.141,491.977 321.148,491.977C366.144,491.977 402.767,455.366 402.767,410.342C402.767,365.349 366.144,328.868 321.148,328.868C302.981,328.868 280.852,328.793 257.149,328.868L257.149,302.63C280.75,302.549 303.105,302.63 321.148,302.63C380.538,302.63 428.855,350.955 428.855,410.342C428.855,469.746 380.538,518.077 321.148,518.077C261.754,518.077 213.428,469.746 213.428,410.342C213.428,390.325 213.477,368.581 213.551,346.448M213.609,302.63L239.709,302.63L239.709,328.841L213.609,328.841L213.609,302.63ZM213.777,259.012L239.981,259.012L239.981,285.246L213.777,285.246L213.777,259.012ZM257.149,346.373C280.893,346.296 302.968,346.373 321.148,346.373C356.496,346.373 385.256,375.009 385.256,410.342C385.256,445.706 356.496,474.467 321.148,474.467C285.794,474.467 257.034,445.706 257.034,410.342C257.034,390.21 257.081,368.589 257.149,346.373M152.178,410.342C152.178,503.511 227.979,579.324 321.148,579.324C414.311,579.324 490.107,503.511 490.107,410.342C490.107,317.187 414.311,241.398 321.148,241.398C303.078,241.398 152.704,241.914 152.704,241.914C152.704,241.914 152.178,390.333 152.178,410.342" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-152.178,-241.398)">
|
||||
<path d="M702.996,485.881C691.395,497.959 677.211,504.004 660.447,504.004C643.68,504.004 629.493,497.959 617.899,485.881C606.299,473.793 600.498,459.395 600.498,442.672L600.498,381.839L660.447,381.839C677.211,381.839 691.395,387.798 702.996,399.703C714.597,411.617 720.388,425.938 720.388,442.672C720.388,459.395 714.597,473.793 702.996,485.881M726.502,377.428C708.118,359.495 686.128,350.521 660.561,350.521L601.122,350.521L601.122,285.212L566.776,285.212L566.776,442.686C566.776,468.252 576.014,490.083 594.493,508.176C612.973,526.268 635.003,535.309 660.561,535.309C686.128,535.309 708.118,526.268 726.502,508.176C744.913,490.083 754.118,468.252 754.118,442.686C754.118,417.127 744.913,395.368 726.502,377.428" style="fill:rgb(27,27,27);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
1
assets/js/bootstrap.js
vendored
1
assets/js/bootstrap.js
vendored
|
|
@ -1 +0,0 @@
|
|||
window.$ = window.jQuery = require('jquery');
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
require('./bootstrap');
|
||||
|
||||
console.log( 'Barebones rocks! You are running jQuery version: ' + $.fn.jquery );
|
||||
BIN
assets/sass/.DS_Store
vendored
BIN
assets/sass/.DS_Store
vendored
Binary file not shown.
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
Theme Name: Barebones
|
||||
Theme URI: http://github.com/benchmarkstudios/barebones
|
||||
Author: Benchmark
|
||||
*/
|
||||
|
||||
@charset 'UTF-8';
|
||||
|
||||
// 1. Configuration
|
||||
@import
|
||||
'config/variables',
|
||||
'config/mixins';
|
||||
|
||||
// 2. Vendors
|
||||
@import
|
||||
'vendor/simple-grid/simple-grid';
|
||||
|
||||
// 3. Utilities
|
||||
@import
|
||||
'utils/reset',
|
||||
'utils/a11y',
|
||||
'utils/responsive',
|
||||
'utils/helpers';
|
||||
|
||||
// 4. Base stuff
|
||||
@import
|
||||
'base/base',
|
||||
'base/fonts',
|
||||
'base/images',
|
||||
'base/forms',
|
||||
'base/lists',
|
||||
'base/typography';
|
||||
|
||||
// 5. Layout-related sections
|
||||
@import
|
||||
'layout/main',
|
||||
'layout/header',
|
||||
'layout/footer';
|
||||
|
||||
// 6. Components
|
||||
@import
|
||||
'components/buttons',
|
||||
'components/nav',
|
||||
'components/alerts';
|
||||
|
||||
// 7. Page-specific styles
|
||||
@import
|
||||
'pages/home';
|
||||
BIN
assets/sass/utils/.DS_Store
vendored
BIN
assets/sass/utils/.DS_Store
vendored
Binary file not shown.
|
|
@ -1,7 +0,0 @@
|
|||
.sr-only {
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
1
assets/sass/vendor/simple-grid
vendored
1
assets/sass/vendor/simple-grid
vendored
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 4aee2627e323b19a70045a84adafc9f4fee44a6f
|
||||
3
assets/scripts/scripts.js
Normal file
3
assets/scripts/scripts.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
console.log($);
|
||||
4
assets/styles/components/_logo.scss
Normal file
4
assets/styles/components/_logo.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.logo {
|
||||
width: 250px;
|
||||
height: 41px;
|
||||
}
|
||||
20
assets/styles/core.scss
Executable file
20
assets/styles/core.scss
Executable file
|
|
@ -0,0 +1,20 @@
|
|||
@import 'config/variables';
|
||||
@import 'config/mixins';
|
||||
|
||||
// Vendors
|
||||
@import 'vendor/simple-grid/simple-grid';
|
||||
|
||||
// Utilities
|
||||
@import 'utils/reset';
|
||||
@import 'utils/responsive';
|
||||
@import 'utils/helpers';
|
||||
|
||||
// Base stuff
|
||||
@import 'base/base';
|
||||
@import 'base/fonts';
|
||||
@import 'base/images';
|
||||
@import 'base/forms';
|
||||
@import 'base/lists';
|
||||
@import 'base/typography';
|
||||
|
||||
@import 'components/logo';
|
||||
15
assets/styles/styles.scss
Executable file
15
assets/styles/styles.scss
Executable file
|
|
@ -0,0 +1,15 @@
|
|||
@import 'config/variables';
|
||||
@import 'config/mixins';
|
||||
|
||||
// Layout-related sections
|
||||
@import 'layout/main';
|
||||
@import 'layout/header';
|
||||
@import 'layout/footer';
|
||||
|
||||
// Components
|
||||
@import 'components/buttons';
|
||||
@import 'components/nav';
|
||||
@import 'components/alerts';
|
||||
|
||||
// Page-specific styles
|
||||
@import 'pages/home';
|
||||
1
assets/styles/vendor/simple-grid/.gitattributes
vendored
Normal file
1
assets/styles/vendor/simple-grid/.gitattributes
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
README export-ignore
|
||||
122
assets/styles/vendor/simple-grid/README.md
vendored
Normal file
122
assets/styles/vendor/simple-grid/README.md
vendored
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
# Just a simple grid
|
||||
|
||||
Based on existing grid systems, such as [Twitter Bootstrap Grid System](http://getbootstrap.com/css/#grid) and [csswizardry-grids](http://csswizardry.com/csswizardry-grids/), this is a fluid, flexible and responsive grid that can be scaled up to an arbitrary size, within the `$max-width` of your main `.container`. You also can easily and infinitly nest columns and rows, so you can build out complicated layouts without creating a lot of new custom elements. This is a grid system generated by Sass and it is based on [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
|
||||
|
||||
## Setup
|
||||
|
||||
The only thing you need to do to start building your grid is to adjust the number of `$grid-columns`, the desired `$gutter` and the main container `$max-width`.
|
||||
|
||||
## How it works
|
||||
|
||||
Grid systems, as you may know, are used for creating page layouts through a series of rows and columns that will host your content:
|
||||
|
||||
* Your `.row` element(s) must be placed within a `.container`, with a fixed `$max-width` for proper alignment. This elements will split up your page horizontally and will contain groups of `.col`.
|
||||
* Your content should be placed within the `.col` blocks, and only `.col` may be immediate children of `.row`.
|
||||
* You can nest `.row` and `.col` how many times you need, since you follow the previous standard.
|
||||
* Your `.col` width is defined by specifying the number of a single grid columns, in your total `$grid-columns`. For example, a `.col--*-4` will represent a width of 4 columns in your `$grid-columns` total.
|
||||
* To control your responsive grid, there are available three class prefixes: `.col--sm-*` for small devices, `.col-md-*` for medium devices and `.col--lg-*` for large devices. All together, in your `.col` element, it will make your grid respond to each one of your default media queries.
|
||||
* Finaly, you have the option to move columns to the right using `.col--*-offset-*` classes. These classes increase the left margin of a column by the number of columns you want. For example, `.col--*-offset-4` will push `.col-*-4` over four columns.
|
||||
|
||||
|
||||
## Markup
|
||||
|
||||
### Basic usage
|
||||
Simple column set - `<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12"></div>` - inside a `.row`.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 2</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 4</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 5</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-8 col--lg-8">
|
||||
<p>Col 7</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 8</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Offsetting columns
|
||||
Increase the left margin of a column by the number of columns you want, along with the responsive class prefixes, if you need.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 9 with offset 0</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4 col--xs-offset-4 col--sm-offset-0 col--md-offset-4 col--lg-offset-4">
|
||||
<p>Col 10 with offset 4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 11 with offset 3</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-6 col--lg-offset-6">
|
||||
<p>Col 12 with offset 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 13 with offset 3</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Nesting columns
|
||||
To nest your content, add a new `.row` inside a `.col`, and set of `.col-ld-*` columns within an existing `.col-ld-*` column. Nested rows should include a set of columns that add up to 12 or less.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 14</p>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.1</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Gutterless columns
|
||||
To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element.
|
||||
|
||||
```html
|
||||
<div class="row row--gutterless">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 15</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 16</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Demo
|
||||
Check out the demo and play around on [Code Pen](http://codepen.io/pedroreis/pen/ituho) and/or check the compiled CSS on [SassMeister](http://sassmeister.com/gist/c6368fc9a239e1798fcd).
|
||||
35
assets/styles/vendor/simple-grid/_defaults.scss
vendored
Normal file
35
assets/styles/vendor/simple-grid/_defaults.scss
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Space between columns
|
||||
*/
|
||||
|
||||
$grid-gutter: 20px !default;
|
||||
|
||||
|
||||
/**
|
||||
* Max width of container
|
||||
*/
|
||||
|
||||
$grid-max-width: 1200px + ($grid-gutter * 2) !default;
|
||||
|
||||
|
||||
/**
|
||||
* Number of total columns
|
||||
*/
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
|
||||
|
||||
/**
|
||||
* Breakpoints
|
||||
*/
|
||||
|
||||
$breakpoint-lg: 1200px !default;
|
||||
$breakpoint-md: 768px !default;
|
||||
$breakpoint-sm: 480px !default;
|
||||
|
||||
$breakpoints: (
|
||||
'lg' '(min-width: ' + $breakpoint-lg + ')',
|
||||
'md' '(min-width: ' + $breakpoint-md + ') and (max-width: ' + ($breakpoint-lg - 1) + ')',
|
||||
'sm' '(max-width:' + ($breakpoint-md - 1) + ')',
|
||||
'xs' '(max-width: ' + $breakpoint-sm + ')'
|
||||
) !default;
|
||||
32
assets/styles/vendor/simple-grid/_mixins.scss
vendored
Normal file
32
assets/styles/vendor/simple-grid/_mixins.scss
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* Grid loop mixin
|
||||
*/
|
||||
|
||||
@mixin grid-loop($name){
|
||||
@for $i from 0 through $grid-columns {
|
||||
@if $i != 0 {
|
||||
.col--#{$name}-#{$i} {
|
||||
width: percentage($i/$grid-columns);
|
||||
}
|
||||
}
|
||||
.col--#{$name}-offset-#{$i} {
|
||||
margin-left: percentage($i/$grid-columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
52
assets/styles/vendor/simple-grid/simple-grid.scss
vendored
Normal file
52
assets/styles/vendor/simple-grid/simple-grid.scss
vendored
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* Default variables and helper mixins
|
||||
*/
|
||||
|
||||
@import
|
||||
'defaults',
|
||||
'mixins';
|
||||
|
||||
|
||||
/**
|
||||
* Grid scaffolding
|
||||
*/
|
||||
|
||||
.container {
|
||||
@include clearfix;
|
||||
max-width: $grid-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $grid-gutter;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
margin-left: -$grid-gutter;
|
||||
&.row--gutterless {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
padding-left: $grid-gutter;
|
||||
box-sizing: border-box;
|
||||
.row--gutterless & {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Columns generator
|
||||
*/
|
||||
|
||||
@each $breakpoint in $breakpoints {
|
||||
$name: nth($breakpoint, 1);
|
||||
$declaration: nth($breakpoint, 2);
|
||||
|
||||
@media only screen and #{$declaration} {
|
||||
@include grid-loop($name);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue