Introduction
CSS is a tricky
aspect of programming a front end for a web site – there are inconsistencies on
elements and properties which can cause bugs in a cross browser runtime environment,
so much so that even the language itself contains instructions to use
specifically for a given browser. This
is – in fact – a very sad state of affairs and represents the mess the
computing industry as a whole is in – with browser developers fighting for
dominance forcing language (CSS in this case) developers to actually write
different instructions for each browser!!!!!
Additionally, there are very few accepted web design and coding standards which
guide the programmer on how to best develop an efficient method to achieve any
given task with CSS.
Take for example the use of variables within CSS – these are denoted as follows within a .CSS file which can be included in the referencing source code with a standard <LINK REL> tag :-
At the top of the CSS file, we enter…..
: Root {
–maintextcolor : #606060;
}
Then, in our classes, we reference the variable as follows…..
.headingcolor {color : var(–maintextcolor); }
.smalltext {color : var(–maintextcolor); }
Here you can clearly see that in the event the color needs to be changed, a simple change to the variable maintextcolor will take effect across all classes in which it is referenced. Imagine having text color specified in over 50 classes – you can see how useful this is! Yet many developers still do this…..
.headingcolor {color : #606060; }
.smalltext {color :
#606060; }
If you would like to learn more about web design, you can visit the Stockport
Web Design Company at Photon
Flux Web Design where
you can ask questions or get in touch via telephone!
Grid Management
No move on to the complex issue of writing responsive code for a completely
custom website – in other words – a website which is NOT simply a botched word
press upload, but a website with a brand new look and feel, designed to be
unique to the company whom it is being written for.
Imagine grid control with no variables, where sizing is specified in
percentages and pixels (and whatever else!!!) all over and throughout the .CCS
class file and you will begin to get the picture of just how difficult it is to
change the width of standard column widths across the entire project.
Enter Bootstrap 4. Not only do we not
even have to manage our own variables, but they have taken it one step further
by standardising the screen layout into a NESTED manageable grid of 12 columns,
which can be merged and separated at will, padded or marginalised, colored and
scaled with ease.
Finally there has been recognition that standardisation is required and Bootstrap 4 is the answer. It makes the developers life much easier, but more importantly, it means that a given developer can move from one Bootstrap based system to another with ease, without the need to understand complex and convoluted botched up CSS which has usually been created by “hook or by crook” rather than within a methodical design process.
Whilst the Bootstrap class library contains many features, we are going to take an overview of the way it allows us to create complex responsive screen layouts for any web design with ease and simplicity.
The Bootstrap 4 Grid System
To begin with,
image a screen divided into 12 sections horizontally. Each section is equal in width.
You will notice – that no matter how large or small the screen is. There will
be 12 columns each of the same width due to the fact that Bootstrap uses
percentage based measurements to split the screen – not fixed pixel widths.
Let’s look at the code to do this.
<div class=’row’>
<div class=’col-xs’>
<span>Hello</span>
</div>
<div class=’col-xs’>
<span>World</span>
</div>
</div>
Initially we
specify a “row” – the height of the row is determined by the height of the
content which is placed within the row.
Within the row, we specify that we want ONE column and it must occupy ALL 12 of the available 12 columns (we use col-xs). In that column we place “Hello”.
We then specify
another column, again – it must occupy ALL 12 of the available 12 columns
(col-xs). But what I hear you say? Within this single row – we have already used
up all 12 columns with the “Hello” span.
Fear not – Bootstrap knows this and will place the “World” span on the
line beneath the “Hello” span, forcing the “World” span to also take up 12 columns.
That’s simple enough – now lets change things around and add in a little more
complexity.
<div class=’row’>
<div class=’col-xs col-md-6’>
<span>Hello</span>
</div>
<div class=’col-xs col-md-6’>
<span>World</span>
</div>
</div>
You will notice that there is a new class specifier on the col div. “col-md-6” and it is present on each of the data items.
What this means is
that on an extra small screen (denoted with col-xs) all 12 columns are used for
this div. But on a MEDIUM screen – only
6 of the 12 columns are used for this div – thus creating a column of 12/6 or
HALF of the screen in width. This makes
sense, because on a medium screen, you have more space to play with horizontally
– so we can place our div side by side instead of on top of each other. Bootstrap will detect the screen size and
automatically place the div side by side on a medium screen – and above and
below each other on an extra small screen such as a mobile phone or small
tablet.
Thus – when the column containing the word “World” comes along on a MEDIUM screen – there are STILL 6 of the 12 left to use, so it creates a second single column taking up 6 of the smaller columns thereby filling the rest of the row!
Let’s fill it all in now with the following example…..
<div class=’row’>
<div class=’col-xs col-sm-6 col-md-6 col-lg-12 col-xl-4’>
<span>Hello</span>
</div>
<div class=’col-xs col-sm-6 col-md-6 col-lg-12 col-xl-4’>
<span>World</span>
</div>
<div class=’col-xs col-sm-12 col-md-12 col-lg-12 col-xl-4’>
<span>!</span>
</div>
</div>
Now, to understand this, you have to read downwards as well as across the code. You will more clearly that within the row, the col specifies begin to interact with each other more clearly. This is extremely important.
On an extra small screen – we get:-
Hello
World
!
On a small screen we get:-
Hello World
!
On a medium screen we get:-
Hello World
!
On a large screen we get:-
Hello
World
!
On an extra-large
screen we get
Hello World!
Once you have grasped the above example and why the output is the way it has
been described, you are ready to move on to more complex Bootstrap layouts
which can further enhance your web design skills and ability to produce
extremely complex fully responsive web layouts.
RELATED ARTICLES
Latest Articles
- The Summer Learning Loss – 7 Key Aspects You Must Understand in 2025In TipsNovember 29, 2024Every year, students face summer learning loss during […]
- Equity Trading in Global Markets: Key ConsiderationsIn TipsNovember 4, 2024How prepared are you to explore the possibilities that […]
- Crafting a Standout Resume and Networking Your Way to Jobs in CanadaIn TipsOctober 23, 2024When applying for jobs in Canada, the format of your […]
- How to invest in the future?In TechnologySeptember 27, 2024Who doesn’t want to build up some extra pension […]
- How to De-Stress While TravelingIn TravelAugust 7, 2024Traveling can be an exciting adventure, offering […]
- Online Gaming: A Revolution in Entertainment and Social InteractionIn EntertainmentJuly 16, 2024The world of online gaming has seen remarkable growth […]
- Dark Past Vehicle History Report Can RevealIn AutomotiveJuly 9, 2024The more well-maintained a used car, the harder it is […]
- Enhancing Your Craft: Advanced Techniques in Woodworking SpindlesIn TipsJune 27, 2024If you’ve been performing basic techniques on […]
- Ways To Create Unique Cosplay OutfitsIn FashionMay 7, 2024Cosplay is popular among fans of certain movies, TV […]
- Mastering the Art of Machine Vision: Choosing the Perfect Lens for Optimum PerformanceIn TechnologyMay 2, 2024Key Takeaways: Machine vision is a technology that […]
- Unlocking Success: Mastering Bank PO Interview PreparationIn EducationApril 24, 2024For banking careers, PO interviews stand as formidable […]
- The Strategic Value of Purchasing FontsIn TipsApril 18, 2024In today’s visually driven world, fonts are more […]
stopie.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.
Clicking on an Amazon link from stopie.com does not increase the cost of any item you purchase.
We will only ever link to Amazon products that we think our visitors may be interested in and appreciate learning more about.