Congegni/barebones
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merged v3 into master

Browse source
This commit is contained in:
Pedro Reis 2019-01-08 11:10:57 +00:00
commit 20d55874a9
69 changed files with 1305 additions and 593 deletions
Download patch file Download diff file Expand all files Collapse all files

54
assets/styles/base/_base.scss Executable file
View file

@ -0,0 +1,54 @@
body {
color: $base-colour;
font-family: $base-font-family;
line-height: $base-line-height;
text-size-adjust: none;
@include font-size($base-font-size);
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
ul,
ol,
dl {
margin-bottom: $base-spacing-unit;
&:last-child {
margin-bottom: 0;
}
}
/**
* Basic styles for links
*/
a {
color: $brand-colour;
text-decoration: none;
&:hover {
color: $base-colour;
text-decoration: underline;
}
}
a[href^="tel"] {
font-size: inherit;
font-family: inherit;
color: inherit;
text-decoration: none;
font-style: inherit;
}
/**
* Rules
*/
hr {
height: 1px;
background-color: $base-colour;
}

3
assets/styles/base/_fonts.scss Executable file
View file

@ -0,0 +1,3 @@
/**
* This file contains all @font-face declarations, if any.
*/

76
assets/styles/base/_forms.scss Executable file
View file

@ -0,0 +1,76 @@
*:focus {
outline: 0;
}
input,
select,
textarea {
background-color: $base-background-colour;
border: solid 1px $base-colour;
border-radius: 0;
color: $base-colour;
line-height: $base-spacing-unit * 1.5;
height: $base-spacing-unit * 1.5;
padding: 0 #{$base-spacing-unit / 2};
width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
background: transparent;
border: 0;
line-height: normal;
height: auto;
width: auto;
}
input[type="file"] {
line-height: normal;
height: auto;
padding: #{$base-spacing-unit / 4} #{$base-spacing-unit / 2};
}
input[type="submit"] {
border-radius: 0;
}
input[disabled] {
background-color: whitesmoke;
cursor: not-allowed;
}
select {
line-height: normal;
padding: 0;
padding-left: $base-spacing-unit / 2;
}
textarea {
min-height: $base-spacing-unit * 4;
overflow: auto;
vertical-align: top;
resize: vertical;
}
/**
* Form utility classes
*/
.form--inline {
.form__group {
display: inline-block;
}
}
.form {
.form__group {
display: block;
margin-bottom: $base-spacing-unit;
.form__label {
display: block;
margin-bottom: ($base-spacing-unit / 2);
}
}
}

16
assets/styles/base/_images.scss Executable file
View file

@ -0,0 +1,16 @@
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
/**
* Responsive images
*/
.is-fluid {
display: block;
width: 100%;
height: auto;
}

16
assets/styles/base/_lists.scss Executable file
View file

@ -0,0 +1,16 @@
ul,
ol {
margin-left: $base-spacing-unit;
}
li {
> ul,
> ol {
margin-bottom: 0;
}
}
.list--unstyled {
margin-left: 0;
list-style: none;
}

17
assets/styles/base/_typography.scss Executable file
View file

@ -0,0 +1,17 @@
h1,
h2,
h3,
h4,
h5,
h6,
strong {
font-weight: bold;
}
em {
font-style: italic;
}
small {
font-size: .75em;
}

34
assets/styles/components/_alerts.scss Executable file
View file

@ -0,0 +1,34 @@
.alert {
padding: $base-spacing-unit;
margin-bottom: $base-spacing-unit;
border: 1px solid transparent;
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: $base-spacing-unit;
}
&.alert--success {
color: $success-colour;
border-color: $success-colour;
}
&.alert--info {
color: $info-colour;
border-color: $info-colour;
}
&.alert--warning {
color: $warning-colour;
border-color: $warning-colour;
}
&.alert--danger {
color: $danger-colour;
border-color: $danger-colour;
}
}

59
assets/styles/components/_buttons.scss Executable file
View file

@ -0,0 +1,59 @@
.btn {
background-color: $brand-colour;
color: $base-background-colour;
border: 1px solid transparent;
display: inline-block;
padding: #{$base-spacing-unit / 4} $base-spacing-unit;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
width: auto;
transition: all .5s;
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:hover {
text-decoration: none;
background-color: $base-background-colour;
color: $brand-colour;
border-color: $brand-colour;
}
&.is-disabled,
&:disabled {
pointer-events: none;
opacity: .65;
}
}
.btn--inverse {
background-color: $base-background-colour;
color: $brand-colour;
border: 1px solid $brand-colour;
&:hover {
background-color: $brand-colour;
color: $base-background-colour;
border-color: transparent;
}
}
.btn--block {
display: block;
width: 100%;
+ .btn--block {
margin-top: $base-spacing-unit / 4;
}
}
.btn--link {
background-color: transparent;
color: $brand-colour;
}

107
assets/styles/components/_nav.scss Executable file
View file

@ -0,0 +1,107 @@
/**
* Hamburger menu
*/
.nav-burger {
position: fixed;
top: $base-spacing-unit;
right: $base-spacing-unit;
z-index: 550;
transition: all $animation-speed $animation;
}
.nav-burger__line {
width: 35px;
height: 3px;
background-color: $brand-colour;
display: none;
margin: 8px auto;
transition: all $animation-speed $animation;
@include resp-max($breakpoint-md) {
display: block;
}
.nav-burger.open & {
&:nth-child(2) {
opacity: 0;
}
&:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
&:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
}
}
/**
* Navs
*/
.nav {
list-style: none;
margin: 0;
> li {
display: inline-block;
margin-right: $base-spacing-unit;
&:last-child {
margin-right: 0;
}
> a {
display: block;
}
}
}
.nav--header {
// mobile nav
@include resp-max($breakpoint-md) {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
width: 0;
height: 100%;
margin: 0;
transition: opacity 500ms ease;
transition: opacity .35s ease, visibility .35s ease, width .35s ease;
text-align: center;
opacity: 0;
background: $base-background-colour;
-webkit-overflow-scrolling: touch;
&.open {
z-index: 500;
visibility: visible;
width: 100%;
opacity: 1;
ul {
position: absolute;
top: 50%;
left: 0;
overflow: auto;
width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
user-select: none;
transform: translateY(-50%);
-webkit-touch-callout: none;
-webkit-overflow-scrolling: touch;
> li {
width: 100%;
margin: 0;
}
}
}
}
}

60
assets/styles/config/_mixins.scss Executable file
View file

@ -0,0 +1,60 @@
/*
* Media query to respond to a minimum size (mobile first)
*/
@mixin resp-min($size) {
@media screen and (min-width: $size) {
@content;
}
}
/*
* Media query to respond to a maximum size
*/
@mixin resp-max($size) {
@media screen and (max-width: $size) {
@content;
}
}
/*
* Output font size in px/rem
*/
@mixin font-size($px) {
font-size: $px + px;
font-size: #{$px / 16}rem;
}
/*
* Placeholder mixin for <input>
*/
@mixin placeholder {
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@each $placeholder in $placeholders {
&:#{$placeholder}-placeholder {
@content;
}
}
}
/**
* Clearfix
*/
@mixin clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

63
assets/styles/config/_variables.scss Executable file
View file

@ -0,0 +1,63 @@
/**
* Colours
*/
$base-colour: #444;
$base-background-colour: #fff;
$brand-colour: #444; // Example
$success-colour: #5CB85C;
$info-colour: $brand-colour;
$warning-colour: #F0AD4E;
$danger-colour: #D9534F;
/**
* Typography
*/
$sans-serif-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$serif-font-family: Georgia, "Times New Roman", Times, serif;
$base-font-family: $sans-serif-font-family;
$base-font-size: 16;
$base-line-height: 1.5;
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;
/**
* Breakpoints
*/
$breakpoint-lg: 1200px;
$breakpoint-md: 768px;
$breakpoint-sm: 480px;
$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 + ')'
);
/**
* Grid
*/
$grid-max-width: 1200px;
$grid-columns: 12;
$grid-gutter: $base-spacing-unit;
/**
* Components
*/
$border-radius: 3px;
/**
* Animations
*/
$animation-speed: 250ms;
$animation: ease-in-out;

0
assets/styles/layout/_footer.scss Executable file
View file

1
assets/styles/layout/_header.scss Executable file
View file

@ -0,0 +1 @@

0
assets/styles/layout/_main.scss Executable file
View file

0
assets/styles/pages/_home.scss Executable file
View file

34
assets/styles/styles.scss Executable file
View file

@ -0,0 +1,34 @@
@charset 'UTF-8';
// 1. Configuration
@import 'config/variables';
@import 'config/mixins';
// 2. Vendors
@import 'vendor/simple-grid/simple-grid';
// 3. Utilities
@import 'utils/reset';
@import 'utils/responsive';
@import 'utils/helpers';
// 4. Base stuff
@import 'base/base';
@import 'base/fonts';
@import 'base/images';
@import 'base/forms';
@import 'base/lists';
@import 'base/typography';
// 5. Layout-related sections
@import 'layout/main';
@import 'layout/header';
@import 'layout/footer';
// 6 .Components
@import 'components/buttons';
@import 'components/nav';
@import 'components/alerts';
// 7. Page-specific styles
@import 'pages/home';

102
assets/styles/utils/_helpers.scss Executable file
View file

@ -0,0 +1,102 @@
/**
* Clearing and floating
*/
.alignleft,
.float-left {
float: left;
img & {
margin-right: $base-spacing-unit;
}
}
.alignright,
.float-right {
float: right;
img & {
margin-left: $base-spacing-unit;
}
}
.aligncenter,
.float-center {
display: block;
margin: {
left: auto;
right: auto;
}
img & {
margin-bottom: $base-spacing-unit;
}
}
.clearfix {
@include clearfix;
}
/**
* Text aligments
*/
.align-text-left {
text-align: left;
}
.align-text-right {
text-align: right;
}
.align-text-center {
text-align: center;
}
/**
* Elements visibility
*/
.visible-on-mobile {
display: none !important;
@include resp-max($breakpoint-sm) {
display: block !important;
}
}
.visible-on-tablet {
display: none !important;
@include resp-max($breakpoint-md) {
display: block !important;
}
@include resp-max($breakpoint-sm) {
display: none !important;
}
}
.visible-on-desktop {
@include resp-max($breakpoint-md) {
display: none !important;
}
}
/**
* Accessibility
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

44
assets/styles/utils/_reset.scss Executable file
View file

@ -0,0 +1,44 @@
* {
background-color: transparent;
border: 0;
box-sizing: border-box;
font: inherit;
margin: 0;
padding: 0;
}
html {
background-color: white;
font-size: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
input,
select,
textarea,
button {
color: inherit;
display: inline-block;
&[disabled] {
cursor: not-allowed;
}
}
button {
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0;
th,
td {
text-align: left;
}
}

16
assets/styles/utils/_responsive.scss Executable file
View file

@ -0,0 +1,16 @@
@each $breakpoint in $breakpoints {
$key : nth($breakpoint, 1);
$value : nth($breakpoint, 2);
.visible-#{$key} {
@media only screen and #{$value} {
display: block !important;
}
}
.hidden-#{$key} {
@media only screen and #{$value} {
display: none !important;
}
}
}

1
assets/styles/vendor/simple-grid/.gitattributes vendored Executable file
View file

@ -0,0 +1 @@
README export-ignore

122
assets/styles/vendor/simple-grid/README.md vendored Executable file
View 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 Executable file
View 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;

38
assets/styles/vendor/simple-grid/_mixins.scss vendored Executable file
View file

@ -0,0 +1,38 @@
/**
* 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);
.row--flex & {
flex-basis: percentage($i/$grid-columns);
max-width: percentage($i/$grid-columns);
width: auto;
float: none;
}
}
}
.col--#{$name}-offset-#{$i} {
margin-left: percentage($i/$grid-columns);
}
}
}
/**
* Clearfix
*/
@mixin clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

58
assets/styles/vendor/simple-grid/simple-grid.scss vendored Executable file
View file

@ -0,0 +1,58 @@
/**
* 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 {
list-style: none;
margin-left: -$grid-gutter;
&:not(.row--flex) {
@include clearfix;
}
&.row--gutterless {
margin-left: 0;
}
&.row--flex {
display: flex;
flex-wrap: wrap;
}
}
.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);
}
}