Skip to content

Instantly share code, notes, and snippets.

@faelplg

faelplg/app_base.scss

Last active December 6, 2019 03:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save faelplg/a69932a5c0a7e43e6065efbab7da4cd2 to your computer and use it in GitHub Desktop.
Save faelplg/a69932a5c0a7e43e6065efbab7da4cd2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app_base.scss
////
/// @group base
/// @author faelplg
////
$phone_only: 599px;
$tablet_portrait_min: 600px;
$tablet_portrait_max: 899px;
$tablet_landscape_min: 900px;
$tablet_landscape_max: 1199px;
$desktop_min: 1200px;
$desktop_max: 1799px;
$big_desktop_min: 1800px;
/// Remove overflow from the elements html and body.
html, body {
overflow: hidden;
}
/// Set section and wrapper to overflow vertically.
section, .wrapper {
overflow-y: auto;
overflow-x: hidden;
}
/// Normalize the height of the main structures with the height of the viewport.
html, body, .wrapper {
height: 100vh;
}
/// Set wrapper to have a relative position to act as a parent of all structures.
.wrapper {
position: relative;
}
/// Set native containers to have border-box value for box-sizing property.
div, section, header, aside, fieldset {
box-sizing: border-box;
}
/// Container class.
.container {
padding: 16px;
position: relative;
}
/* --tablet-portrait-max */
@media only screen and (max-width: 1199px) {
.container {
padding: 8px;
}
}
/// A container with dense padding size. Commonly used for mobile structures.
.container--dense {
padding: 8px;
}
/// A container without paddings.
.container--raw {
padding: 0;
}
/// Vertical scrolling.
.container--scroll-y {
overflow-y: auto;
}
/// Horizontal scrolling.
.container--scroll-x {
overflow-x: auto;
}
/// No scrolling.
.container--no-scroll {
overflow: unset;
}
/// Flexible class.
.flex {
display: flex;
}
/// Inline flexible container.
.inline-flex {
display: inline-flex;
}
/// A container with vertical orientation for flexible containers.
///
/// This orientation is set as default for flexible containers.
.flex, .flow--column {
flex-flow: column;
}
/// A vertical orientation with wrap property for flexible containers.
.flow--column-wrap {
flex-flow: column wrap;
}
/// Horizontal orientation for flexible containers.
.flow--row {
flex-flow: row;
}
/// Horizontal orientation with wrap property for flexible containers.
.flow--row-wrap {
flex-flow: row wrap;
}
/// Flexible container responsivity following the device orientation preference.
.flow--mobile, .flow--tablet, .flow--default {
flex-flow: row;
}
/* --phone-only */
@media only screen and (max-width: 599px) {
.flow--mobile, .flow--tablet, .flow--default {
flex-flow: column;
}
}
/* --tablet-portrait-min to --tablet-portrait-max */
@media only screen and (min-width: 600px) and (max-width: 899px) {
.flow--tablet, .flow--default {
flex-flow: column;
}
}
/* --tablet-landscape-min to --tablet-landscape-max */
@media only screen and (min-width: 900px) and (max-width: 1199px) {
.flow--default {
flex-flow: column;
}
}
/// Flexible box with auto-grow property.
.flex__item {
flex: auto;
}
/// Flexible box with no shrink property.
.flex__item--initial {
flex: initial;
}
.flex__item--none {
flex: none;
}
/// Flexible box will be sent to first position.
.flex__item--first {
order: -1;
}
/// ## Element alignment
///
/// Align element at the start of the parent container.
.align-items--start {
align-items: flex-start;
}
/// ## Element alignment
///
/// Align element at the center of the parent container.
.align-items--center {
align-items: center;
}
/* --phone-only */
@media only screen and (max-width: 599px) {
/// ## Element alignment
///
/// Align element at the center of the parent container only in mobile devices.
.align-mobile-items--center {
align-items: center;
}
}
/// ## Element alignment
///
/// Align element at the end of the parent container.
.align-items--end {
align-items: flex-end;
}
.justify-content--start {
justify-content: flex-start;
}
.justify-content--center {
justify-content: center;
}
// Phone only
@media only screen and (max-width: 599px) {
.justify-mobile-content--center {
justify-content: center;
}
}
.justify-content--end {
justify-content: flex-end;
}
/// ## Element size
///
/// Set the element height of 100% of the viewport.
.height--viewport-full {
height: 100vh;
}
/// ## Element size
///
/// Set the element height of 100% of the parent.
.height--parent-full {
height: 100%;
}
/// ## Element size
///
/// Set the element width of 100% of the viewport.
.width--viewport-full {
width: 100vw;
}
/* --phone-only */
@media only screen and (max-width: 599px) {
.width--phone-viewport-full {
width: 100vw;
}
}
/// ## Element size
///
/// Set the element width of 100% of the parent.
.width--parent-full {
width: 100%;
}
/*
* Container styles
*/
.page__content {
// phones
@media (max-width:$phone_only) {
padding: 0 10px;
}
// tablet portrait
@media (min-width: $tablet_portrait_min) and (max-width: $tablet_portrait_max) {
padding: 0 40px;
}
// tablet landscape
@media (min-width: $tablet_landscape_min) and (max-width: $tablet_landscape_max) {
padding: 0 60px;
}
// desktops
@media (min-width: $desktop_min) and (max-width: $desktop_max) {
padding: 0 220px;
}
// large desktops
@media (min-width: $big_desktop_min) {
padding: 0 300px;
}
}
.content--padding {
box-sizing: border-box;
padding: 8px;
@media (min-width: 960px) {
padding: 16px;
}
}
.content--margin {
margin: 8px;
@media (min-width: 960px) {
margin: 16px;
}
}
/*
* Icon style
*/
.icon {
height:60px;
width:60px;
margin: 0px 8px;
// phones
@media (max-width:$phone_only) {
height:60px;
width:60px;
}
// tablet portrait
@media (min-width: $tablet_portrait_min) and (max-width: $tablet_portrait_max) {
height:75px;
width:75px;
}
// tablet landscape
@media (min-width: $tablet_landscape_min) and (max-width: $tablet_landscape_max) {
height:80px;
width:80px;
}
// desktops
@media (min-width: $desktop_min) and (max-width: $desktop_max) {
height:95px;
width:95px;
}
// large desktops
@media (min-width: $big_desktop_min) {
height:100px;
width:100px;
}
}
/*
* Tables
*/
table {
@media (max-width:$phone_only) {
display: none;
}
}
tr > th,
tr > td {
padding: 16px;
}
/// ## Spacement utility
///
/// Set the paddings and margins.
.m--sm {
margin: 4px;
}
.m {
margin: 8px;
}
.m--lg {
margin: 16px;
}
.m-l--sm {
margin-left: 4px;
}
.m-l {
margin-left: 8px;
}
.m-l--lg {
margin-left: 16px;
}
.m-t--sm {
margin-top: 4px;
}
.m-t {
margin-top: 8px;
}
.m-t--lg {
margin-top: 16px;
}
.m-r--sm {
margin-right: 4px;
}
.m-r {
margin-right: 8px;
}
.m-r--lg {
margin-right: 16px;
}
.m-b--sm {
margin-bottom: 4px;
}
.m-b {
margin-bottom: 8px;
}
.m-b--lg {
margin-bottom: 16px;
}
.m--none {
margin: 0;
}
// @import './layout/layout.scss';
// @import './components/components.scss';
// @import './states/states.scss';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment