Skip to content

Commit

Permalink
checking back in...
Browse files Browse the repository at this point in the history
  • Loading branch information
sheriffderek committed Mar 7, 2015
1 parent 58e57c4 commit bc2082e
Show file tree
Hide file tree
Showing 1,484 changed files with 111,707 additions and 8,177 deletions.
119 changes: 108 additions & 11 deletions app/assets/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,132 @@
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<meta charset='utf-8'> <!-- should be set in .htaccess -->

<title>basic-style</title>

<meta name='description' content='A carefully considered set of styles written with Stylus.' />
<meta name='description' content='A carefully considered set of CSS rules written in Stylus.'>

<meta name='viewport' content='initial-scale=1, maximum-scale=1' />
<link rel='stylesheet' href='styles/basic.css' />
<meta name='viewport' content='initial-scale=1, maximum-scale=1'>

<link rel='stylesheet' href='stylesheets/app.css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- ▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽ -->



<header class="container masthead">
<div class="inner-w">
<header class='container masthead'>
<div class='inner-w'>

<h1>basic-style</h1>

<!--
this is just for example
-->

</div>
</header>


<section class="container welcome">
<div class="inner-w">

<h2>Welcome</h2>
<section class='container basic-swatches'>
<div class='black'>$black</div>
<div class='white'>$white</div>
<div class='gray-lighter'>$gray-lighter</div>
<div class='gray-light'>$gray-light</div>
<div class='gray'>$gray</div>
<div class='gray-dark'>$gray-dark</div>
<div class='color-light'>$color-light</div>
<div class='color'>$color</div>
<div class='color-dark'>$color-dark</div>
<div class='highlight-light'>$highlight-light</div>
<div class='highlight'>$highlight</div>
<div class='highlight-dark'>$highlight-dark</div>
<div class='alternate-light'>$alternate-light</div>
<div class='alternate'>$alternate</div>
<div class='alternate-dark'>$alternate-dark</div>
</section>



<section class='container basic-example'><span>.container</span>
<div class='inner-w'><span>.inner-w</span>

<div class='block'><span>.block</span>
<div class='image-w'><span>.image-w</span>
<img src='http://placehold.it/1600x900' alt=''>
</div>
<div class='text-w'><span>.text-w</span>
<h2>example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel architecto dolorem asperiores, veritatis ab nulla quam similique mollitia. Nihil ducimus, placeat dolores rem consectetur dolorem quia, quo ipsam debitis&nbsp;et.</p>
</div>
</div>

<div class='block'><span>.block</span>
<div class='image-w'><span>.image-w</span>
<img src='http://placehold.it/1600x900' alt=''>
</div>
<div class='text-w'><span>.text-w</span>
<h2>example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel architecto dolorem asperiores, veritatis ab nulla quam similique mollitia. Nihil ducimus, placeat dolores rem consectetur dolorem quia, quo ipsam debitis&nbsp;et.</p>
</div>
</div>

<div class='block'><span>.block</span>
<div class='image-w'><span>.image-w</span>
<img src='http://placehold.it/1600x900' alt=''>
</div>
<div class='text-w'><span>.text-w</span>
<h2>example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel architecto dolorem asperiores, veritatis ab nulla quam similique mollitia. Nihil ducimus, placeat dolores rem consectetur dolorem quia, quo ipsam debitis&nbsp;et.</p>
</div>
</div>

</div>
</section>



<div class='container editorial-example'>
<div class='inner-w'>

<article>

<h1>Heading level 1</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, amet libero tenetur fuga quis voluptas ipsam deserunt. Dicta, animi! Minima, eos eius deserunt est ipsum reiciendis laboriosam blanditiis vitae fugiat.</p>

<h2>Heading level 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore delectus veniam voluptas sint quo, magnam impedit. Dicta accusantium, in et ab distinctio. Esse quisquam fugit molestiae atque deleniti vitae animi!</p>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dicta, atque. Nostrum voluptatibus, tenetur iste, reiciendis architecto eum distinctio praesentium, saepe numquam natus veritatis officia quo cum magni sunt necessitatibus!</p>

<h5>Heading level 5</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis pariatur, reprehenderit fuga accusamus quae, molestiae voluptas culpa beatae illo alias. Enim hic quasi perferendis cumque dolorem debitis aliquam eum fugit!</p>

<h6>Heading level 6</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quaerat similique nihil architecto, accusantium minima temporibus! Aliquam eius, voluptatum earum neque ad, a consectetur excepturi harum consequatur provident libero beatae.</p>



</article>

</div>
</div>



<!-- △△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△ -->
<div class='media-size-helper'></div>
<script src='javascripts/vendor.js'></script>

</body>
</html>
</html>
10 changes: 6 additions & 4 deletions app/stylus/_basic.styl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@

// box-model reset
html
box-sizing border-box

*, *:before, *:after
box-sizing border-box
box-sizing inherit

// clear-fix
clear-fix()
Expand All @@ -12,7 +15,6 @@ clear-fix()

// body
body
margin 0
clear-fix()
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
Expand Down Expand Up @@ -56,10 +58,10 @@ center-block()
// that invisible column
.inner-w
center-block()
max-width 800px // arbitrary
max-width 800px // arbitrary: override in _style
clear-fix()

full-width() // keep it in the styles
full-width() // to keep it in the styles when possible
max-width 100%
padding 0

Expand Down
28 changes: 23 additions & 5 deletions app/stylus/_break-points.styl
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,29 @@

$thing = 15em // arbitrary break point unit
/*
break-points
breakpoint-1 = "screen and ( min-width: ($thing*2.2) )"
breakpoint-2 = "screen and ( min-width: ($thing*3.5) )"
breakpoint-3 = "screen and ( min-width: ($thing*4.5) )"
breakpoint-4 = "screen and ( min-width: ($thing*6) )"
base these on when things get ugly
and not any 'ipad' device specific stuff...
*/

$bp-1 = 500px
$bp-2 = 700px
$bp-3 = 1000px
$bp-4 = 1300px
$bp-5 = 1700px
$bp-6 = 2100px
$bp-7 = 2400px
$bp-8 = 2700px
$bp-9 = 3000px

break-point-1 = 'screen and ( min-width: ($bp-1) )'
break-point-2 = 'screen and ( min-width: ($bp-2) )'
break-point-3 = 'screen and ( min-width: ($bp-3) )'
break-point-4 = 'screen and ( min-width: ($bp-4) )'
break-point-5 = 'screen and ( min-width: ($bp-5) )'
break-point-6 = 'screen and ( min-width: ($bp-6) )'
break-point-7 = 'screen and ( min-width: ($bp-7) )'
break-point-8 = 'screen and ( min-width: ($bp-8) )'
break-point-9 = 'screen and ( min-width: ($bp-9) )'

14 changes: 5 additions & 9 deletions app/stylus/_components.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,9 @@
tap-area()
min-width 160px
text-align center
&.light
background $color
&.dark
background $highlight

// styles
.one
background $color

.two
background $gray-light

.thing
color red
// reusable components can live here...
4 changes: 4 additions & 0 deletions app/stylus/_dev-helpers.styl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@

/*! development helpers */
@import 'helpers/_type-hierarchy-helper'
@import 'helpers/_break-point-helper'
5 changes: 1 addition & 4 deletions app/stylus/_icons.styl
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

// base icons styles
// base icons styles (fontastic.me)
[class^="icon-"], [class*=" icon-"]
display inline-block
fill currentColor
Expand Down Expand Up @@ -37,6 +37,3 @@ $extra-large-icon-size = 90px
extra-large-icon()
width $extra-large-icon-size
height $extra-large-icon-size



10 changes: 5 additions & 5 deletions app/stylus/_mixins.styl
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

// wireframes
// set temp wireframes true/false
wire-frames(wire-frames-on = false)
if wire-frames-on
border 1px solid rgba(0,0,0,.05)
Expand All @@ -8,10 +8,10 @@ wire-frames(wire-frames-on = false)
margin-bottom $padding
border 1px solid rgba(0,0,0,.1)

* // set wireframes
* // set temp frames to everything
wire-frames()

// simplify position syntax
// simplified position syntax
static()
position static

Expand All @@ -26,12 +26,13 @@ fixed()

// vertically align buddy elements
balance()
float none // to be sure there is no float
float none // to be *sure there is no float
display inline-block
vertical-align middle

// absolutly center
center-center()
float none
absolute()
margin auto
top 50%
Expand All @@ -47,4 +48,3 @@ $tap = 44px
tap-area()
min-width $tap
min-height $tap

Loading

0 comments on commit bc2082e

Please sign in to comment.