2
\$\begingroup\$

I've been learning Sass recently and I've made a small project to master key concepts. I've tried to use placeholder to make different styles of boxes. I have a few questions:

  • is the project generally correct (metodology, semantics, sass structure)?
  • is it right to use nested style in placeholder (.icon in %feature-box in my case)? If not, how can I address this problem?
  • for .feature-box-icon-right and .feature-box-icon-left i've made new block formatting context by adding 'overflow: hidden' to paragraph in order to leave space under icon blank but I've repeated the line in declarations; how can I make it better?

Here's a pen.

Here's the HTML for one section:

<section id="icons-left">
  <h2>Icons on the left</h2>
  <div class="container">
    <div class="feature-box-icon-left">
      <i class="icon ion-flag"></i>
      <h3 class="title">Some title</h3>
      <!-- /.title -->
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>
      <!-- /.content -->
    </div>
    <!-- /.feature-box -->
    <div class="feature-box-icon-left">
      <i class="icon ion-compose"></i>
      <h3 class="title">Some title</h3>
      <!-- /.title -->
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>
      <!-- /.content -->
    </div>
    <!-- /.feature-box -->
    <div class="feature-box-icon-left">
      <i class="icon ion-refresh"></i>
      <h3 class="title">Some title</h3>
      <!-- /.title -->
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>
      <!-- /.content -->
    </div>
    <!-- /.feature-box -->
    <div class="feature-box-icon-left">
      <i class="icon ion-checkmark"></i>
      <h3 class="title">Some title</h3>
      <!-- /.title -->
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>
      <!-- /.content -->
    </div>
    <!-- /.feature-box -->
    <div class="feature-box-icon-left">
      <i class="icon ion-search"></i>
      <h3 class="title">Some title</h3>
      <!-- /.title -->
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>
      <!-- /.content -->
    </div>
    <!-- /.feature-box -->
    <div class="feature-box-icon-left">
      <i class="icon ion-paper-airplane"></i>
      <h3 class="title">Some title</h3>
      <!-- /.title -->
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tincidunt erat. Curabitur elementum nulla eget est ornare venenatis. Sed id turpis ex. Pellentesque massa nunc. </p>
      <!-- /.content -->
    </div>
    <!-- /.feature-box -->
  </div>
  <!-- /.container -->
</section>
<!-- /#icons-left -->

Sass

@import 'compass';
@import 'compass/reset';
$bg-color: #efefef;
$color-primary: #090;
$color-secondary: #333;
$container-width: 960px;
$feature-box-width: 33.333%;
$feature-box-gutter: 15px;
$icon-font-size: 50px;
$icon-margin: 15px;

* {
  box-sizing: border-box;
}

body {
  background: $bg-color;
  font: {
    family: 'Open Sans', sans-serif;
    size: 14px;
    weight: 300;
  }
  line-height: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 7px 0;
  font-weight: 600;
  color: $color-primary;
}

h2 {
  font-size: 25px;
  line-height: 30px;
}

h3 {
  font-size: 20px;
  line-height: 25px;
}

section {
  padding: 30px 0;
  h2 {
    text-align: center;
    background: darken($bg-color, 10%);
    padding: 10px 0;
  }
}

.container {
  max-width: $container-width;
  margin: 0 auto;
  @include clearfix;
}

%feature-box {
  width: $feature-box-width;
  padding: $feature-box-gutter;
  float: left;
  .icon {
    font-size: $icon-font-size;
    color: $color-primary;
  }
  &.offset {
    margin-left: $feature-box-width;
  }
}

.feature-box-icon-left {
  @extend %feature-box;
  .icon {
    float: left;
    margin-right: $icon-margin;
  }
  .title,
  .content {
    overflow: hidden;
  }
}
.feature-box-icon-right {
  @extend %feature-box;
  .icon {
    float: right;
    margin-left: $icon-margin;
  }
  .title,
  .content {
    overflow: hidden;
    text-align: right;
  }
}
.feature-box-icon-top {
  @extend %feature-box;
  text-align: center;
}

Complied CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
}

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 7px 0;
  font-weight: 600;
  color: #090;
}

h2 {
  font-size: 25px;
  line-height: 30px;
}

h3 {
  font-size: 20px;
  line-height: 25px;
}

section {
  padding: 30px 0;
}
section h2 {
  text-align: center;
  background: #d6d6d6;
  padding: 10px 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}

.feature-box-icon-left, .feature-box-icon-right, .feature-box-icon-top {
  width: 33.333%;
  padding: 15px;
  float: left;
}
.feature-box-icon-left .icon, .feature-box-icon-right .icon, .feature-box-icon-top .icon {
  font-size: 50px;
  color: #090;
}
.offset.feature-box-icon-left, .offset.feature-box-icon-right, .offset.feature-box-icon-top {
  margin-left: 33.333%;
}

.feature-box-icon-left .icon {
  float: left;
  margin-right: 15px;
}
.feature-box-icon-left .title,
.feature-box-icon-left .content {
  overflow: hidden;
}

.feature-box-icon-right .icon {
  float: right;
  margin-left: 15px;
}
.feature-box-icon-right .title,
.feature-box-icon-right .content {
  overflow: hidden;
  text-align: right;
}

.feature-box-icon-top {
  text-align: center;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.