Skip to content

a carefully considered set of style rules to make baby-talking to computers, notably more fun.

License

Notifications You must be signed in to change notification settings

sheriffderek/basic-style

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

basic | style

a carefully considered set of rules and mixins for people who like stylus and style-guide driven visual design

EDIT: This was pre-flex box... so - it's just for the memories now. ; )

  1. written with stylus
  2. assumes auto-prefixing will occur
  3. disregards the Microsoft's Internet Explorer web browser

markup

<section class='container basic-example'>
<div class='inner-w'>
	
	<div class='block'>
		<div class='image-w'>
			<img src='{...}' alt='{...}'>
		</div>
		<div class='text-w'>
			<h2>Heading {...}</h2>
			<p>Copy {...}</p>
		</div>
	</div>

	<div class='block'>
		<div class='image-w'>
			<img src='{...}' alt='{...}'>
		</div>
		<div class='text-w'>
			<h2>Heading {...}</h2>
			<p>Copy {...}</p>
		</div>
	</div>

</div>
</section>

stylus

.inner-w
	max-width 800px
	padding $pad

.basic-example
	background $highlight
	.block
		background $color
		color $white
		padding $pad
		h2 //
			medium-type()
		@media $break-point-3
			split-in(2)

.
@sheriffderek

About

a carefully considered set of style rules to make baby-talking to computers, notably more fun.

Resources

License

Stars

Watchers

Forks

Packages

No packages published