Also available from Heart Internet
Show
Show
Sculpt is a powerful, flexible and fast tool but it doesn't try to do too much for you. You won't spend time stripping out things you don't need, which will give you more time to design the site you need and lay it over a lightweight, modular framework.
Here are the basics
Sculpt is modular by nature, so you only drop onto the page the elements you need to use. The basic structure of a content block looks like this
<div class="container">
<div class="column twelve">
This is some content.
</div>
</div>
Which will look something like this:
(note, all example columns have a background colour and extra margin applied for illustrative purposes)
The class declarations follow the rule type | format | size. In this instance we only have type and size.
You don't have to stick to a full-width column, though. Should you want to segment your content, you can specify a different column width. As long as adjacent columns add up to twelve, the layout will behave as expected.
<div class="container">
<div class="column six">
This is six column widths.
</div>
<div class="column three">
This is three column widths.
</div>
<div class="column three">
This is three column widths.
</div>
</div>
Which will give you.
But wait, there's more! On occasion you will need to split the content in a column and this is where nested columns come in. These are arranged in rows like so:
<div class="container">
<div class="column six">
This is six column widths.
</div>
<div class="column six">
This is six column widths.
<div class="row">
<div class="column three">
This is three column widths.
</div>
<div class="column three">
This is three column widths.
</div>
</div>
<div class="row">
<ul class="column two">
<li>This is two column widths. and a <ul>.</li>
</ul>
<div class="column two">
This is two column widths.
</div>
<div class="column two">
This is two column widths.
</div>
</div>
</div>
</div>
Which will look like so:
But what happens if you don't want to use divs? Semantic markup is another core element of sculpt and columns can be just about any valid html element. For example, a form with the following markup:
<form class="styled">
<div class="row">
<input type="text" value="text box" class="column four">
<input type="text" value="text box" class="column four">
<input type="text" value="text box" class="column four">
</div>
<div class="row">
<textarea class="column eight" rows="10" cols="10">
This is a textarea. It contains text.
</textarea>
</div>
<div class="row">
<input type="submit" class="column two">
</div>
</form>
Will look like this (with a little help from one of Sculpt's core style classes to make it pretty):
It's also possible to have a grid with no margins between the columns simply by adding a class of no-margin to the column (eg "column no-margin two"). Because removing the margins adds width to the columns, they can only be nested in Other marginless columns.
Adding a class of fluid to the container element will cause the grid to become full-width and percentage-based. However it will still stack at mobile screen-sizes.
By default - and by design - Sculpt offers little in the way of included styles. We don't want to inform your design - you should approach each design decision on its own merits - but we know it's always helpful to see how something is done. To that end here are the included styles and elements they affect.
Sculpt is designed to play nicely with symbol fonts, such as Font Awesome, and the stylesheets and font files for FA are included by default. This allows us to take the following list:
And make it a little bit more fun. Like so:
Simply by altering the markup from:
<ul>
<li>List item<li>
<li>List item<li>
</ul>
to
<ul class="fa-ul">
<li><i class="fa-li fa fa-dot-circle-o">List item<li>
<li><i class="fa-li fa fa-lightbulb-o">List item<li>
</ul>
Included are a few basic button styles to get you started. These include small, medium and large buttons, as well as button groups and a dropdown selector. To begin, simply add a class of button to your <a> tag. As the buttons are display:inline-block, make sure there are no line breaks or spaces between the buttons within groups, or they will show a gap.
Default buttons
<a href="#" class="button small"><i class="fa fw fa-cog pull-left"></i>Small button</a>
<a href="#" class="button"><i class="fa fw fa-cog pull-left"></i>Small button</a>
<a href="#" class="button large"><i class="fa fw fa-cog pull-left"></i>Small button</a>
A button group (small)
<div class="button-group">
<a href="#" class="button small"><i class="fa fw fa-align-left "></i></a><a href="#" class="button small"><i class="fa fw fa-align-center "></i></a><a href="#" class="button small"><i class="fa fw fa-align-right "></i></a><a href="#" class="button small"><i class="fa fw fa-align-justify "></i></a>
</div>
A button group (normal)
<div class="button-group">
<a href="#" class="button small"><i class="fa fw fa-align-left "></i></a><a href="#" class="button small"><i class="fa fw fa-align-center "></i></a><a href="#" class="button small"><i class="fa fw fa-align-right "></i></a><a href="#" class="button small"><i class="fa fw fa-align-justify "></i></a>
</div>
Dropdown button
<div class="button-group dropdown">
<a href="#" class="button success small semibold"><i class="fa fw fa-user"></i> Options</a><a href="#" class="button success small drop"><i class="fa fw fa-angle-down"></i></a>
<ul>
<li><a href="#"><i class="fa fw fa-cog fa-spin"></i>This is a Drop down item</a></li>
<li><a href="#"><i class="fa fw fa-cog fa-spin"></i>This is a Drop down item</a></li>
<li><a href="#"><i class="fa fw fa-cog fa-spin"></i>This is a Drop down item</a></li>
<li><a href="#"><i class="fa fw fa-cog fa-spin"></i>This is a Drop down item</a></li>
</ul>
</div>
There are some standard colour classes that can be applied to buttons. They are:
Much like the form further up the page, adding a class of "styled" allows us to make forms more consistent across browsers. For example:
<form class="styled"> <input type="radio" checked="checked" name="radios-01" id="option-01"><label for="option-01"><span></span>checked radio button</label><br> <input type="radio" name="radios-01" id="option-02"><label for="option-02"><span></span>unchecked radio button</label> </form>
<form class="styled"> <input type="checkbox" checked="checked" name="radios-01" id="option-01"><label for="option-01" value="first"><span></span>checked radio button</label><br> <input type="checkbox" name="radios-01" id="option-02"><label for="option-02" value="second"><span></span>unchecked radio button</label> </form>
By default, Sculpt uses a 2.5rem horizontal baseline grid system and 1.6rem for base font size. 1rem is equivalent to 10px, and there is a px based fallback for IE8 as it does not recognise rem as a unit of measurement.
Heading sizes are designed to stack nicely, so should you find yourself in the following situation
It will work. The above scenario is unlikely (unless you really like headings!) but it's not unusual to need to use a heading and then a subheading, for example:
And then your paragraph begins.
When text is arranged in columns it should all line up nicely.
No one would have believed in the last years of the nineteenth century that this world was being watched keenly and closely by intelligences greater than man's and yet as mortal as his own; that as men busied themselves about their various concerns they were scrutinised and studied, perhaps almost as narrowly as a man with a microscope might scrutinise the transient creatures that swarm and multiply in a drop of water. With infinite complacency men went to and fro over this globe about their little affairs, serene in their assurance of their empire over matter. It is possible that the infusoria under the microscope do the same. No one gave a thought to the older worlds of space as sources of human danger, or thought of them only to dismiss the idea of life upon them as impossible or improbable. It is curious to recall some of the mental habits of those departed days. At most terrestrial men fancied there might be other men upon Mars, perhaps inferior to themselves and ready to welcome a missionary enterprise. Yet across the gulf of space, minds that are to our minds as ours are to those of the beasts that perish, intellects vast and cool and unsympathetic, regarded this earth with envious eyes, and slowly and surely drew their plans against us. And early in the twentieth century came the great disillusionment.
The planet Mars, I scarcely need remind the reader, revolves about the sun at a mean distance of 140,000,000 miles, and the light and heat it receives from the sun is barely half of that received by this world. It must be, if the nebular hypothesis has any truth, older than our world; and long before this earth ceased to be molten, life upon its surface must have begun its course. The fact that it is scarcely one seventh of the volume of the earth must have accelerated its cooling to the temperature at which life could begin. It has air and water and all that is necessary for the support of animated existence.
Yet so vain is man, and so blinded by his vanity, that no writer, up to the very end of the nineteenth century, expressed any idea that intelligent life might have developed there far, or indeed at all, beyond its earthly level. Nor was it generally understood that since Mars is older than our earth, with scarcely a quarter of the superficial area and remoter from the sun, it necessarily follows that it is not only more distant from time's beginning but nearer its end.
It's possible to control the weight of the text through classes. As Open Sans comes with a full family of type weights it's possible to have Light, Regular, Semi Bold, Bold and Extra Bold text. As well as using the standard bold tags. Simply wrap the text in an element with the class light, regular, semibold, bold or extrabold.
It's also possible to control the spacing of letters as well, with the following classes (which can be applied to any text element):
Sculpt uses Modernizr to load scripts and additional files where necessary, and manage overheads to ensure that only the right scripts for the current environment are loaded.
By default Modernizr test for the following:
The included modernizr.init.js file loads the following.
if (Modernizr.touch) {
//load touch enabled scripts
Modernizr.load
(
[
'/library/js/jquery.scrollTo.min.js',
'/library/js/jquery.localscroll.min.js',
'/library/js/jquery.autosize.min.js',
'/library/js/jquery.form.min.js',
'/library/js/jquery.validate.min.js',
'/library/js/init.touch.js'
]
)
} else {
if (Modernizr.mq && Modernizr.csstransforms3d) {
//load modern browser scripts
Modernizr.load
(
[
'/library/js/lightbox-2.6.min.js',
'/library/js/jquery.autosize.min.js',
'/library/js/jquery.form.min.js',
'/library/js/jquery.validate.min.js',
'/library/js/jquery.scrollTo.min.js',
'/library/js/jquery.localscroll.min.js',
'/library/js/init.standard.js?v=0.2'
]
)
}
else {
//load legacy browser scripts
Modernizr.load
(
[
'/library/js/lightbox-2.6.min.js',
'/library/js/jquery.autosize.min.js',
'/library/js/jquery.form.min.js',
'/library/js/jquery.validate.min.js',
'/library/js/jquery.scrollTo.min.js',
'/library/js/jquery.localscroll.min.js',
'/library/js/respond.min.js?v=0.2',
'/library/js/selectivizr.min.js',
'/library/js/init.legacy.js?v=0.2'
]
)
}
}
The most important script for legacy browsers is respond.min.js. This is a polyfill which adds media query support to IE8. Without this you will only load the mobile device styles into Internet Explorer 8 and below.
It is possible to test for more things, it really just depends what you are setting out to do! Each testing condition loads its own initialisation file (init.touch.js, init.standard.js or init.legacy.js) which in turn ensure that the required scripts are initialised, should they require it. It also means that you aren't loading a script for touch screens which might interfere with mouse clicks. It does happen!
Sculpt really is that easy to use, so why not see what you can do with it?